Using AppShell the ContentPage 's footer is not white, why? - xamarin.forms

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"

Related

Xamarin Forms FlyoutMenu Text Colour

I am currently going through the style aspects of a Xamarin Forms Shell Application, I am currently not able to find how to change the FlyoutMenu TextColor.
I have tried adding a style for Label TextColor with the BasedOn being the Base Style I am using, but the text colour still does not change, or it changes all label's TextColor.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MainShellPage"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
NavigationPage.HasBackButton="False"
FlyoutBackgroundColor="{StaticResource Grey}"
BackgroundColor="{StaticResource Grey}"
IsBusy="{Binding IsBusy}"
BindingContext="{Binding MainShell, Source={StaticResource ViewModelLocator}}"
Navigated="MainShellPage_OnNavigated">
<Shell.Resources>
<Style x:Key="BaseStyle"
TargetType="Element">
<Setter Property="Shell.BackgroundColor"
Value="{StaticResource Grey}" />
<Setter Property="Shell.ForegroundColor"
Value="{StaticResource White}" />
<Setter Property="Shell.TitleColor"
Value="{StaticResource White}" />
<Setter Property="Shell.DisabledColor"
Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor"
Value="#95FFFFFF" />
</Style>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="{StaticResource Grey}" HeightRequest="180"
Orientation="Vertical">
<Image Source="mobile_logo" HorizontalOptions="Center" VerticalOptions="Start"
WidthRequest="160"/>
<Label Text="{Binding TeamName}" TextColor="{StaticResource White}" FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding UserFullName}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding UserEmail}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding Version}" TextColor="{StaticResource White}" VerticalOptions="End"
HorizontalOptions="End" Margin="0, 10, 0, 0" FontSize="10" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="TabOne" Style="{StaticResource BaseStyle}"
Route="tabone">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent Title="TabOne" ContentTemplate="{DataTemplate pages:TabOnePage}" />
</Tab>
<Tab Title="TabTwo" Style="{StaticResource BaseStyle}"
Route="tabtwo">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabTwoGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate pages:TabTwoPage}" />
</Tab>
</FlyoutItem>
<MenuItem />
<MenuItem />
<MenuItem />
<MenuItem
Text="MenuItemOne"
Command="{Binding MenuItemOneCommand}">
<MenuItem.IconImageSource>
<FontImageSource Glyph="{Binding MenuItemOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</MenuItem.IconImageSource>
</MenuItem>
I am currently not able to find how to change the FlyoutMenu TextColor.
From this document, Shell includes three style classes, which are automatically applied to FlyoutItem and MenuItem objects. The style class names are FlyoutItemLabelStyle, FlyoutItemImageStyle, and FlyoutItemLayoutStyle.
If you want to change FlyoutMenu Text color, you can create new style and use FlyoutItemLabelStyle to change FlyoutMenu text color.
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Red" />
</Style>
From Flyout Items document, each ShellContent object can only be accessed through flyout items, and not through tabs. This is because by default, tabs will only be displayed if the flyout item contains more than one tab.
So you need to add Tab in FlyoutItem if you want o display FlyoutMenu.
<FlyoutItem Title="About" Icon="icon_about.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" Route="AboutPage" />
</Tab>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Route="ItemsPage" />
</Tab>
</FlyoutItem>
There is another way of doing it, you can set an ItemTemplate to your flyout as you did for the header, then you can set a colour for the text:
<Shell.ItemTemplate>
<DataTemplate>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<!-- Icon -->
<ColumnDefinition Width="*"/>
<!-- Title-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!-- Icon -->
<Label Grid.Column="0"
Margin="20,0,0,0"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
Text="{Binding Icon}"
FontFamily="{StaticResource FontAwesome}"
FontSize="26"
TextColor="{StaticResource White}"/>
<!-- Label -->
<Label Grid.Column="1"
Text="{Binding Title}"
FontSize="23"
VerticalOptions="Center"
VerticalTextAlignment="Center"
TextColor="[ Here you can insert the colour you want]"
HorizontalOptions="Start" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
And then, to use it:
<FlyoutItem Title="TabOne"
Icon="{Binding TabOneGlyph, Source={StaticResource
MainShellGlyphHelper}}">
<ShellContent ContentTemplate="{DataTemplate pages:TabOnePage}"/>
</FlyoutItem>
I am doing this technique in most of my project when I sure Shell.
Here's an example of a project I did: https://github.com/bricefriha/AresGaming/blob/master/AresNews/AresNews/AppShell.xaml
I hope this helped you 😉

BottomBar with customizations

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>

Xamarin Form 4 Shell

I start an new projet with the new Shell from Xamarin Form 4. I try to found a way to control the appearance when a FlyoutItem is disable. On the style with the sample, the BaseStyle control the apparence of the Shell himself (title bar tab bar, ...) But the Shell.disableColor is for the shell himself not the flyoutItem text. Any idea?
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#95FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style x:Key="FAIcon" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{StaticResource FARegular}"/>
<Setter Property="FontSize" Value="{StaticResource BigSize}"/>
<Setter Property="TextColor" Value="#FF000000"/>
</Style>
<Style x:Key="ItemText" TargetType="Label">
<Setter Property="VerticalTextAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="{StaticResource SourceSansProRegular}"/>
<Setter Property="FontSize" Value="{StaticResource BigSize}"/>
<Setter Property="TextColor" Value="#FF000000"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Margin="15,0,0,0" Text="{Binding FlyoutIcon}" Style="{StaticResource FAIcon}" />
<Label Grid.Column="1"
Text="{Binding Title}"
Style="{StaticResource ItemText}"/>
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.FlyoutHeader>
<Grid HeightRequest="180" BackgroundColor="{StaticResource DarkGreyColor}">
<Image Source="KelvinSplash1.png"
Aspect="AspectFill"
HeightRequest="180"
HorizontalOptions="FillAndExpand" />
<Label Text="Kelvin Mobile"
TextColor="White"
FontSize="32"
HorizontalOptions="Center"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center" />
</Grid>
</Shell.FlyoutHeader>
<FlyoutItem Icon=""
Title="Accueil">
<ShellContent Route="Home" ContentTemplate="{DataTemplate views:HomePage}" />
</FlyoutItem>
<FlyoutItem Icon=""
Title="Division: Solmec" IsEnabled="false">
</FlyoutItem>
<FlyoutItem Icon=""
Title="Fonctions">
</FlyoutItem>
<FlyoutItem Icon=""
Title="À Propos"
IsEnabled="False">
<ShellContent Route="About" ContentTemplate="{DataTemplate views:AboutPage}" />
</FlyoutItem>

My <ContentPage.Content> in Xamarin.Forms is not showing up?

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" />

Devexpress Tiles' content display issue

I have a user control:
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/UserInterface;component/Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<converters:WidgetWidthConverter x:Key="widgetWidthConverter" />
<converters:TileSizeConverter x:Key="tileSizeConverter" />
<converters:ListCountToVisibilityConverter x:Key="listCountToVisibilityConverter" />
<views:SubplantMainStaticControl x:Key="subplantMainStaticControl" />
<views:SubplantMainActualControl x:Key="subplantMainActualControl" />
</ResourceDictionary>
</UserControl.Resources>
<dxlc:TileLayoutControl Background="{x:Null}"
x:Name="tileControl"
Margin="10"
Padding="0"
ScrollBars="None"
LayoutUpdated="OnTileControlUpdated">
<dxlc:Tile Style="{StaticResource customizedTileStyle}"
Height="{Binding Source={StaticResource subplantMainStaticControl}, Path=ActualHeight, Converter={StaticResource tileSizeConverter}}"
Name="staticDataTile"
VerticalContentAlignment="Top">
<custom:Widget Name="staticDataWidget"
DataContext="{Binding Path=StaticViewModel}"
CanResize="False">
<custom:Widget.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Source={StaticResource DataViewResources}, Path=Resource.StaticDataText}"
Style="{StaticResource widgetHeaderTextBlock}" />
</StackPanel>
</custom:Widget.Header>
<StackPanel>
<ContentPresenter Content="{StaticResource subplantMainStaticControl}" />
</StackPanel>
</custom:Widget>
</dxlc:Tile>
<dxlc:Tile Style="{StaticResource customizedTileStyle}"
Height="{Binding Source={StaticResource subplantMainActualControl}, Path=ActualHeight, Converter={StaticResource tileSizeConverter}}"
Name="actualDataTile"
VerticalContentAlignment="Top">
<custom:Widget Name="actualDataWidget"
DataContext="{Binding Path=ActualViewModel}"
CanResize="False">
<custom:Widget.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Source={StaticResource DataViewResources}, Path=Resource.LatestDataText}"
Style="{StaticResource widgetHeaderTextBlock}" />
</StackPanel>
</custom:Widget.Header>
<StackPanel>
<ContentPresenter Content="{StaticResource subplantMainActualControl}" />
</StackPanel>
</custom:Widget>
</dxlc:Tile>
</dxlc:TileLayoutControl>
where the views:SubplantMainActualControl is :
<UserControl x:Class="UserInterface.Views.SubplantMainActualControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
dx:ThemeManager.ThemeName="Seven"
xmlns:views="clr-namespace:UserInterface.Views">
<views:LayoutLabelValueControl Grid.Row="0"
ItemsSource="{Binding Path=ActualRepresentations}" />
</UserControl>
and the widget is :
<dxlc:GroupBox x:Class="CustomControls.Widget"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns:custom="clr-namespace:CustomControls"
xmlns:converters="clr-namespace:CustomControls.Converters"
xmlns:constants="clr-namespace:Business.Constants;assembly=Business"
mc:Ignorable="d"
x:Name="baseTile"
dx:ThemeManager.ThemeName="Seven"
Margin="0,2,0,2"
IsManipulationEnabled="True"
Foreground="Black"
Padding="1"
Background="Transparent"
MinimizeElementVisibility="Visible"
Style="{DynamicResource GroupBoxStyle1}"
VisualTextHintingMode="Animated"
PreviewMouseLeftButtonDown="OnPreviewMouseLeftButtonDown">
<dxlc:GroupBox.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/CustomControls;component/Themes/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
<converters:BoolToVisibilityConverter x:Key="boolToVisibilityConverter" />
<Style x:Key="GroupBoxStyle1"
TargetType="{x:Type dxlc:GroupBox}">
<Setter Property="Background"
Value="Transparent" />
<Style.BasedOn>
<Style TargetType="{x:Type dxlc:GroupBox}">
<Setter Property="CornerRadius"
Value="3" />
<Setter Property="MinimizationDirection"
Value="Vertical" />
<Setter Property="Padding"
Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type dxlc:GroupBox}">
<dx:Container x:Name="container">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="NormalLayout" />
<VisualState x:Name="MinimizedLayout">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="TitleStretcher">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="300"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="SeparatorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0"
Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MaximizedLayout" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="widgetContet"
Template="{DynamicResource DesignerItemTemplate}">
<Border x:Name="BorderElement"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
dx:BorderExtensions.ClipChild="True"
CornerRadius="{TemplateBinding CornerRadius}"
Style="{DynamicResource contentBorderStyle}">
<Grid x:Name="layoutGrid">
<dxlc:LayoutControl ItemSpace="0"
Orientation="Vertical"
Padding="0"
ScrollBars="None">
<dxlc:LayoutGroup x:Name="groupBoxHeaderLayoutGroup"
Background="{TemplateBinding TitleBackground}"
ItemSpace="0"
Padding="2"
Visibility="{TemplateBinding TitleVisibility}">
<Rectangle x:Name="TitleStretcher"
Visibility="Collapsed"
Width="0" />
<dx:DXContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}"
Content="{TemplateBinding Header}"
IsTabStop="False"
Margin="9,0"
VerticalAlignment="Center">
<dx:DXContentPresenter.Template>
<ControlTemplate TargetType="{x:Type dx:DXContentPresenter}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
</ControlTemplate>
</dx:DXContentPresenter.Template>
</dx:DXContentPresenter>
<Button x:Name="ColumnsElement"
HorizontalAlignment="Right"
Margin="2"
VerticalAlignment="Center"
Content="{Binding Source={StaticResource DataViewResources}, Path=Resource.ColumnsText}"
Command="{Binding Path=ColumnsCommand, ElementName=baseTile, Mode=OneWay}"
Visibility="{Binding Path=ColumnsButtonVisibility, ElementName=baseTile, Mode=OneWay}"
Style="{DynamicResource HeaderButtonStyle}" />
<Button x:Name="SettingsElement"
HorizontalAlignment="Right"
Margin="2,0,0,0"
VerticalAlignment="Center"
Content="{Binding Source={StaticResource DataViewResources}, Path=Resource.SettingsText}"
Visibility="Collapsed"
Style="{DynamicResource SettingsButtonStyle}" >
<Button.ContextMenu>
<ContextMenu HasDropShadow="True">
<ContextMenu.Items>
<!--<MenuItem Header="Setting 1"
Command="{Binding Path=SettingsCommand, ElementName=baseTile, Mode=TwoWay}" />
<MenuItem Header="Setting 2"
Command="{Binding Path=SettingsCommand, ElementName=baseTile, Mode=TwoWay}" />-->
</ContextMenu.Items>
</ContextMenu>
</Button.ContextMenu>
</Button>
<dxlc:GroupBoxButton x:Name="MinimizeElement"
HorizontalAlignment="Right"
Kind="Maximize"
Margin="2,0,0,0"
Visibility="{TemplateBinding MinimizeElementVisibility}"
VerticalAlignment="Center">
</dxlc:GroupBoxButton>
<dxlc:GroupBoxButton x:Name="MaximizeElement"
HorizontalAlignment="Right"
Kind="Minimize"
Margin="2,0,0,0"
Visibility="{TemplateBinding MaximizeElementVisibility}"
VerticalAlignment="Center">
</dxlc:GroupBoxButton>
</dxlc:LayoutGroup>
<Rectangle x:Name="SeparatorElement"
Fill="{TemplateBinding SeparatorBrush}"
Height="1"
Visibility="{TemplateBinding TitleVisibility}" />
<!--HorizontalScrollBarVisibility="Auto"-->
<dx:DXContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding CurrentContentTemplate}"
Content="{TemplateBinding Content}"
IsTabStop="False"
Margin="{TemplateBinding Padding}"
MaxHeight="{TemplateBinding MaxHeight}"
MinHeight="{TemplateBinding MinHeight}">
<dx:DXContentPresenter.Template>
<ControlTemplate TargetType="{x:Type dx:DXContentPresenter}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"/>
</ControlTemplate>
</dx:DXContentPresenter.Template>
</dx:DXContentPresenter>
</dxlc:LayoutControl>
<custom:BusySpinner Visibility="{Binding Path=DataLoading, Converter={StaticResource boolToVisibilityConverter}}"
Style="{StaticResource busySpinnerStyle}" />
</Grid>
</Border>
</ContentControl>
<Control Template="{DynamicResource ResizeDecoratorTemplate}"
DataContext="{Binding ElementName=baseTile}" />
</dx:Container>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.BasedOn>
</Style>
<!-- Designer Item Template-->
<ControlTemplate x:Key="DesignerItemTemplate"
TargetType="ContentControl">
<Grid x:Name="contextGrid"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<ContentPresenter Content="{TemplateBinding ContentControl.Content}" />
</Grid>
</ControlTemplate>
<!-- ResizeDecorator Template -->
<ControlTemplate x:Key="ResizeDecoratorTemplate"
TargetType="{x:Type Control}">
<Grid>
<custom:ResizeThumb x:Name="resizeThumbBottom"
Height="1"
Cursor="SizeNS"
Margin="3 0 3 -1"
VerticalAlignment="Bottom"
HorizontalAlignment="Stretch"
Visibility="{Binding Path=CanResize, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource boolToVisibilityConverter}}">
</custom:ResizeThumb>
</Grid>
</ControlTemplate>
</ResourceDictionary>
</dxlc:GroupBox.Resources>
</dxlc:GroupBox>
Now, sometimes the tile called "actualDataTile" is displayed containing only the header of the widget (a.k.a group box) as if the height of the widget is 0. If i reload the control, the tile's content is displayed correctly.
Can you tell me anything that can lead me in the right direction?

Resources