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

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

我的 XAML 页面中有一个 ToggleButton :

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

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

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

如何使用字体代码设置其图标取决于状态（如 Content=""）？

解决方法

所以您想根据切换按钮的 IsChecked 属性更改内容，对吗？如果是这样，您不需要设置模板，您可以使用简单的数据绑定来实现。

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

像这样：

 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,string language)
    {
        throw new NotImplementedException();
    }
}

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

像这样：

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

现在，当您选中或取消选中切换按钮时，图标会根据需要更改。

有关更多信息，请参阅：IValueConverter Interface 和 Value Converters

更新

我建议使用数据绑定的原因是以后更容易更改图标值。

如果您必须使用visualstate，也可以这样做。您需要先创建 ToggleButton 的默认样式。 在 VS 中打开 Document Outline 窗口，右键单击您添加到 XAML 的 ToggleButton，将鼠标移至 Edit a template，然后选择 Edit a Copy。

然后您可以找到名为 Checked、CheckedPointerOver、CheckedPressed 的可视状态。对这些状态再添加一项更改，如下所示：

 <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundChecked}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundChecked}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushChecked}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE759;"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE759;"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="CheckedPressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ToggleButtonBorderBrushCheckedPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Content">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE759;"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>
                                    </Storyboard>
                                </VisualState>

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