ShellのFlyoutのメニューの見た目を変更する.

FlyoutItemの各アイテムの背景色,フォントカラーなどを変更したい場合は以下のような定義をShell.Resources内に定義する.

        <Style
            ApplyToDerivedTypes="True"
            Class="FlyoutItemLayoutStyle"
            TargetType="Layout">
            <Setter Property="HeightRequest" Value="44" />
            <Setter TargetName="FlyoutItemLabel" Property="Label.FontSize" Value="16" />
            <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
            <Setter TargetName="FlyoutItemLabel" Property="Label.HeightRequest" Value="44" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#FF3300" />
                                <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>

ShellのFlyoutItemには以下の記事にあるようにText部分,Icon部分,それらを包むContainerがあり,それぞれにStyleClassが予め決められている.

devblogs.microsoft.com

Flyout Item Part	Style Class Name	Element Name
Text	FlyoutItemLabelStyle	FlyoutItemLabel
Icon	FlyoutItemIconStyle	FlyoutItemIcon
Container	FlyoutItemLayoutStyle

このため,FlyoutItemの文字色や背景色,Iconの色などを変更したい場合は,上記のサンプルコードのようにこれらの情報を使って指定すること.

テキストに対してスタイルを変更する場合は,以下のようにする.

<Setter TargetName="FlyoutItemLabel" Property="Label.FontSize" Value="16" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
<Setter TargetName="FlyoutItemLabel" Property="Label.HeightRequest" Value="44" />

ResourceDictionaryを別ファイルに定義して読み込む

↓でも行っているように,GlobalStyles.xamlというファイルにResourceDictionaryを定義しておいて,それをApp.xamlのResourceDictionaryでSourceプロパティで読み込んでいる.

github.com

    <Application.Resources>
        <ResourceDictionary Source="common/GlobalStyles.xaml">
...```