uwp - How to change font icon of ToggleButton with VisualState in Template?

Question

I have a ToggleButton in my XAML page :

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

But I want to change its icon when IsChecked changed. So I create a ToggleButton in XAML and set a Template for it

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

How can I set its icon using the font code depends on the state (like Content="") ?

Answer 1

So you want to make the content change based on the toggle button's IsChecked property, right? If so, you don't need to set a template, you could implement using a simple data-binding.

First of all, you need to create a value converter for the data-binding which could convert the bool value to a Segoe MDL2 Assets icon.

Like this:

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

After that, you need to set the binding in the xaml code.

Like this:

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

Now, when you check or uncheck the toggle button, the icon will change as you want.

For more information, please refer to :IValueConverter Interface and Value Converters

Update

The reason why I suggest using data-binding is that it is easier to change the icon value in later days.

If you must use visualstate, it could be done as well. What you need is to create a default style of the ToggleButton first. Open the Document Outline window in VS, right-click the ToggleButton you added to XAML, move your mouse to Edit a template, and choose Edit a Copy.

Then you could find the Visual State named as Checked, CheckedPointerOver, CheckedPressed. Add one more change to these states like this:

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

As you could see, I added the content change in these states, now, you could see the icon you want shows in the ToggleButton when the ToggleButton is checked.