When I add toolbar in my Main Page the content page disappear. What should I do to fix this? Can you share insight or point me to links for me to learn. I am just starting with xamarin forms. I been finding the answer the whole day but I can't find one.
<?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:KLConnect"
x:Class="KLConnect.MainPage"
Title="KLConnect TTM+ Operation">
<Label x:Name="label"
FontSize="Medium"
VerticalOptions="Center"
HorizontalOptions="Center" />
<ContentPage.ToolbarItems>
<ToolbarItem Text="setting"
Order="Primary"
Clicked="OnToolbarItemClicked">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="ic_build_white_48dp.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="close"
Order="Primary"
Clicked="OnToolbarItemClicked">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="ic_highlight_off_white_48dp.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
<ToolbarItem Text="help"
Order="Primary"
Clicked="OnToolbarItemClicked">
<ToolbarItem.Icon>
<OnPlatform x:TypeArguments="FileImageSource"
Android="ic_help_outline_white_48dp.png"/>
</ToolbarItem.Icon>
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="plainButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="#eee"/>
<Setter Property="TextColor" Value="Black" />
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="FontSize" Value="40" />
</Style>
<Style x:Key="darkerButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="#ddd"/>
<Setter Property="TextColor" Value="Black" />
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="FontSize" Value="40" />
</Style>
<Style x:Key="orangeButton" TargetType="Button">
<Setter Property="BackgroundColor" Value="#E8AD00"/>
<Setter Property="TextColor" Value="White" />
<Setter Property="BorderRadius" Value="0"/>
<Setter Property="FontSize" Value="40" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid x:Name="controlGrid" RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="0" Grid.Row="0" HorizontalTextAlignment="End" VerticalTextAlignment="End" TextColor="White"
FontSize="60" Grid.ColumnSpan="4" />
<Button Text = "C" Grid.Row="1" Grid.Column="0"
Style="{StaticResource darkerButton}" />
<Button Text = "+/-" Grid.Row="1" Grid.Column="1"
Style="{StaticResource darkerButton}" />
<Button Text = "%" Grid.Row="1" Grid.Column="2"
Style="{StaticResource darkerButton}" />
<Button Text = "div" Grid.Row="1" Grid.Column="3"
Style="{StaticResource orangeButton}" />
<Button Text = "7" Grid.Row="2" Grid.Column="0"
Style="{StaticResource plainButton}" />
<Button Text = "8" Grid.Row="2" Grid.Column="1"
Style="{StaticResource plainButton}" />
<Button Text = "9" Grid.Row="2" Grid.Column="2"
Style="{StaticResource plainButton}" />
<Button Text = "X" Grid.Row="2" Grid.Column="3"
Style="{StaticResource orangeButton}" />
<Button Text = "4" Grid.Row="3" Grid.Column="0"
Style="{StaticResource plainButton}" />
<Button Text = "5" Grid.Row="3" Grid.Column="1"
Style="{StaticResource plainButton}" />
<Button Text = "6" Grid.Row="3" Grid.Column="2"
Style="{StaticResource plainButton}" />
<Button Text = "-" Grid.Row="3" Grid.Column="3"
Style="{StaticResource orangeButton}" />
<Button Text = "1" Grid.Row="4" Grid.Column="0"
Style="{StaticResource plainButton}" />
<Button Text = "2" Grid.Row="4" Grid.Column="1"
Style="{StaticResource plainButton}" />
<Button Text = "3" Grid.Row="4" Grid.Column="2"
Style="{StaticResource plainButton}" />
<Button Text = "+" Grid.Row="4" Grid.Column="3"
Style="{StaticResource orangeButton}" />
<Button Text = "0" Grid.ColumnSpan="2"
Grid.Row="5" Grid.Column="0" Style="{StaticResource plainButton}" />
<Button Text = "." Grid.Row="5" Grid.Column="2"
Style="{StaticResource plainButton}" />
<Button Text = "=" Grid.Row="5" Grid.Column="3"
Style="{StaticResource orangeButton}" />
</Grid>
</ContentPage.Content>
</ContentPage>
It's because you have a Label already set at the beginning of your xaml.
Remove this
<Label x:Name="label"
FontSize="Medium"
VerticalOptions="Center"
HorizontalOptions="Center" />
Related
i wrote this code for a registration page. in some phones, the screen doesn't fit for all the views so i used a scrollview so that the user could scroll down through them. the problem i'm facing is that the scrollview doesn't scroll enough upwards. the button at the end doesn't appear. here is my xaml code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ALNahrainAlphaApp.RegisterPage"
xmlns:controls="clr-namespace:ALNahrainAlphaApp;assembly=ALNahrainAlphaApp"
>
<ContentPage.Content>
<ScrollView Orientation="Vertical">
<ScrollView.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#0d98ba"
Offset="0.2" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</ScrollView.Background>
<StackLayout>
<Grid>
<StackLayout>
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,160">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="20" Margin="0,5" />
<controls:CustomEntry
Grid.Row="0"
x:Name="id"
HorizontalOptions="FillAndExpand"
Margin="10,5"
TextColor="Black"
Placeholder="ID"
FontSize="16"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="1" Margin="0,5"/>
<controls:CustomEntry
Grid.Row="1"
x:Name="firstname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
FontSize="16"
Placeholder="First Name"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="2" Margin="0,5"/>
<controls:CustomEntry
Grid.Row="2"
x:Name="lastname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Last Name"
PlaceholderColor="Gray"
FontSize="16"
/>
<Frame CornerRadius="20" Grid.Row="3" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="3"
x:Name="role"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Role"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="4" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="4"
x:Name="user_name"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Username"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="5" Margin="0,5"/>
<controls:CustomEntry
FontSize="16"
Grid.Row="5"
x:Name="password"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Password"
PlaceholderColor="Gray"
/>
<StackLayout Orientation="Horizontal" Grid.Row="6">
<Label Text="Allow Access" TextColor="Black" FontSize="16" HorizontalOptions="Center" VerticalOptions="Center" Margin="15,5"/>
<Switch
ThumbColor="Black"
OnColor="White"
x:Name="appaccess"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="40,0"
/>
</StackLayout>
</Grid>
</Frame>
<Button CornerRadius="50" Text="Submit" FontSize="Medium" BackgroundColor="White" TextColor="Black" FontFamily="audiofont" x:Name="save" HeightRequest="60" WidthRequest="140" HorizontalOptions="Center" VerticalOptions="Center" Margin="0,-85" Clicked="save_Clicked"/>
</StackLayout>
<Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Start" Padding="-2" BorderColor="White" Margin="20,5,20,0">
<Image HeightRequest="150" WidthRequest="150" x:Name="userprofile" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
</Frame>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
i tried different things, i put the scrollview inside a contentview but i didn't work. what am i doing wrong?
You can try to add property RowDefinitions and define two row for the outer grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<!--other code-->
<Grid>
You can refer to the following code:
<ContentPage.Content>
<ScrollView Orientation="Vertical">
<ScrollView.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Color="#0d98ba"
Offset="0.2" />
<GradientStop Color="White"
Offset="1" />
</LinearGradientBrush>
</ScrollView.Background>
<StackLayout>
<Grid>
<!--add two row here-->
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<StackLayout>
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,160">
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Frame CornerRadius="20" Margin="0,5" />
<Entry
Grid.Row="0"
x:Name="id"
HorizontalOptions="FillAndExpand"
Margin="10,5"
TextColor="Black"
Placeholder="ID"
FontSize="16"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="1" Margin="0,5"/>
<Entry
Grid.Row="1"
x:Name="firstname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
FontSize="16"
Placeholder="First Name"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="2" Margin="0,5"/>
<Entry
Grid.Row="2"
x:Name="lastname"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Last Name"
PlaceholderColor="Gray"
FontSize="16"
/>
<Frame CornerRadius="20" Grid.Row="3" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="3"
x:Name="role"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Role"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="4" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="4"
x:Name="user_name"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Username"
PlaceholderColor="Gray"
/>
<Frame CornerRadius="20" Grid.Row="5" Margin="0,5"/>
<Entry
FontSize="16"
Grid.Row="5"
x:Name="password"
HorizontalOptions="Fill"
Margin="10,5"
TextColor="Black"
Placeholder="Password"
PlaceholderColor="Gray"
/>
<StackLayout Orientation="Horizontal" Grid.Row="6">
<Label Text="Allow Access" TextColor="Black" FontSize="16" HorizontalOptions="Center" VerticalOptions="Center" Margin="15,5"/>
<Switch
ThumbColor="Black"
OnColor="White"
x:Name="appaccess"
HorizontalOptions="Center"
VerticalOptions="Center"
Margin="40,0"
/>
</StackLayout>
</Grid>
</Frame>
<Button CornerRadius="50" Text="Submit" FontSize="Medium" BackgroundColor="White" TextColor="Black" FontFamily="audiofont" x:Name="save" HeightRequest="60" WidthRequest="140" HorizontalOptions="Center" Margin="0,-85" />
</StackLayout>
<Frame CornerRadius="50" HeightRequest="100" WidthRequest="100" HorizontalOptions="Center" VerticalOptions="Start" Padding="-2" BorderColor="White" Margin="20,5,20,0">
<Image HeightRequest="150" WidthRequest="150" x:Name="userprofile" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Source="grass.png"/>
</Frame>
</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Change the Margin
<Frame CornerRadius="50" BorderColor="White" BackgroundColor="Transparent" Margin="20,50">
<Grid Padding="1" ColumnSpacing="1" RowSpacing="0" Margin="0,90">
I am using the Xamarin Community Toolkit TabView with a ControlTemplate in the TabViewItem, it works well. I tried adding a Badge to the TabViewItem and nothing happens. When I remove the ControlTemplate the Badge works perfectly. As a sanity test, I pulled the XCT sample code and tried adding a control template to a working TabView badge example and got the same results, no badge.
I am hoping that I am just missing something simple, but I have a feeling that the ControlTemplate and Badge are not compatible...
Does anyone have any examples of and XCT TabViewItem using a ControlTemplate and a badge?
Here is the sample xaml from the CustomTabsPage.xaml in the XCT Samples. I modified it by adding a Badge to the first tab, but it does not show the badge.
<pages:BasePage>
<pages:BasePage.Resources>
<ResourceDictionary>
<ControlTemplate
x:Key="TabItemTemplate">
<Grid
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="24"
HeightRequest="24"
Margin="6"
Source="{TemplateBinding CurrentIcon}" />
<Label
Grid.Row="1"
HorizontalOptions="Center"
FontSize="{TemplateBinding FontSize}"
Text="Test"
TextColor="{TemplateBinding CurrentTextColor}" />
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="FabTabItemTemplate">
<Grid>
<ImageButton
InputTransparent="True"
Source="{TemplateBinding CurrentIcon}"
Padding="10"
HorizontalOptions="Center"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<ImageButton.CornerRadius>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="iOS" Value="30"/>
<On Platform="Android" Value="60"/>
<On Platform="UWP" Value="36"/>
</OnPlatform>
</ImageButton.CornerRadius>
<ImageButton.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">True</On>
<On Platform="macOS">False</On>
</OnPlatform>
</ImageButton.IsVisible>
</ImageButton>
<BoxView
InputTransparent="True"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<BoxView.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">False</On>
<On Platform="macOS">True</On>
</OnPlatform>
</BoxView.IsVisible>
</BoxView>
</Grid>
</ControlTemplate>
<Style
x:Key="TabItemStyle"
TargetType="xct:TabViewItem">
<Setter
Property="FontSize"
Value="12" />
<Setter
Property="TextColor"
Value="#979797" />
<Setter
Property="TextColorSelected"
Value="#FF0000" />
</Style>
<Style
x:Key="CustomTabStyle"
TargetType="xct:TabView">
<Setter
Property="IsTabTransitionEnabled"
Value="True" />
<Setter
Property="TabStripHeight"
Value="48" />
<Setter
Property="TabContentBackgroundColor"
Value="#484848" />
<Setter
Property="TabStripPlacement"
Value="Bottom" />
</Style>
</ResourceDictionary>
</pages:BasePage.Resources>
<pages:BasePage.Content>
<Grid>
<xct:TabView
Style="{StaticResource CustomTabStyle}">
<xct:TabView.TabStripBackgroundView>
<BoxView
Color="#484848"
CornerRadius="36, 36, 0, 0"/>
</xct:TabView.TabStripBackgroundView>
<xct:TabViewItem
Text="Tab 1"
Icon="triangle.png"
ControlTemplate="{StaticResource TabItemTemplate}"
BadgeText="Test"
BadgeBackgroundColor="Pink"
BadgeBackgroundColorSelected="Red"
BadgeTextColor="White"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LawnGreen">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
Icon="circle.png"
ControlTemplate="{StaticResource FabTabItemTemplate}"
Style="{StaticResource TabItemStyle}"
TabTapped="OnFabTabTapped" />
<xct:TabViewItem
Text="Tab 3"
Icon="square.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</pages:BasePage.Content>
</pages:BasePage>
You could add a BageView in your ControlTemplate like below and then remove the Badge properties in TabViewItem.
Also please slightly adjust the position of the badge where you want to place it.
<ControlTemplate
x:Key="TabItemTemplate">
<Grid
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="24"
HeightRequest="24"
Margin="6"
Source="{TemplateBinding CurrentIcon}" />
<Label
Grid.Row="1"
HorizontalOptions="Center"
FontSize="{TemplateBinding FontSize}"
Text="Test"
TextColor="{TemplateBinding CurrentTextColor}" />
<xct:BadgeView
Grid.Row="0" Grid.Column="1"
BackgroundColor="Pink"
TextColor="White"
Text="123"
/>
</Grid>
</ControlTemplate>
Reference link:
https://learn.microsoft.com/en-us/xamarin/community-toolkit/views/badgeview
I using the AppShell, like I show the flow here
How to change the Status Bar in Xamarin Forms ContentPage using AppShell?
at this point I have an issue related with ContentPage's footer, that should be White, but is not, see this picture
In my code I am doing:
BackgroundColor="White"
Shell.BackgroundColor="White"
What is wrong?
I am doing this BaseStyle
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Primary}, Light={StaticResource Primary}}" />
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
<Setter Property="Shell.TitleColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White" />
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarTitleColor" Value="White" />
</Style>
The XAML Page is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="Toretto.MobileApp.Views.ForgetPasswordPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:behaviors1="clr-namespace:Toretto.MobileApp.Behaviors"
xmlns:controls="clr-namespace:Toretto.MobileApp.Controls"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:local="clr-namespace:Toretto.MobileApp;assembly=Toretto.MobileApp"
xmlns:r="clr-namespace:Toretto.MobileApp.LocalizationResources"
BackgroundColor="White"
Shell.BackgroundColor="White"
Shell.NavBarIsVisible="False">
<ContentPage.Resources>
<ResourceDictionary />
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.Platforms>
<On Platform="iOS" Value="0, 30, 0, 0" />
<On Platform="Android" Value="0, 0, 0, 0" />
</OnPlatform.Platforms>
</OnPlatform>
</StackLayout.Padding>
<StackLayout
BackgroundColor="{StaticResource Primary}"
HeightRequest="60"
Orientation="Horizontal">
<Image
x:Name="BackImage"
Margin="10,0,0,0"
HeightRequest="36"
Source="{local:ImageResource Toretto.MobileApp.Resources.Images.back.png}"
VerticalOptions="CenterAndExpand"
WidthRequest="36">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding BackCommand}" />
</Image.GestureRecognizers>
</Image>
<Label
Margin="-40,10,0,0"
FontSize="Medium"
HorizontalOptions="CenterAndExpand"
Text="{x:Static r:Resource.ForgetPasswordTitle}"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
<Label
Margin="20,20,20,0"
FontSize="Medium"
HorizontalOptions="StartAndExpand"
Text="{x:Static r:Resource.ForgetPasswordSubtitle}"
TextColor="{StaticResource TorettoDarkColor}" />
<Label
x:Name="EmailErrorLabel"
FontSize="Small"
HorizontalOptions="CenterAndExpand"
IsVisible="True"
Style="{StaticResource ValidationErrorLabelStyle}"
Text="{Binding Email.Errors, Converter={StaticResource ValidationErrorConverter}}" />
<Label
Margin="20,10,20,0"
FontFamily="Lobster-Regular"
FontSize="Medium"
Text="{x:Static r:Resource.User}"
TextColor="{StaticResource TorettoDarkColor}" />
<controls:CustomEntry
x:Name="customEntryEmail"
Margin="20,0,20,10"
IsPassword="False"
Style="{StaticResource CustomEntryStyle}"
Text="{Binding Email.Value, Mode=TwoWay}">
<Entry.Behaviors>
<behaviors1:EventToCommandBehavior Command="{Binding ValidateEmailCommand}" EventName="TextChanged" />
</Entry.Behaviors>
<!-- Sample -->
<Entry.Triggers>
<Trigger TargetType="Entry" Property="IsFocused" Value="True">
<Setter Property="BackgroundColor" Value="{StaticResource TorettoLightColor}" />
<!-- multiple Setters elements are allowed -->
</Trigger>
</Entry.Triggers>
</controls:CustomEntry>
<Button
x:Name="loginButton"
Margin="20,20,20,20"
Command="{Binding SendCommand}"
HeightRequest="40"
Text="{x:Static r:Resource.Send}"
TextColor="White"
VerticalOptions="Center">
<Button.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference customEntryEmail}, Path=Text.Length}"
TargetType="Button"
Value="0">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Button.Triggers>
</Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
go to the App.XAML and change the Primary key to the color you want, or in BaseStyle you find Shell.TabBarBackgroundColor tag change this value to "White"
I wish I could create a BottomBar that would allow me to have a graphic like this, with a button bigger than all the others. I tried with a TabbedPage but it doesn't allow me this customization. I tried with a TabView but it doesn't allow me to insert ContentPage pages by pressing buttons. I would like a BottomBar that would allow me to have this graphic and to be able to use pages as button content.
Example
You could use TabView With Action Button from the Xamarin Community Toolkit linked below. By not assigning any content and instead assigning an event to the TabTapped property, you will display a button instead of another tab.
Install from NuGet: https://www.nuget.org/packages/Xamarin.CommunityToolkit/
Add xct:
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
Xaml:
<ContentPage.Resources>
<ResourceDictionary>
<ControlTemplate
x:Key="TabItemTemplate">
<Grid
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="24"
HeightRequest="24"
Margin="6"
Source="{TemplateBinding CurrentIcon}" />
<Label
Grid.Row="1"
HorizontalOptions="Center"
FontSize="{TemplateBinding FontSize}"
Text="{TemplateBinding Text}"
TextColor="{TemplateBinding CurrentTextColor}" />
</Grid>
</ControlTemplate>
<ControlTemplate
x:Key="FabTabItemTemplate">
<Grid>
<ImageButton
InputTransparent="True"
Source="circle.png"
Padding="10"
HorizontalOptions="Center"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<ImageButton.CornerRadius>
<OnPlatform x:TypeArguments="x:Int32">
<On Platform="iOS" Value="30"/>
<On Platform="Android" Value="60"/>
<On Platform="UWP" Value="36"/>
</OnPlatform>
</ImageButton.CornerRadius>
<ImageButton.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">True</On>
<On Platform="macOS">False</On>
</OnPlatform>
</ImageButton.IsVisible>
</ImageButton>
<BoxView
InputTransparent="True"
HorizontalOptions="Center"
CornerRadius="30"
BackgroundColor="#FF0000"
HeightRequest="60"
WidthRequest="60"
Margin="6">
<BoxView.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android, iOS, UWP">False</On>
<On Platform="macOS">True</On>
</OnPlatform>
</BoxView.IsVisible>
</BoxView>
</Grid>
</ControlTemplate>
<Style
x:Key="TabItemStyle"
TargetType="xct:TabViewItem">
<Setter
Property="FontSize"
Value="12" />
<Setter
Property="TextColor"
Value="#979797" />
<Setter
Property="TextColorSelected"
Value="#FF0000" />
</Style>
<Style
x:Key="CustomTabStyle"
TargetType="xct:TabView">
<Setter
Property="IsTabTransitionEnabled"
Value="True" />
<Setter
Property="TabStripHeight"
Value="48" />
<Setter
Property="TabContentBackgroundColor"
Value="#484848" />
<Setter
Property="TabStripPlacement"
Value="Bottom" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<xct:TabView
Style="{StaticResource CustomTabStyle}">
<xct:TabView.TabStripBackgroundView>
<BoxView
Color="#484848"
CornerRadius="36, 36, 0, 0"/>
</xct:TabView.TabStripBackgroundView>
<xct:TabViewItem
Text="Tab 1"
Icon="triangle.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LawnGreen">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent1" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Tab 2"
Icon="circle.png"
ControlTemplate="{StaticResource FabTabItemTemplate}"
Style="{StaticResource TabItemStyle}"
TabTapped="OnFabTabTapped" />
<xct:TabViewItem
Text="Tab 3"
Icon="square.png"
ControlTemplate="{StaticResource TabItemTemplate}"
Style="{StaticResource TabItemStyle}">
<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
Update:
Do I have the possibility to insert a ContentPage by pressing on in TabViewItem and keep the TabVIew
You could set the page as contentview.
<?xml version="1.0" encoding="utf-8" ?>
<ContentView
x:Class="App9.Page1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<ContentView.Content>
<StackLayout>
<Label
HorizontalOptions="CenterAndExpand"
Text="Welcome to Page1!"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentView.Content>
</ContentView>
public partial class Page1 : ContentView
{
public Page1()
{
InitializeComponent();
}
}
And then load in the TabViewItem.
<xct:TabViewItem
ControlTemplate="{StaticResource TabItemTemplate}"
Icon="square.png"
Style="{StaticResource TabItemStyle}"
Text="Tab 3">
<!--<Grid
BackgroundColor="LightCoral">
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent3" />
</Grid>-->
<local:Page1 />
</xct:TabViewItem>
I'm trying to create a xamarin form using the grid and stackLayout as below. On both the scenarios the second column control is not starting uniformly aligned vertically.
XAML using GRID control:
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}">
<Label Text="MANAGE PROFILE" Style="{StaticResource labelTitle}"></Label>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<Grid BackgroundColor="{StaticResource whiteBackgroundColor}">
<Grid.RowDefinitions>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
<RowDefinition Height="44"></RowDefinition>
<RowDefinition Height="1"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="0" Grid.Column="0" Text="AddressLine1" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="1" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="2" Grid.Column="0" Text="AddressLine2" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="3" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="4" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="4" Grid.Column="0" Text="Suburb" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="4" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="5" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="6" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="6" Grid.Column="0" Text="State" Style="{StaticResource labelStandard}" ></Label>
<Picker Grid.Row="6" Grid.Column="1" HorizontalOptions="FillAndExpand"
Title="Select" SelectedItem="{Binding State.Value}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>NSW</x:String>
<x:String>WA</x:String>
<x:String>QLD</x:String>
<x:String>SA</x:String>
<x:String>VIC</x:String>
<x:String>TAS</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<BoxView Grid.Row="7" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
<StackLayout Grid.Row="8" Grid.ColumnSpan="2" Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Grid.Row="8" Grid.Column="0" Text="Post Code" Style="{StaticResource labelStandard}"></Label>
<Entry Grid.Row="8" Grid.Column="1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Grid.Row="9" Grid.ColumnSpan="2" Style="{StaticResource separator}"></BoxView>
</Grid>
XAML using StackLayout,
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Vertical" Style="{StaticResource layoutTitle}" BackgroundColor="#EFEFF4">
<Label Text="MANAGE PROFILE" Style="{StaticResource labelTitle}"></Label>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="AddressLine1" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="AddressLine1" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine1.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine1.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine1.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="AddressLine2" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="AddressLine2" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding AddressLine2.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding AddressLine2.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding AddressLine2.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="Suburb" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="Suburb" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding Suburb.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding Suburb.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding Suburb.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label x:Name="State" Text="State" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Picker x:Name="pickerState" HorizontalOptions="FillAndExpand"
Title="Select" SelectedItem="{Binding State.Value}">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>NSW</x:String>
<x:String>WA</x:String>
<x:String>QLD</x:String>
<x:String>SA</x:String>
<x:String>VIC</x:String>
<x:String>TAS</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
<StackLayout Orientation="Horizontal" BackgroundColor="{StaticResource whiteBackgroundColor}" Style="{StaticResource layoutSpacingFormEntry}">
<Label Text="Post Code" Style="{StaticResource labelStandard}" WidthRequest="100"></Label>
<Entry x:Name="PostCode" HorizontalOptions="FillAndExpand" Placeholder="required" Text="{Binding PostCode.Value}">
<Entry.Effects>
<effects:EntryNoBorderEffect />
</Entry.Effects>
<Entry.Behaviors>
<behaviors:EventToCommandBehavior EventName="TextChanged" Command="{Binding PostCode.TriggerValidationCommand}" />
</Entry.Behaviors>
<Entry.Triggers>
<DataTrigger TargetType="Entry" Binding="{Binding PostCode.IsValid}" Value="False">
<Setter Property="behaviors:EntryErrorColorBehavior.LineColor" Value="{StaticResource ErrorColor}" />
</DataTrigger>
</Entry.Triggers>
</Entry>
</StackLayout>
<BoxView Style="{StaticResource separator}"></BoxView>
On both the scenarios the second column is starting based on the text value. Even if I add HorizontalOptions="StartAndExpand", I'm not able to get the all the form controls vertically aligned in the second column to start with.
Getting the UI as below,
I have added both the controls as fo now in XAML. The top section of form is using GRID control. The below repeated section is using the StackLayout control
Please let me know what am I doing wrong here
you have set the column width as "". if you want to vertically align your controls you need to set the column with size like "50" , "50*" or "60*" ,"40*" . it will set the width in %.