Custom ToggleSwitch

Learn creating a Custom ToggleSwitchusing Windows App SDK with this Tutorial

Custom ToggleSwitch shows how to create a Style for a ToggleSwitch using Windows App SDK.

Step 1

Follow Setup and Start on how to get Setup and Install what you need for Visual Studio 2022 and Windows App SDK.

In Windows 11 choose Start and then find or search for Visual Studio 2022 and then select it.

Once Visual Studio 2022 has started select Create a new project.

Then choose the Blank App, Packages (WinUI in Desktop) and then select Next.

After that in Configure your new project type in the Project name as CustomToggleSwitch, then select a Location and then select Create to start a new Solution.

Step 2

Then in Visual Studio within Solution Explorer for the Solution double-click on App.xaml to see the XAML for the Project.

Step 3

In the XAML for App.xaml below the Comment of  type in the following XAML:


<Style x:Key="CustomToggleSwitch" TargetType="ToggleSwitch">
    <Setter Property="Background" Value="LightSalmon"/>
    <Setter Property="BorderBrush" Value="Salmon"/>
    <Setter Property="Foreground" Value="Gold"/>
    <Setter Property="ManipulationMode" Value="System,TranslateX"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleSwitch">
                <Grid HorizontalAlignment="Center">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ToggleStates">
                            <VisualStateGroup.Transitions>
                                <!-- Transitions -->

                            </VisualStateGroup.Transitions>
                            <!-- Visual States -->

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!-- Content -->
                                
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This XAML is part of a Style of CustomToggleSwitch that will be used to target a ToggleSwitch which will contain some Transitions and Visual States along with Content for the Custom ToggleSwitch.

Step 4

While still the XAML for App.xaml below the Comment of  type in the following XAML:


<VisualTransition x:Name="DraggingToOnTransition" 
    From="Dragging" GeneratedDuration="0" To="On">
    <Storyboard>
        <RepositionThemeAnimation 
        FromHorizontalOffset="{Binding 
        TemplateSettings.KnobCurrentToOnOffset, 
        RelativeSource={RelativeSource Mode=TemplatedParent}}" 
        TargetName="SwitchKnob"/>
    </Storyboard>
</VisualTransition>
<VisualTransition x:Name="DraggingToOffTransition" 
    From="Dragging" GeneratedDuration="0" To="Off">
    <Storyboard>
        <RepositionThemeAnimation 
        FromHorizontalOffset="{Binding 
        TemplateSettings.KnobCurrentToOffOffset, 
        RelativeSource={RelativeSource Mode=TemplatedParent}}" 
        TargetName="SwitchKnob"/>
    </Storyboard>
</VisualTransition>
<VisualTransition x:Name="OnToOffTransition" 
    From="On" GeneratedDuration="0" To="Off">
    <Storyboard>
        <RepositionThemeAnimation FromHorizontalOffset="{Binding 
        TemplateSettings.KnobOnToOffOffset, 
        RelativeSource={RelativeSource Mode=TemplatedParent}}" 
        TargetName="SwitchKnob"/>
    </Storyboard>
</VisualTransition>
<VisualTransition x:Name="OffToOnTransition" 
    From="Off" GeneratedDuration="0" To="On">
    <Storyboard>
        <RepositionThemeAnimation FromHorizontalOffset="{Binding 
        TemplateSettings.KnobOffToOnOffset, 
        RelativeSource={RelativeSource Mode=TemplatedParent}}" 
        TargetName="SwitchKnob"/>
    </Storyboard>
</VisualTransition>

This XAML is for the Transitions between the States for the ToggleSwitch including how it will behave when it is either Dragging or Switched between On or Off for the Custom ToggleSwitch.

Step 5

Next in the XAML for App.xaml below the Comment of  type in the following XAML:


<VisualState x:Name="Dragging"/>
<VisualState x:Name="Off"/>
<VisualState x:Name="On">
    <Storyboard>
        <DoubleAnimation Duration="0" To="24" Storyboard.TargetProperty="X"
        Storyboard.TargetName="KnobTranslateTransform"/>
        <ObjectAnimationUsingKeyFrames 
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="SwitchKnobBounds">
            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="SwitchKnobOn">
            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames
            Storyboard.TargetProperty="Opacity"
            Storyboard.TargetName="SwitchKnobOff">
            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

This XAML is for the Visual States that will represent the States for the ToggleSwitch including how it will behave when it is Off and when it is On for the Custom ToggleSwitch.

Step 6

Then in the XAML for App.xaml below the Comment of  type in the following XAML:


<Rectangle x:Name="OuterBorder" 
Height="30" Width="55" RadiusY="15" RadiusX="15"
StrokeThickness="1" Stroke="{TemplateBinding BorderBrush}" 
Fill="{TemplateBinding Background}"/>
<Rectangle x:Name="SwitchKnobBounds" 
Height="30" Width="55" RadiusY="15" RadiusX="15"
StrokeThickness="1" Stroke="Goldenrod" 
Fill="{TemplateBinding Foreground}" Opacity="0"/>
<Grid x:Name="SwitchKnob" Grid.Row="2" 
    HorizontalAlignment="Left" 
    Height="25" Width="30">
    <Grid.RenderTransform>
        <TranslateTransform x:Name="KnobTranslateTransform"/>
    </Grid.RenderTransform>
    <Ellipse x:Name="SwitchKnobOn" 
    Height="15" Width="15"
    Fill="{TemplateBinding Background}" Opacity="0"/>
    <Ellipse x:Name="SwitchKnobOff" 
    Height="15" Width="15"
    Fill="{TemplateBinding Foreground}"/>
</Grid>
<Thumb x:Name="SwitchThumb" 
    AutomationProperties.AccessibilityView="Raw">
    <Thumb.Template>
        <ControlTemplate TargetType="Thumb">
            <Rectangle Fill="Transparent"/>
        </ControlTemplate>
    </Thumb.Template>
</Thumb>

This XAML is the Content for the layout of a ToggleSwitch when the Style is applied for the Custom ToggleSwitch.

Step 7

Within Solution Explorer for the Solution double-click on MainWindow.xaml to see the XAML for the Main Window.

Step 8

In the XAML for MainWindow.xaml there will be some XAML for a StackPanel, this should be Removed:


<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Step 9

While still in the XAML for MainWindow.xaml above </Window>, type in the following XAML:

                            
<ToggleSwitch HorizontalAlignment="Center" 
Style="{StaticResource CustomToggleSwitch}"/>

This XAML contains a ToggleSwitch with Style set to the StaticResource of CustomToggleSwitch from App.xaml.

Step 10

Within Solution Explorer for the Solution select the arrow next to MainWindow.xaml then double-click on MainWindow.xaml.cs to see the Code for the Main Window.

Step 11

In the Code for MainWindow.xaml.cs there be a Method of myButton_Click(...) this should be Removed by removing the following:


private void myButton_Click(object sender, RoutedEventArgs e)
{
    myButton.Content = "Clicked";
}

Step 12

That completes the Windows App SDK application. In Visual Studio 2022 from the Toolbar select CustomToggleSwitch (Package) to Start the application.

Step 13

Once running you will see the Custom ToggleSwitch displayed which you can then set to On.

Custom ToggleSwitch Running and Output

Step 14

To Exit the Windows App SDK application, select the Close button from the top right of the application as that concludes this Tutorial for Windows App SDK from tutorialr.com!

Custom ToggleSwitch PDF