Xaml Xamarin表单：如何更改弹出项。图标'；选择/取消选择时的颜色？
我正在使用材质设计字体图标作为我的项目图标源。问题是，由于它是一种字体，所以选择时需要与取消选择时不同的颜色（如图所示，取消选择的白色字体有白色图标，这并不可怕） 如何修改Xaml Xamarin表单：如何更改弹出项。图标'；选择/取消选择时的颜色？,xaml,xamarin,xamarin.forms,app.xaml,app-shell,Xaml,Xamarin,Xamarin.forms,App.xaml,App Shell,我正在使用材质设计字体图标作为我的项目图标源。问题是，由于它是一种字体，所以选择时需要与取消选择时不同的颜色（如图所示，取消选择的白色字体有白色图标，这并不可怕） 如何修改样式以更改图标的颜色，就像更改文本和背景颜色一样 编辑1： 大家一致认为使用VSM是行不通的，因为它不是从VisualElement派生的。我已经使用触发器让它工作了——但我对实现不满意。这项工作： 。。。但正如您所看到的，我必须设置整个FontImageSource值-该值具有Glyph属性-因此我必须每次为每个弹
样式
VisualElement触发器让它工作了
FontImageSourceGlyph弹出项重复此样式
如何重写此样式
使其可重复使用，并且仅更改颜色，而不更改其他属性？创建材质设计图标
<Application.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>
</ResourceDictionary>
</Application.Resources>
截图：
更新：
更改：
<Setter Property="TextColor" Value="White" />
致：
shell itemtemplate的全局触发器
<Label.Triggers>
<DataTrigger
Binding="{Binding Source={x:Reference grid}, Path=BackgroundColor}"
TargetType="Label"
Value="Accent">
<!--<Setter Property="TextColor" Value="White" />-->
<Setter Property="BackgroundColor" Value="Yellow" />
</DataTrigger>
</Label.Triggers>
截图：
我也有同样的问题，解决方法如下
使用附加的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的弹出项模板
<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>
将AppShell.xaml中的原始弹出项替换为自定义弹出项
<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">󰋽</x:String>
<x:String x:Key="IconListBulleted">󰉹</x:String>
...
<Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
</ResourceDictionary>
</Shell.Resources>
；
；
...
结果如下
可能不受支持。“图标”是的属性。基于“所有派生自VisualElement的类都支持此可视状态组”，其中不包括弹出项。是的，我同意。感谢您的链接。材质设计字体图标
可以使用触发器
执行您想要的操作。稍后我会提供代码示例。您的思路是正确的，但我需要它来处理弹出项.Icon
背景色FlyoutItem
不像标签一样继承自VisualElement
——因此不能使用VSM——必须使用触发器。我不知道如何只改变背景颜色。我已经更新了回复。如果您只想更改背景色，请在触发器中更改背景色的代码。我将颜色更改为黄色供您参考。请查看我问题的最新编辑。@ScottBaker我已检查您的编辑。但是对于背景色，触发器在datatemplate中只使用一次。无需每次为每个弹出型按钮项目重复此样式。
<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>
<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>
<Shell.Resources>
<ResourceDictionary>
<x:String x:Key="IconInfo">󰋽</x:String>
<x:String x:Key="IconListBulleted">󰉹</x:String>
...
<Style TargetType="controls:FlyoutItemIconFont" BasedOn="{StaticResource BaseStyle}"/>
</ResourceDictionary>
</Shell.Resources>