atomui/samples/AtomUI.Demo.Desktop/ShowCase/SwitchShowCase.axaml

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.SwitchShowCase"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:atom="https://atomui.net"
    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
    mc:Ignorable="d">
    <showcase:ShowCasePanel>
    <showcase:ShowCaseItem
        Title="Basic"
        Description="The most basic usage.">
        <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
            <atom:ToggleSwitch />
        </StackPanel>
    </showcase:ShowCaseItem>
    
    <showcase:ShowCaseItem
        Title="Disabled"
        Description="Disabled state of Switch.">
        <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
            <atom:ToggleSwitch x:Name="ToggleDisabledSwitch" />
            <atom:Button ButtonType="Primary"
                         Command="{Binding $parent[showcase:SwitchShowCase].ToggleDisabledStatus}"
                         CommandParameter="{Binding ElementName=ToggleDisabledSwitch}">
                toggle disabled
            </atom:Button>
        </StackPanel>
    </showcase:ShowCaseItem>

        <showcase:ShowCaseItem
            Title="Text and icon"
            Description="With text and icon.">
            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
                <atom:ToggleSwitch
                    OnContent="On"
                    OffContent="Off"
                    IsChecked="True" />
                <atom:ToggleSwitch
                    OnContent="开"
                    OffContent="关" />
                <atom:ToggleSwitch>
                    <atom:ToggleSwitch.OnContent>
                        <atom:PathIcon Kind="TwitterOutlined"/>
                    </atom:ToggleSwitch.OnContent>
                    <atom:ToggleSwitch.OffContent>
                        <atom:PathIcon Kind="WechatOutlined"/>
                    </atom:ToggleSwitch.OffContent>
                </atom:ToggleSwitch>
                <atom:ToggleSwitch SizeType="Small">
                    <atom:ToggleSwitch.OnContent>
                        <atom:PathIcon Kind="CheckOutlined"/>
                    </atom:ToggleSwitch.OnContent>
                    <atom:ToggleSwitch.OffContent>
                        <atom:PathIcon Kind="CloseOutlined"/>
                    </atom:ToggleSwitch.OffContent>
                </atom:ToggleSwitch>
            </StackPanel>
        </showcase:ShowCaseItem>

        <showcase:ShowCaseItem
            Title="Two sizes"
            Description="size=Small represents a small sized switch.">
            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
                <atom:ToggleSwitch />
                <atom:ToggleSwitch SizeType="Small" />
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Loading"
            Description="Mark a pending state of switch.">
            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Vertical">
                <atom:ToggleSwitch IsLoading="True" IsChecked="true" x:Name="ToggleSwitchDefault" />
                <atom:ToggleSwitch SizeType="Small" IsLoading="True" x:Name="ToggleSwitchSmall" />
                <atom:Button ButtonType="Primary"
                             x:Name="ToggleLoadingStatusBtn"
                             Command="{Binding $parent[showcase:SwitchShowCase].ToggleLoadingStatus}"
                             CommandParameter="{Binding ElementName=ToggleLoadingStatusBtn}">
                    toggle loading
                </atom:Button>
            </StackPanel>
        </showcase:ShowCaseItem>
    </showcase:ShowCasePanel>
</UserControl>