Avalonia/src/Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml

<ResourceDictionary
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=netstandard">
  <Design.PreviewWith>
    <StackPanel Margin="20" Width="250" Spacing="24">
      <StackPanel Spacing="12" >
        <ToggleSwitch/>
        <ToggleSwitch IsChecked="True" />
        <ToggleSwitch HorizontalContentAlignment="Left"
                      Content="Header"
                      OffContent="Off"
                      OnContent="On"/>
        <ToggleSwitch Background="Yellow"/>
      </StackPanel>
    </StackPanel>
  </Design.PreviewWith>

  <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">0</x:Double>

  <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="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"
              VerticalAlignment="Top"
              Content="{TemplateBinding Content}"
              ContentTemplate="{TemplateBinding ContentTemplate}"
              Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
              RecognizesAccessKey="True" />

          <Grid
              Grid.Row="1"
              MinWidth="{DynamicResource 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"
                Background="{DynamicResource ToggleSwitchContainerBackground}"
                Margin="0,5"
                TemplatedControl.IsTemplateFocusTarget="True" />

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

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

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

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

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

              <Grid x:Name="MovingKnobs" Width="20" Height="20">
                <Ellipse
                  x:Name="SwitchKnobOn"
                  Fill="{DynamicResource ToggleSwitchKnobFillOn}"
                  Width="10"
                  Height="10" />
                <Ellipse
                  x:Name="SwitchKnobOff"
                  Fill="{DynamicResource ToggleSwitchKnobFillOff}"
                  Width="10"
                  Height="10" />
              </Grid>
            </Canvas>
          </Grid>
        </Grid>
      </ControlTemplate>
    </Setter>

    <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
      <Setter Property="Margin" Value="0" />
    </Style>

    <!--  NormalState  -->
    <Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs">
      <Setter Property="Transitions">
        <Transitions>
          <DoubleTransition
              Easing="CubicEaseOut"
              Property="Canvas.Left"
              Duration="0:0:0.2" />
        </Transitions>
      </Setter>
    </Style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
      <Setter Property="Opacity" Value="0" />
    </Style>
  </ControlTheme>
</ResourceDictionary>