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

Question

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

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

我有以下内容：

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

主要是深蓝色和 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

对我有用的是制作自定义 FloutItemStyle 模板，就像您在 ResourceDictionary 中所做的那样：

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

然后，使用该模板，我更改了弹出项目的外观，类似于我们可以找到的外观 in the official documentation:

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid Style="{StaticResource FloutItemStyle}">
            <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>

但最关键的是给Label取一个名字，x:Name="_label" 属性才能用选中的目标item(TargetName="_label")找到它。

最后我刚刚添加了我的菜单项（即使在我的例子中有一些 FontAwesome icons）：

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

希望这个答案能帮助任何试图自定义菜单每个部分的人，包括标签颜色。

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

How to change the color of the selected item in flyout menu?

xaml

flyout

xamarin.forms

xamarin.forms.shell