xaml - Xamarin Forms : How Can I Change the FlyoutItem. 选择/取消选择时图标的颜色？

Question

我使用 Material Design 字体图标作为我项目的图标源。问题是，因为它是一种字体，所以在选择时和取消选择时需要不同的颜色(如图所示 - 取消选择的白色图标有白色图标，这不是很好)。

如何修改 Style 以像更改文本和背景颜色一样更改图标的颜色？

<!-- redacted because it would've never worked -->

编辑 1:

共识是使用 VSM 是行不通的，因为它不是从 VisualElement 派生的。我已经使用 Trigger 让它工作 - 但我对实现不满意。这有效:

<Shell.Resources>
<ResourceDictionary>
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}">
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem" Property="IsChecked" Value="True">
            <Setter Property="Title" Value="Checked" />
            <Setter Property="FlyoutIcon" >
                <Setter.Value>
                    <FontImageSource FontFamily="MaterialDesignIconFont"
                                        Glyph="{StaticResource InformationOutlineGlyph}"
                                        Color="White" />
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

</ResourceDictionary>
</Shell.Resources>

    
<FlyoutItem Title="About" >
    <FlyoutItem.Icon>
        <FontImageSource FontFamily="MaterialDesignIconFont"
                            Glyph="{StaticResource InformationOutlineGlyph}"
                            Color="Green" />
    </FlyoutItem.Icon>

    <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>

...但是如您所见，我必须设置整个 FontImageSource 值 - 它具有 Glyph 属性 - 所以我必须重复这个 每次为每个 FlyoutItem 设置样式。

我如何重写这个Style使其可以重用并且只改变颜色，而不改变其他属性？

Answer 1

我遇到了同样的问题，解决方法如下

使用额外的 IconGlyphProperty 创建自定义浮出控件

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); }
    }
}

创建一个带有两个标签和 VisualStateManager 的 FlyoutItemTemplate

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

用自定义 FlyoutItem 替换 AppShell.xaml 中的原始 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>

将 BaseStyle 添加到 customFlyouItem

<Shell.Resources>
    <ResourceDictionary>
        <x:String x:Key="IconInfo">&#xF02FD;</x:String>
        <x:String x:Key="IconListBulleted">&#xF0279;</x:String>
        ...
        <Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
    </ResourceDictionary>
</Shell.Resources>

这是结果