AppBarToggleButtonPage.xaml

<ui:Page
    x:Class="ModernWpf.SampleApp.ControlPages.AppBarToggleButtonPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:sc="clr-namespace:SamplesCommon;assembly=SamplesCommon"
    mc:Ignorable="d">

    <ScrollViewer>
        <ui:SimpleStackPanel Style="{StaticResource ControlPageContentPanelStyle}">
            <sc:ControlExample
                x:Name="Example1"
                HeaderText="An AppBarToggleButton with a symbol icon.">
                <sc:ControlExample.Example>
                    <StackPanel Orientation="Horizontal">
                        <!-- App bar button with symbol icon. -->
                        <ui:AppBarToggleButton x:Name="Button1" Label="SymbolIcon" Icon="Shuffle" Click="AppBarButton_Click" />
                        <TextBlock
                            x:Name="Control1Output"
                            Margin="8,0,0,0"
                            VerticalAlignment="Center" />
                    </StackPanel>
                </sc:ControlExample.Example>
            </sc:ControlExample>
            <sc:ControlExample
                x:Name="Example2"
                HeaderText="An AppBarToggleButton with a bitmap icon.">
                <sc:ControlExample.Example>
                    <StackPanel Orientation="Horizontal">
                        <!-- App bar button with bitmap icon. -->
                        <ui:AppBarToggleButton x:Name="Button2" Label="BitmapIcon" Click="AppBarButton_Click">
                            <ui:AppBarToggleButton.Icon>
                                <ui:BitmapIcon UriSource="/Assets/Slices2.png" />
                            </ui:AppBarToggleButton.Icon>
                        </ui:AppBarToggleButton>
                        <TextBlock
                            x:Name="Control2Output"
                            Margin="8,0,0,0"
                            VerticalAlignment="Center" />
                    </StackPanel>
                </sc:ControlExample.Example>
            </sc:ControlExample>
            <sc:ControlExample
                x:Name="Example3"
                HeaderText="An AppBarToggleButton with a font icon.">
                <sc:ControlExample.Example>
                    <StackPanel Orientation="Horizontal">
                        <!-- App bar button with font icon. -->
                        <ui:AppBarToggleButton x:Name="Button3" Label="FontIcon" Click="AppBarButton_Click">
                            <ui:AppBarToggleButton.Icon>
                                <ui:FontIcon
                                    FontFamily="Candara"
                                    Glyph="&#x03A3;" />
                            </ui:AppBarToggleButton.Icon>
                        </ui:AppBarToggleButton>
                        <TextBlock
                            x:Name="Control3Output"
                            Margin="8,0,0,0"
                            VerticalAlignment="Center" />
                    </StackPanel>
                </sc:ControlExample.Example>
            </sc:ControlExample>
            <sc:ControlExample
                x:Name="Example4"
                HeaderText="A three-state AppBarToggleButton with a path icon.">
                <sc:ControlExample.Example>
                    <StackPanel Orientation="Horizontal">
                        <!-- App bar button with path icon. -->
                        <ui:AppBarToggleButton x:Name="Button4" Label="PathIcon" Click="AppBarButton_Click" IsThreeState="True">
                            <ui:AppBarToggleButton.Icon>
                                <ui:PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24" />
                            </ui:AppBarToggleButton.Icon>
                        </ui:AppBarToggleButton>
                        <TextBlock
                            x:Name="Control4Output"
                            Margin="8,0,0,0"
                            VerticalAlignment="Center" />
                    </StackPanel>
                </sc:ControlExample.Example>
            </sc:ControlExample>
        </ui:SimpleStackPanel>
    </ScrollViewer>
</ui:Page>