How to add toggle switch button to .net WPF application?

I am working on a .NET WPF project using Visual Studio 2022. I want to add a toggle switch button to my app. I searched about this and none of the solutions looked proper with my app. How can it be done without adding external libraries. Is it possible? If not, what could be the best option to handle this?

I want something like this:

I would also suggest mahapps metro. You could grab the markup out the source.

Maybe it's this markup here.

https://github.com/MahApps/MahApps.Metro/blob/develop/src/MahApps.Metro/Themes/ToggleSwitch.xaml

I have a similar template for a checkbox. You could adapt or maybe you like the look anyhow. It's a bit quick and dirty.

The ellipse is animated left or right when you click

    <Style TargetType="{x:Type CheckBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type CheckBox}">
                    <ControlTemplate.Resources>
                        <SolidColorBrush x:Key="fillBrush">LightBlue</SolidColorBrush>
                        <SolidColorBrush x:Key="borderBrush">Gray</SolidColorBrush>
                    </ControlTemplate.Resources>
                    <Grid  Background="Transparent" SnapsToDevicePixels="True"
                           Height="18"  
                           >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="34" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid  x:Name="markGrid" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle Fill="Transparent" Height="16" x:Name="moveEllipse"
                                       >
                                <Rectangle.Style>
                                    <Style TargetType="Rectangle">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
                                                <DataTrigger.EnterActions>
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation From="0" To="16" Duration="0:0:0.4" 
                                              Storyboard.TargetProperty="Width" />
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </DataTrigger.EnterActions>
                                                <DataTrigger.ExitActions>
                                                    <BeginStoryboard>
                                                        <Storyboard>
                                                            <DoubleAnimation To="0" Duration="0:0:0.4" 
                                                         Storyboard.TargetProperty="Width"/>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </DataTrigger.ExitActions>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Rectangle.Style>
                            </Rectangle>
                            <Rectangle RadiusX="6" RadiusY="6" 
                                       Grid.ColumnSpan="2"
                                       Name="line"
                                       StrokeThickness=".8"
                                       IsHitTestVisible="False"
                                       Margin="1,4,1,4"
                                 >
                                <Rectangle.Style>
                                    <Style TargetType="{x:Type Rectangle}">
                                        <Setter Property="Fill" Value="LightGray"/>
                                    </Style>
                                </Rectangle.Style>
                            </Rectangle>
                            <Ellipse Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
                                     StrokeThickness=".8"
                                     Name="spot"
                                     Grid.Column="1"
                                     HorizontalAlignment="Left"
                                     >
                                <Ellipse.Style>
                                    <Style TargetType="Ellipse">
                                        <Setter Property="Fill" Value="LightSteelBlue"/>
                                        <Setter Property="Stroke" Value="CadetBlue"/>
                                    </Style>
                                </Ellipse.Style>
                            </Ellipse>

                        </Grid>
                        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" TargetName="line" Value="DarkGray"/>
                            <Setter Property="Stroke" TargetName="spot" Value="DarkGray"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity"  Value=".5"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Stroke" TargetName="line" Value="Black"/>
                            <Setter Property="Stroke" TargetName="spot" Value="Black"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter Property="Fill" TargetName="line" Value="LightSkyBlue"/>
                            <Setter Property="Fill" TargetName="spot" Value="SkyBlue"/>
                            <Setter Property="Stroke" TargetName="spot" Value="SteelBlue"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="{x:Null}">
                            <Setter Property="Fill" TargetName="line" Value="lightGray"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

And of course the colours are very easily changed.

Looks like this

or this

Line to the left is edge of window