Avalonia/src/Avalonia.Themes.Default/ToggleSwitch.xaml

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=netstandard">
  <Styles.Resources>
    <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
    <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
    <GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
    <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
    <Thickness x:Key="ToggleSwitchOnStrokeThickness">0</Thickness>
    <Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1</Thickness>
    <SolidColorBrush x:Key="ToggleSwitchContentForeground" Color="{DynamicResource ThemeForegroundColor}" />
    <SolidColorBrush x:Key="ToggleSwitchContentForegroundDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchHeaderForeground" Color="{DynamicResource ThemeForegroundColor}" />
    <SolidColorBrush x:Key="ToggleSwitchHeaderForegroundDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchContainerBackground" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchContainerBackgroundPointerOver" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchContainerBackgroundPressed" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchContainerBackgroundDisabled" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchFillOff" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchFillOffPointerOver" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchFillOffPressed" Color="{DynamicResource ThemeControlMidHighColor}" />
    <SolidColorBrush x:Key="ToggleSwitchFillOffDisabled" Color="Transparent" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOff" Color="{DynamicResource ThemeBorderMidColor}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOffPointerOver" Color="{DynamicResource ThemeBorderHighColor}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOffPressed" Color="{DynamicResource ThemeBorderHighColor}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOffDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchFillOn" Color="{DynamicResource ThemeAccentColor}" />
    <SolidColorBrush x:Key="ToggleSwitchFillOnPointerOver" Color="{DynamicResource ThemeAccentColor2}" />
    <SolidColorBrush x:Key="ToggleSwitchFillOnPressed" Color="{DynamicResource ThemeAccentColor3}" />
    <SolidColorBrush x:Key="ToggleSwitchFillOnDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOn" Color="{DynamicResource ThemeAccentColor}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOnPointerOver" Color="{DynamicResource ThemeAccentColor2}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOnPressed" Color="{DynamicResource ThemeAccentColor3}" />
    <SolidColorBrush x:Key="ToggleSwitchStrokeOnDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOff" Color="{DynamicResource ThemeBorderMidColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOffPointerOver" Color="{DynamicResource ThemeBorderHighColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOffPressed" Color="{DynamicResource ThemeBorderHighColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOffDisabled" Color="{DynamicResource ThemeForegroundLowColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOn" Color="{DynamicResource HighlightForegroundColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOnPointerOver" Color="{DynamicResource HighlightForegroundColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOnPressed" Color="{DynamicResource HighlightForegroundColor}" />
    <SolidColorBrush x:Key="ToggleSwitchKnobFillOnDisabled" Color="{DynamicResource HighlightForegroundColor}" />
  </Styles.Resources>
  <Design.PreviewWith>
    <StackPanel Margin="20" Width="250" Spacing="24" >
      <StackPanel Spacing="12" >
        <TextBlock
          Text="Automatic updates"
          Classes="h1"/>
        <TextBlock
          Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
          TextWrapping="Wrap"/>
        <ToggleSwitch HorizontalContentAlignment="Left"
          Content="Enable automatic Updates?"
          OffContent="Uit"
          OnContent="Aan"
          VerticalAlignment="Bottom"/>
      </StackPanel>

      <StackPanel Spacing="12">
        <TextBlock
          Text="Previewer"
          Classes="h1"/>
        <TextBlock
          Text="The previewer Shows a preview off your code, this could slow down your system"
          TextWrapping="Wrap"/>
        <ToggleSwitch
          Content="Previewer"
          IsChecked="True" />
      </StackPanel>
    </StackPanel>
  </Design.PreviewWith>

  <Style Selector="ToggleSwitch">
    <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
      <ControlTemplate>
        <Grid Background="{TemplateBinding Background}"
          RowDefinitions="Auto,*">

          <ContentPresenter x:Name="PART_ContentPresenter"
            Grid.Row="0"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
            VerticalAlignment="Top"/>

          <Grid Grid.Row="1"
            MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
            HorizontalAlignment="Left"
            VerticalAlignment="Top">

            <Grid.RowDefinitions>
              <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
              <RowDefinition Height="Auto" />
              <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="12" MaxWidth="12" />
              <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid x:Name="SwitchAreaGrid"
              Grid.RowSpan="3"
              Grid.ColumnSpan="3"
              TemplatedControl.IsTemplateFocusTarget="True"
              Margin="0,5" />

            <ContentPresenter x:Name="PART_OffContentPresenter"
              Grid.RowSpan="3"
              Grid.Column="2"
              Content="{TemplateBinding OffContent}"
              ContentTemplate="{TemplateBinding OffContentTemplate}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

            <ContentPresenter x:Name="PART_OnContentPresenter"
              Grid.RowSpan="3"
              Grid.Column="2"
              Content="{TemplateBinding OnContent}"
              ContentTemplate="{TemplateBinding OnContentTemplate}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

            <Border x:Name="OuterBorder"
              Grid.Row="1"
              Height="20"
              Width="40"
              CornerRadius="10"
              BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />

            <Border x:Name="SwitchKnobBounds"
              Grid.Row="1"
              Height="20"
              Width="40"
              CornerRadius="10"
              BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>

            <Canvas x:Name="SwitchKnob" Grid.Row="1"
               HorizontalAlignment="Left"
               Width="20" Height="20">

              <Grid x:Name="MovingKnobs"
                Width="20" Height="20">

                <Ellipse x:Name="SwitchKnobOn"
                         Width="10" Height="10" />

                <Ellipse x:Name="SwitchKnobOff"
                         Width="10" Height="10" />
              </Grid>
            </Canvas>
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter>
  </Style>

  <!-- NormalState -->
  <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
  </Style>

  <Style Selector="ToggleSwitch /template/ Border#OuterBorder">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
  </Style>

  <Style Selector="ToggleSwitch /template/ Border#SwitchKnobBounds">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
  </Style>

  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}"/>
  </Style>

  <Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
  </Style>

  <Style Selector="ToggleSwitch /template/ Grid#MovingKnobs">
    <Setter Property="Transitions">
      <Transitions>
        <DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
      </Transitions>
    </Setter>
  </Style>

  <!-- PointerOverState -->
  <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
  </Style>

  <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
  </Style>

  <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
  </Style>

  <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
  </Style>

  <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
  </Style>

  <!-- PressedState -->
  <Style Selector="ToggleSwitch:pressed /template/ Border#OuterBorder">
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}"/>
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
  </Style>

  <Style Selector="ToggleSwitch:pressed /template/ Border#SwitchKnobBounds">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}"/>
  </Style>

  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}"/>
  </Style>

  <Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}"/>
  </Style>

  <Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
  </Style>

  <!-- DisabledState -->
  <Style Selector="ToggleSwitch:disabled">
    <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}"/>
  </Style>

  <Style Selector="ToggleSwitch:disabled /template/ Border#OuterBorder">
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}"/>
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
  </Style>

  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}"/>
  </Style>

  <Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}"/>
  </Style>

  <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
    <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
    <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
  </Style>

  <!-- CheckedState -->
  <Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
    <Setter Property="Opacity" Value="0"/>
  </Style>

  <Style Selector="ToggleSwitch:checked  /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Opacity" Value="0"/>
  </Style>

  <Style Selector="ToggleSwitch:checked  /template/ Border#SwitchKnobBounds">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
    <Setter Property="Opacity" Value="0"/>
  </Style>

  <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <!--UncheckedState -->
  <Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
    <Setter Property="Opacity" Value="0"/>
  </Style>

  <Style Selector="ToggleSwitch:unchecked  /template/ Border#SwitchKnobBounds">
    <Setter Property="Opacity" Value="0"/>
  </Style>

  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
    <Setter Property="Opacity" Value="1"/>
  </Style>

  <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
    <Setter Property="Opacity" Value="0"/>
  </Style>
</Styles>