如何更改弹出菜单中所选项目的颜色？

Question

我设置了背景颜色和文本颜色以及其他一些颜色属性，例如禁用和未选择的颜色，但似乎都没有更改所选项目的背景颜色。

如果我必须更改以下属性才能使其看起来像我想要的那样？或者我需要在我的代码中添加什么？

我有以下内容：

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       Title="Example"
       x:Class="TrackBus.AppShell"
       FlyoutHeaderBehavior="CollapseOnScroll"
       FlyoutBackgroundColor="{StaticResource Primary}">

    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <!--Foreground is the menu icon color-->
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="Magenta" />
                <Setter Property="Shell.UnselectedColor" Value="Cyan" />
            </Style>
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />

 <Style Class="FlyoutItemLabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="Cyan"></Setter>
            </Style>
            <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor" Value="Magenta"></Setter>
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Secondary}" />
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue"/>
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource SecondaryLight}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource SecondaryLight}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Shell.Resources>


<Shell.ItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="60,Auto">
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="35" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       VerticalTextAlignment="Center"
                       FontSize="Title"
                       TextColor="{StaticResource SecondaryLight}" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>

    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="60,Auto">
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="35" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       VerticalTextAlignment="Center"
                       FontSize="Title"
                       TextColor="{StaticResource SecondaryLight}"/>
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>

Primary 为深蓝色， SecondaryLight 为黄色

目前我有这个：

我希望它看起来像这样：

Answer 1

我们需要覆盖

FlyoutItemLayoutStyle

、

MenuItemLayoutStyle 

并修改

CommonStates

和

Selected

中的值。

<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Orange" />
                        <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

<!--
Custom Style you can apply to any Flyout Item
-->
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Transparent" />
                        <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Orange" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Orange" />
                        <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Answer 2

对我有用的是制作一个自定义的

FlyoutItemStyle

模板，就像您在 ResourceDictionary 中所做的那样，如下所示：

<Style x:Key="FlyoutItemStyle" 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="Orange"/>
                        <Setter TargetName="_label" Property="Label.TextColor" Value="Black" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

然后，使用该模板，我更改了弹出项目的外观，类似于我们在官方文档中找到的：

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid Style="{StaticResource FlyoutItemStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="80" />
                <ColumnDefinition Width="150" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding FlyoutIcon}"
                Margin="10"
                HeightRequest="50"
                HorizontalOptions="EndAndExpand" />
            <Label Grid.Column="1"
                Text="{Binding Title}"
                TextColor="{StaticResource LightTextColor}"
                FontSize="Body"
                VerticalTextAlignment="Center"
                HorizontalTextAlignment="Start"
                x:Name="_label">
            </Label>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

但最关键的部分是使用

x:Name="_label"

 属性为 Label 指定名称，以便能够通过选定的目标项找到它 (

TargetName="_label"

)。

最后我刚刚添加了我的菜单项（即使在我的情况下有一些

FontAwesome 图标）：

<FlyoutItem Title="MyMenuItem">
    <FlyoutItem.Icon>
        <FontImageSource 
            FontFamily="{StaticResource FontAwesomeSolid}" 
            Size="Large"
            Glyph="{x:Static fontawesome:FontAwesomeIcons.User}"
            Color="{StaticResource LightTextColor}">
        </FontImageSource>
    </FlyoutItem.Icon>
    <ShellContent ContentTemplate="{DataTemplate local:Index}" />
</FlyoutItem>

希望这个答案可以帮助任何尝试自定义菜单每个部分（包括标签颜色）的人。