Uwp 如何使用模板中的VisualState更改ToggleButton的字体图标？

我的XAML页面中有一个切换按钮：

<ToggleButton Content="&#xE762;" IsChecked="True" FontFamily="Segoe MDL2 Assets" />

但我想在被选中时更改其图标。所以我在XAML中创建了一个ToggleButton并为它设置了一个模板

<ControlTemplate x:Key="ToggleButtonTemplate2" TargetType="ToggleButton">
   
</ControlTemplate>
...
<ToggleButton Template="{StaticResource ToggleButtonTemplate2}" IsChecked="True" FontFamily="Segoe MDL2 Assets" />

...

---

如何使用字体代码设置其图标取决于状态（如

Content=“；”

）？

因此您希望根据切换按钮的

IsChecked

属性更改内容，对吗？如果是这样，则不需要设置模板，可以使用简单的数据绑定来实现

首先，您需要为数据绑定创建一个值转换器，它可以将bool值转换为Segoe MDL2资产图标

像这样：

 public class DateFormatter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool ischecked = (bool)value;

        string content =null;

        if (ischecked)
        {
            //the button is checked
            content = "\xE762";
        }
        else 
        {
            //the button is unchecked
            content = "\xE759";
        }

        return content;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

 <Page.Resources>
    
    <local:DateFormatter x:Key="MyValueConverter"/>
    
</Page.Resources>

<Grid>
    <ToggleButton x:Name="MyToggleButton"  Content="{Binding ElementName=MyToggleButton, Path=IsChecked, Mode=OneWay, Converter={StaticResource MyValueConverter}}" IsChecked="True" FontFamily="Segoe MDL2 Assets" />
</Grid>

之后，需要在xaml代码中设置绑定

像这样：

 public class DateFormatter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool ischecked = (bool)value;

        string content =null;

        if (ischecked)
        {
            //the button is checked
            content = "\xE762";
        }
        else 
        {
            //the button is unchecked
            content = "\xE759";
        }

        return content;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

 <Page.Resources>
    
    <local:DateFormatter x:Key="MyValueConverter"/>
    
</Page.Resources>

<Grid>
    <ToggleButton x:Name="MyToggleButton"  Content="{Binding ElementName=MyToggleButton, Path=IsChecked, Mode=OneWay, Converter={StaticResource MyValueConverter}}" IsChecked="True" FontFamily="Segoe MDL2 Assets" />
</Grid>

---

正如您所看到的，我在这些状态中添加了内容更改，现在，您可以在选中ToggleButton时看到您希望在ToggleButton中显示的图标。

这意味着我们不能在VisualState的XAML中直接设置字符代码？使用Setter，然后使用Value=“；”或类似内容设置内容属性。我试过了，发现了一个错误given@quangkid嗯，我建议使用数据绑定的原因是，以后更容易更改图标值。如果您需要使用VisualState，也可以这样做。请检查更新。