<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.ToggleButtonDemo"
    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"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel Spacing="20">
        <TextBlock Text="Toggle Button (Default)" />
        <StackPanel Orientation="Horizontal" Spacing="20">
            <ToggleButton>Default</ToggleButton>
            <ToggleButton Classes="Primary">Primary</ToggleButton>
            <ToggleButton Classes="Secondary">Secondary</ToggleButton>
            <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
            <ToggleButton Classes="Success">Success</ToggleButton>
            <ToggleButton Classes="Warning">Warning</ToggleButton>
            <ToggleButton Classes="Danger">Danger</ToggleButton>
            <ToggleButton Classes="Danger" IsEnabled="False">Disabled</ToggleButton>
        </StackPanel>
        <TextBlock Text="Toggle Button Checked State" />
        <StackPanel Orientation="Horizontal" Spacing="20">
            <ToggleButton IsChecked="True">Default</ToggleButton>
            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
            <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
            <ToggleButton
                Classes="Danger"
                IsChecked="True"
                IsEnabled="False">
                Disabled
            </ToggleButton>
        </StackPanel>
        <TextBlock Text="Toggle Button Three State" />
        <StackPanel Orientation="Horizontal" Spacing="20">
            <ToggleButton IsChecked="{x:Null}" IsThreeState="True">Default</ToggleButton>
            <ToggleButton
                Classes="Primary"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Primary
            </ToggleButton>
            <ToggleButton
                Classes="Secondary"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Secondary
            </ToggleButton>
            <ToggleButton
                Classes="Tertiary"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Tertiary
            </ToggleButton>
            <ToggleButton
                Classes="Success"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Success
            </ToggleButton>
            <ToggleButton
                Classes="Warning"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Warning
            </ToggleButton>
            <ToggleButton
                Classes="Danger"
                IsChecked="{x:Null}"
                IsThreeState="True">
                Danger
            </ToggleButton>
            <ToggleButton
                Classes="Danger"
                IsChecked="{x:Null}"
                IsEnabled="False"
                IsThreeState="True">
                Disabled
            </ToggleButton>
        </StackPanel>
        <TextBlock Text="Toggle Button Disabled State" />
        <StackPanel Background="{DynamicResource SemiColorBackground1}" Orientation="Horizontal" Spacing="20">
            <ToggleButton IsThreeState="True" IsEnabled="False">Default</ToggleButton>
            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="True">Checked</ToggleButton>
            <ToggleButton IsThreeState="True" IsEnabled="False" IsChecked="{x:Null}">Indeterminate</ToggleButton>
        </StackPanel>
        <TextBlock Text="Toggle Button Size" />
        <StackPanel Orientation="Horizontal" Spacing="20">
            <ToggleButton Classes="Small" IsThreeState="True">Small</ToggleButton>
            <ToggleButton IsThreeState="True">Default</ToggleButton>
            <ToggleButton Classes="Large" IsThreeState="True">Large</ToggleButton>
        </StackPanel>
    </StackPanel>
</UserControl>