Xamarin Form 4 Shell - xamarin.forms

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>

Related

How do you change the color of TAB icons in the flyout menu of Xamarin Forms Shell when using tabs?

I'm using Xamarin Forms Shell. How can you change the color of icons in the flyout menu when using tabs?
For example I'm using a png of a black icon as my tab icon.
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Icon="pie_chart.png"
Title="Daily Target">
<ShellContent Route="TargetDataPage" ContentTemplate="{DataTemplate targetDataPageView:TargetDataPageView}" />
</Tab>
...
</FlyoutItem>
Setting the Shell TabBarTitleColor value changes the color of the black png to white in the tabs. (Which is good)
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
...
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
Is there a setter to set the color of the icon in the flyout menu? I need to set this because black is no good in dark mode, but I can't swap the icon for a white png icon because it's then the wrong color in light mode.
If there isn't a specific setter for flyout menu icon color, how else can I set the color? Bearing in mind the icon is set in the tab.
1.Create a custom flyout with an additional IconGlyphProperty in folder Controls
namespace Xaminals.Controls
{
public class FlyoutItemIconFont: FlyoutItem
{
public static readonly BindableProperty IconGlyphProperty = BindableProperty.Create(nameof(IconGlyphProperty), typeof(string), typeof(FlyoutItemIconFont), string.Empty);
public string IconGlyph
{
get { return (string)GetValue(IconGlyphProperty); }
set { SetValue(IconGlyphProperty, value); }
}
}
}
2.Create a FlyoutItemTemplate with two Lables and VisualStateManager:
<Shell.ItemTemplate>
<DataTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label x:Name="FlyoutItemIcon"
FontFamily="MaterialDesignFont"
Text="{Binding IconGlyph}"
TextColor="{Binding Source={x:Reference FlyoutItemLabel} ,Path=TextColor}"
FontSize="30"
Margin="5"/>
<Label x:Name="FlyoutItemLabel"
Grid.Column="1"
Text="{Binding Title}"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
3.Replace the original FlyoutItem in AppShell.xaml with the custom FlyoutItem
<controls:FlyoutItemIconFont Title="About" IconGlyph="{StaticResource IconInfo}">
<ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</controls:FlyoutItemIconFont>
<controls:FlyoutItemIconFont Title="Browse" IconGlyph="{StaticResource IconListBulleted}">
<ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
</controls:FlyoutItemIconFont>
4.And add the BaseStyle to the customFlyouItem
<!--other style-->
<x:String x:Key="IconInfo">󰋽</x:String>
<x:String x:Key="IconListBulleted">󰉹</x:String>
<Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
Result
Refer to this - Xamarin Forms: How Can I Change the FlyoutItem.Icon's Color When It Is Selected/Deselected?
Followed the case i done before with the Material Design Icons.
Xamarin Forms: How Can I Change the FlyoutItem.Icon's Color When It Is Selected/Deselected?
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="fgColor">#66169C</Color>
<Color x:Key="bgColor">#FFFFFF</Color>
<Color x:Key="OverDueItem">#FF1C07</Color>
<OnPlatform x:Key="Material" x:TypeArguments="x:String">
<On Platform="iOS" Value="Material Design Icons" />
<On Platform="Android" Value="materialdesignicons-webfont.ttf#Material Design Icons" />
</OnPlatform>
<Style x:Key="MaterialIcons" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="{DynamicResource Material}" />
<Setter Property="FontSize" Value="100" />
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="{DynamicResource fgColor}" />
<Setter Property="FontSize" Value="Large" />
</Style>
<Style x:Key="FloutItemStyle" TargetType="Grid">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Accent" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
When you use the tab inside FlyoutItem, you could set the Material Design Icons using FontImageSource.
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" >
<Tab Title="Page1" >
<Tab.FlyoutIcon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="">
</FontImageSource>
</Tab.FlyoutIcon>
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="" >
</FontImageSource>
</Tab.Icon>
<ShellContent Route="Page1" ContentTemplate="{DataTemplate local:Page1}" />
</Tab>
<Tab Title="Page2">
<Tab.FlyoutIcon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="">
</FontImageSource>
</Tab.FlyoutIcon>
<Tab.Icon>
<FontImageSource FontFamily="{StaticResource Material}" Color="{DynamicResource fgColor}" Glyph="" >
</FontImageSource>
</Tab.Icon>
<ShellContent Route="Page2" ContentTemplate="{DataTemplate local:Page2}"/>
</Tab>
</FlyoutItem>
Change the ItemTemplate of the FlyoutItem. Use the Label to set the Material Design Icons instead of Image. You could change the color when you select via Triggers to change the TextColor.
<Shell.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" Style="{StaticResource FloutItemStyle}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.8*" />
</Grid.ColumnDefinitions>
<Label Style="{StaticResource MaterialIcons}" Text="{Binding FlyoutIcon.Glyph}"
Margin="5"
HeightRequest="45">
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label" Value="Accent">
<Setter Property="TextColor" Value="White" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label Grid.Column="1"
Text="{Binding Title}"
FontAttributes="Italic"
VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>

Using AppShell the ContentPage 's footer is not white, why?

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"

Xamarin.Forms: how to apply a style on a Expander containing an Indicator

I would like to re use some Expanders in a Xamarin.Forms app.
The Expander uses Image as FontImageSource to display chevrons as Indicator, and the DataTrigger on the Image allows to switch between up/down chevron:
<Expander>
<Expander.Header>
<Grid>
<Label Text="Who we are?"
Style="{StaticResource AboutPageCategoryLabelStyle}" />
<Image
HeightRequest="20"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="20">
<Image.Source>
<FontImageSource
FontFamily="FontAwesomeLight"
Glyph="{StaticResource FalIconChevronDown}"
Size="20"
Color="Gray" />
</Image.Source>
<Image.Triggers>
<DataTrigger
Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
TargetType="Image"
Value="True">
<Setter Property="Source">
<Setter.Value>
<FontImageSource
FontFamily="FontAwesomeLight"
Glyph="{StaticResource FalIconChevronUp}"
Size="20"
Color="Gray" />
</Setter.Value>
</Setter>
</DataTrigger>
</Image.Triggers>
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
...
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
I've tried to create a Style to duplicate easily the same Expander, but it doesn't work:
I can define the style of the Image for the "default" indicator mode:
<Style x:Key="ChevronImageForExpander" TargetType="Image">
<Setter Property="BackgroundColor">Transparent</Setter>
<Setter Property="HorizontalOptions">End</Setter>
<Setter Property="VerticalOptions">Center</Setter>
<Setter Property="HeightRequest">20</Setter>
<Setter Property="WidthRequest">20</Setter>
<Setter Property="Source">
<Setter.Value>
<FontImageSource Glyph="{StaticResource FalIconChevronDown}"
FontFamily="FontAwesomeLight"
Size="20"
Color="{StaticResource Gray-600}"/>
</Setter.Value>
</Setter>
</Style>
Then in my View I apply this style:
<Expander>
<Expander.Header>
<Grid>
<Label Text="Header" />
<Image Style="{StaticResource ChevronImageForExpander}">
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Grid>
<Label Text="Cotnent" />
</Grid>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
This works fine, but I only have the "default" indicator image.
I've tried to define the style through a Trigger for the "expanded" indicator mode:
<Style x:Key="ChevronImageForExpanderTrigger" TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
TargetType="Image"
Value="True">
<Setter Property="Source">
<Setter.Value>
<FontImageSource
FontFamily="FontAwesomeLight"
Glyph="{StaticResource FalIconChevronUp}"
Size="20"
Color="{StaticResource Gray-600}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
This also works fine, but I only have the "expanded" indicator image.
So I've tried to "merge" the 2 styles like this:
<Style x:Key="ChevronImageForExpander" TargetType="Image">
<Setter Property="BackgroundColor">Transparent</Setter>
<Setter Property="HorizontalOptions">End</Setter>
<Setter Property="VerticalOptions">Center</Setter>
<Setter Property="HeightRequest">20</Setter>
<Setter Property="WidthRequest">20</Setter>
<Setter Property="Source">
<Setter.Value>
<FontImageSource Glyph="{StaticResource FalIconChevronDown}"
FontFamily="FontAwesomeLight"
Size="20"
Color="{StaticResource Gray-600}"/>
</Setter.Value>
</Setter>
<Setter Property="Triggers">
<Setter.Value>
<DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
TargetType="Image"
Value="True">
<Setter Property="Source">
<Setter.Value>
<FontImageSource
FontFamily="FontAwesomeLight"
Glyph="{StaticResource FalIconChevronUp}"
Size="20"
Color="{StaticResource Gray-600}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Setter.Value>
</Setter>
</Style>
But this doesn't work and I get an Exception: "System.InvalidOperationException: The BindableProperty "Triggers" is readonly.".
I could also create a control, but I would like to use different kinds of content for the Expander.ContentTemplate: labels, images, ...
How should be the better approach to easily reuse this Expander?
Edit: add some code for the Style
Finally it was just a problem of Trigger declaration in the "global" style: we must use <Style.Triggers> instead of <Setter Property="Triggers">
So, like this it works well:
<Style x:Key="ChevronImageForExpander" TargetType="Image">
<Setter Property="BackgroundColor">Transparent</Setter>
<Setter Property="HorizontalOptions">End</Setter>
<Setter Property="VerticalOptions">Center</Setter>
<Setter Property="HeightRequest">20</Setter>
<Setter Property="WidthRequest">20</Setter>
<Setter Property="Source">
<Setter.Value>
<FontImageSource Glyph="{StaticResource FalIconChevronDown}"
FontFamily="FontAwesomeLight"
Size="20"
Color="{StaticResource Gray-600}"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
TargetType="Image"
Value="True">
<Setter Property="Source">
<Setter.Value>
<FontImageSource
FontFamily="FontAwesomeLight"
Glyph="{StaticResource FalIconChevronUp}"
Size="20"
Color="{StaticResource Gray-600}" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
And in the XAML:
<Expander>
<Expander.Header>
<Grid>
<Label Text="Header" />
<Image Style="{StaticResource ChevronImageForExpander}">
</Image>
</Grid>
</Expander.Header>
<Expander.ContentTemplate>
<DataTemplate>
<Grid>
<Label Text="Content" />
</Grid>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
Maybe is there another approach to apply ContentTemplate to the Header (both to the Label and to the Image), but at least, it's correct like this.

Global Styles not working in iOS

I posted this in the Xamarin Forums but there have been no replies.
I have the following global styles defined in app.xaml and applied on a content page (see attached). This works as expected in Android and UWP, but doesn't work in iOS. In Android and UWP the background is dark grey with a padding of 20. In iOS the background is white with no padding. None of the styles work at all in iOS, but the colors defined at the top do work in all platforms.
app.xaml
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Rhyme4RhymeApp.App">
<Application.Resources>
<ResourceDictionary>
<Color x:Key="backgroundColor">#3F3F3F</Color>
<Color x:Key="navBackgroundColor">#232323</Color>
<Color x:Key="textColor">#ffffff</Color>
<Color x:Key="textColorAccent">#191919</Color>
<Color x:Key="imageBackgroundColor">#191919</Color>
<Color x:Key="DarkGrey">#191919</Color>
<Color x:Key="Grey">#3F3F3F</Color>
<Color x:Key="LightGrey">#6a6a6a</Color>
<Color x:Key="White">#ffffff</Color>
<Color x:Key="Orange">#f77e4f</Color>
<Style x:Key="pageStyle" TargetType="Page" ApplyToDerivedTypes="True">
<Setter Property="BackgroundColor" Value="#3F3F3F" />
<Setter Property="Padding" Value="20" />
</Style>
<Style x:Key="NavStyle" TargetType="Page">
<Setter Property="BackgroundColor" Value="#383838" />
<Setter Property="Padding" Value="20" />
</Style>
<Style x:Key="semiTransparentColor" TargetType="Layout">
<Setter Property="BackgroundColor" Value="#000000" />
<Setter Property="Opacity" Value=".9"/>
</Style>
<Style x:Key="masterDetailMenuStyle" TargetType="Page">
<Setter Property="BackgroundColor" Value="#3F3F3F" />
</Style>
<Style x:Key="buttonStyle" TargetType="Button" ApplyToDerivedTypes="True">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="BorderColor" Value="#191919" />
<Setter Property="BorderRadius" Value="0" />
<Setter Property="BorderWidth" Value="1" />
<Setter Property="TextColor" Value="#191919" />
<Setter Property="BackgroundColor" Value="#ffffff" />
</Style>
<Style x:Key="linkStyle" TargetType="Label">
<Setter Property="TextColor" Value="#f77e4f" />
</Style>
<Style x:Key="Header1LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="28" />
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="Header2LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="24" />
</Style>
<Style x:Key="Header3LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="Header4LabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="20" />
</Style>
<Style x:Key="quoteLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="28" />
<Setter Property="FontAttributes" Value="Italic"/>
</Style>
<Style x:Key="albumLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="23" />
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="artistLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="18" />
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="standardLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="#ffffff" />
<Setter Property="FontSize" Value="14" />
</Style>
<Style x:Key="imageBackground" TargetType="Image">
<Setter Property="BackgroundColor" Value="#afafaf" />
</Style>
<Style x:Key="artistListItem" TargetType="TextCell">
<Setter Property="TextColor" Value="#ffffff"/>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Content Page
<?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="Rhyme4RhymeApp.NewQuotesPage" Style="{DynamicResource pageStyle}">
<ContentPage.Content>
<StackLayout x:Name="mainStack">
<ActivityIndicator x:Name="loader" Color="{DynamicResource White}" IsEnabled="True" IsVisible="True" IsRunning="True" />
<Label x:Name="lblAddedHeader" FontSize="Large" FontAttributes="Bold" TextColor="{DynamicResource White}" />
<Label x:Name="lblNoResults" Text="" FontSize="Default" FontAttributes="Bold" TextColor="{DynamicResource White}" IsVisible="False" />
<ListView x:Name="QuotesListView" AutomationId="WhatsNewLVQuotes" HorizontalOptions="FillAndExpand" CachingStrategy="RecycleElement" BackgroundColor="{DynamicResource Grey}"></ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Replace your XAML code with this please:
<?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="Rhyme4RhymeApp.NewQuotesPage" Style="{StaticResource pageStyle}">
<ContentPage.Content>
<StackLayout x:Name="mainStack">
<ActivityIndicator x:Name="loader" Color="{StaticResource textColor}" IsEnabled="True" IsVisible="True" IsRunning="True" />
<Label x:Name="lblAddedHeader" FontSize="Large" FontAttributes="Bold" TextColor="{StaticResource textColor}" />
<Label x:Name="lblNoResults" Text="" FontSize="Default" FontAttributes="Bold" TextColor="{StaticResource textColor}" IsVisible="False" />
<ListView x:Name="QuotesListView" AutomationId="WhatsNewLVQuotes" HorizontalOptions="FillAndExpand" CachingStrategy="RecycleElement" BackgroundColor="{StaticResource backgroundColor}"></ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Xamarin Forms build error - StaticResource not found for key

I'm just learning XAML and Xamrin. I'm trying to learn how static styles work. Here's 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"
xmlns:local="clr-namespace:Styles"
x:Class="Styles.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="Red"/>
<Setter Property="FontSize" Value="Small"/>
</Style>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="Blue"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style x:key="baseStyle" TargetType="View">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
</Style>
<Style x:key="entryStyle" TargetType="Entry" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="Green"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="20">
<Label Text="This is label 1 using implicit style"/>
<Label Text="This is label 2"/>
<Button
Text="Not using the button style"
BorderWidth="2"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="200"/>
<Button Style="{StaticResource buttonStyle}"
Text="Using explicit style"
BorderWidth="2"
WidthRequest="200"/>
<Entry Style="{StaticResource entryStyle}" Placeholder="This enty uses an inherited style"/>
<Button Style="{StaticResource buttonStyle}"
Text="Using explicit style"
BorderWidth="2"
WidthRequest="200"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Compile works fine, but when running, I get this exception:
[ERROR] FATAL UNHANDLED EXCEPTION: Xamarin.Forms.Xaml.XamlParseException: Position 25:58. StaticResource not found for key baseStyle
I don't understand why I get this error since the style 'key' is already defined on the previous line. Any help is greatly appreciated.
The x:Key attribute must have the first letter in uppercase.
<?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:Styles"
x:Class="Styles.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="Red"/>
<Setter Property="FontSize" Value="Small"/>
</Style>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
<Setter Property="TextColor" Value="Blue"/>
<Setter Property="FontSize" Value="20"/>
</Style>
<Style x:Key="baseStyle" TargetType="View">
<Setter Property="HorizontalOptions" Value="Center"/>
<Setter Property="VerticalOptions" Value="Center" />
</Style>
<Style x:Key="entryStyle" TargetType="Entry" BasedOn="{StaticResource baseStyle}">
<Setter Property="TextColor" Value="Green"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout Padding="20">
<Label Text="This is label 1 using implicit style"/>
<Label Text="This is label 2"/>
<Button
Text="Not using the button style"
BorderWidth="2"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="200"/>
<Button Style="{StaticResource buttonStyle}"
Text="Using explicit style"
BorderWidth="2"
WidthRequest="200"/>
<Entry Style="{StaticResource entryStyle}" Placeholder="This enty uses an inherited style"/>
<Button Style="{StaticResource buttonStyle}"
Text="Using explicit style"
BorderWidth="2"
WidthRequest="200"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>

Resources