Could someone help me with a bit of Xamarin.
How do we add Navigation Bar and Page Buttons in a Master Detail Page in Xamarin ?
I added a MasterDetail page, and defined the xaml as follows.
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:local="clr-namespace:MyNameSpace.Views;assembly=MyNameSpace"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="MyNameSpace.Views.MainMenu">
<MasterDetailPage.Master BackgroundColor ="White">
<ContentPage Title="Master Page" BackgroundColor = "#2c3e50" >
<Grid BackgroundColor ="#354b60">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="3*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="1" Grid.Column="0">
<Button BackgroundColor="#2c3e50" TextColor="White" Text="Menu 1" ></Button>
<Button BackgroundColor="#2c3e50" TextColor="White" Text="Menu 2" ></Button>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:MainPage/>
</MasterDetailPage.Detail>
</MasterDetailPage>
Am I missing out something ?
Thanks in advance
Try wrapping your Detail page in a NavigationPage:
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:MainPage/>
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
That should give you a navigation bar at the top.
Related
I'm work on changing iOS status bar color and it's text color. The result appeared good except when a pop-up shown on screen. As shown as the image below, the status bar does not dimmed when a pop-up displayed on screen, it seems to stand out on the screen.
As I really not familiar with iPhone, does it usually work this way? Or is there any workaround to dim status bar if pop-up appeared?
Note: I am using iPhone X with iOS 12.1
Pop-up Code:
<?xml version="1.0" encoding="utf-8" ?>
<pages:BasePopupPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="WhiteLabel.Mobile.App.Pages.Popup.TransferPopUp"
xmlns:pages="clr-namespace:WhiteLabel.Mobile.App.Pages.Popup"
xmlns:popups="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:Resources="clr-namespace:WhiteLabel.Mobile.App.Resources">
<!--Animations use example-->
<popups:PopupPage.Animation>
<animations:ScaleAnimation
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8"
DurationIn="400"
DurationOut="300"
EasingIn="SinOut"
EasingOut="SinIn"
HasBackgroundAnimation="True"/>
</popups:PopupPage.Animation>
<!-- Content -->
<StackLayout
VerticalOptions="Center"
HorizontalOptions="FillAndExpand"
Padding="20, 20, 20, 20">
<StackLayout BackgroundColor="White">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
</Grid>
<StackLayout >
<Label
Text="DELETE_POPUP_INFO"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
<Grid BackgroundColor="White" Padding="20, 20, 20, 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<!-- Cancel button-->
<Button x:Name="CancelButton"
Command="{Binding TappedCloseCommand}"
Grid.Row="0"
Grid.Column="0"
Text="CANCEL"
BorderWidth="1"
BorderRadius="0">
<Button.BorderRadius>
<!-- fixes a bug on android where border doesn't work without a radius. -->
<OnPlatform x:TypeArguments="x:Int32">
<OnPlatform.Android>1</OnPlatform.Android>
</OnPlatform>
</Button.BorderRadius>
</Button>
<!-- Delete button-->
<Button x:Name="DeleteButton"
Command="{Binding TappedDeleteCommand}"
Grid.Row="0"
Grid.Column="1"
Text="DELETE"
WidthRequest="500"
BorderRadius="0">
</Button>
</Grid>
</StackLayout>
</StackLayout>
</StackLayout>
</pages:BasePopupPage>
I use your code and create a pop up page. It works as expected. I will show you the code I use and you can have a look at it.
Here is button event I use to show the pop-up:
private void Button_Clicked(object sender, EventArgs e)
{
PopupNavigation.Instance.PushAsync(new Page1());
}
And I did not add additional code in the pop up page:
public partial class Page1 : PopupPage
{
public Page1()
{
InitializeComponent();
}
}
The code in Xaml is the same as you and I use Rg.Plugins.Popup with version 1.1.5.188.
I can share you the sample if you want.
Here is the screenshot:
I have an application in xamarin.form and I want to display image in the title bar.
I have used xamarin.form 3.6.0.2.
When i used navigationpage.titleview and run application it showing error message.
doesn't have property titleview.
[Build output] https://ufile.io/e1rkf
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
xmlns:local="clr-namespace:Reports_Rpt;assembly=Reports_Rpt"
x:Class="Reports_Rpt.Signup">
<NavigationPage.TitleView>
<Image Source="{local:ImageResource Reports_Rpt.Images.logo.png}" HorizontalOptions="Start" BackgroundColor="#4B8CA8"></Image>
</NavigationPage.TitleView>
<ContentPage.Content>
<Grid BackgroundColor="White" Padding="2,2,2,2">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<xfx:XfxEntry
x:Name="txtName"
Placeholder="Enter your name"
HorizontalOptions="Fill"
Grid.Row="0"
/>
<xfx:XfxEntry
x:Name="txtContactNum"
Placeholder="Enter your contact number"
HorizontalOptions="Fill"
Grid.Row="1"
/>
</Grid>
</ContentPage.Content>
</ContentPage>
[1]: https://ufile.io/e1rkf
Error resolved by update nuget package for android.
Can we create sdk or library in xamarin for android and IOS which. And the library or sdk should also contain some UI (views). Is it possible that library or sdk can contain views that we can use with some other projects of xamarin?
Yes! You can custom Controls with Bindable Properties in Xamarin.Forms then package it in a nuget package.
For example: you can create a ContentView in another folder called MyCustomControl like this
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="BindablePropertyDemo.Custom.MyCustomControl">
<Grid x:Name="grid"
Padding="10,40,10,10"
HeightRequest="160"
VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="image"
HeightRequest="100"
HorizontalOptions="Center"/>
<Label x:Name="title"
Text="BASKETBALL"
Grid.Row="1"
FontSize="20"
VerticalOptions="Center"
TextColor="White"
HorizontalOptions="Center"
FontAttributes="Bold"/>
</Grid>
</ContentView>
And then you can call this control from any page like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BindablePropertyDemo"
xmlns:custom="clr-namespace:BindablePropertyDemo.Custom"
x:Class="BindablePropertyDemo.MainPage"
BackgroundColor="#33334c">
<ScrollView>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid BackgroundColor="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid BackgroundColor="#ff4284" Padding="10">
<Image Source="hamburger.png"/>
</Grid>
<Label Grid.Column="1"
Text="Home"
TextColor="#ff4284"
FontSize="20"
Margin="5,0,0,0"
HorizontalOptions="Start"
VerticalOptions="Center"/>
</Grid>
<StackLayout Spacing="0" Grid.Row="1"><
<!-- SEE HERE!! -->
<custom:MyCustomControl BackgroundColor="#76dab2"
TitleText="BASKETBALL"
Image="basketball.png"/>
<custom:MyCustomControl BackgroundColor="#7c57e4"
TitleText="FOOTBALL"
Image="football.png"/>
<custom:MyCustomControl BackgroundColor="#f1b136"
TitleText="GRIDIRON"
Image="gridiron.png"/>
</StackLayout>
</Grid>
</ScrollView>
</ContentPage>
And you will have a result like this:
I have taken this example of this tutorial, you can continue to have more information.
You can find their source code here: https://github.com/mindofai/BindablePropertyDemo
I want to create a structure but it's not coming out the way I want it
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App37"
x:Class="App37.MainPage">
<StackLayout BackgroundColor="Aqua" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="Bisque" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="BlueViolet" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
</ContentPage>
My resolve has to stay this way
enter image description here
One smart way of doing this structure is through Grid layout
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinFormDemo" x:Class="XamarinFormDemo.XamarinFormDemoPage">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout HorizontalOptions="Fill" Grid.Row="0" BackgroundColor="Gray" />
<StackLayout HorizontalOptions="Fill" Grid.Row="1" BackgroundColor="Bisque" />
<StackLayout HorizontalOptions="Fill" Grid.Row="2" BackgroundColor="BlueViolet" />
</Grid>
</ContentPage>
As Jason pointed out, a ContentPage can have only once child element. You can have a parent stacklayout to hold the three child stacks e.g
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App37"
x:Class="App37.MainPage">
<StackLayout>
<StackLayout BackgroundColor="Aqua" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="Bisque" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
<StackLayout BackgroundColor="BlueViolet" VerticalOptions="Fill" HorizontalOptions="Fill">
</StackLayout>
</StackLayout>
</ContentPage>
Notice the two buttons below. The first is in a StackLayout, and the second is in a 1x1 grid cell. The first obeys the HeightRequest property, but the second will not.
How can I control the size of a Button inside of a GridCell?
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:SimpleApp"
x:Class="SimpleApp.MainPage">
<StackLayout>
<Button Text="Button"
HeightRequest="30"
HorizontalOptions="Center" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Text="Button"
HeightRequest="30"
HorizontalOptions="Center"
Grid.Row="0" Grid.Column="0" />
</Grid>
</StackLayout>
</ContentPage>
You need to change <RowDefinition Height="200" /> to <RowDefinition Height="*" /> to take in consideration your button size.
If you really want the row to have that size, simply set VerticalOptions="StartAndExpand" in your button XAML code.
Alternatively, you can set <RowDefinition Height="200" /> to <RowDefinition Height="Auto" /> if you want to set this to the default button height. as using <RowDefinition Height="200" /> will take any unused space.