Semi.Avalonia/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml

<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.CheckBoxDemo"
    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">
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <StackPanel HorizontalAlignment="Left" Spacing="20">
            <TextBlock Text="CheckBox" />
            <StackPanel Orientation="Horizontal">
                <CheckBox>Unchecked</CheckBox>
                <CheckBox IsChecked="True">Checked</CheckBox>
                <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsEnabled="False">Unchecked</CheckBox>
                <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
                <CheckBox
                    IsChecked="{x:Null}"
                    IsEnabled="False"
                    IsThreeState="True">
                    Indeterminate
                </CheckBox>
            </StackPanel>
            <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
            <TextBlock Text="SimpleCheckBox" />
            <StackPanel Orientation="Horizontal">
                <CheckBox Theme="{StaticResource SimpleCheckBox}" />
                <CheckBox IsChecked="True" Theme="{StaticResource SimpleCheckBox}" />
                <CheckBox
                    IsChecked="{x:Null}"
                    IsThreeState="True"
                    Theme="{StaticResource SimpleCheckBox}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsEnabled="False" Theme="{StaticResource SimpleCheckBox}" />
                <CheckBox
                    IsChecked="True"
                    IsEnabled="False"
                    Theme="{StaticResource SimpleCheckBox}" />
                <CheckBox
                    IsChecked="{x:Null}"
                    IsEnabled="False"
                    IsThreeState="True"
                    Theme="{StaticResource SimpleCheckBox}" />
            </StackPanel>
            <TextBlock Margin="0,16" Text="CardCheckBox" />
            <StackPanel Orientation="Horizontal">
                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="True"
                    Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="{x:Null}"
                    IsThreeState="True"
                    Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <CheckBox
                    Width="300"
                    IsEnabled="False"
                    Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="True"
                    IsEnabled="False"
                    Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="{x:Null}"
                    IsEnabled="False"
                    IsThreeState="True"
                    Theme="{DynamicResource CardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
            </StackPanel>
            <TextBlock Margin="0,16" Text="PureCardCheckBox" />
            <StackPanel Orientation="Horizontal">
                <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="True"
                    Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="{x:Null}"
                    IsEnabled="True"
                    IsThreeState="True"
                    Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <CheckBox
                    Width="300"
                    IsEnabled="False"
                    Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="True"
                    IsEnabled="False"
                    Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
                <CheckBox
                    Width="300"
                    IsChecked="{x:Null}"
                    IsEnabled="False"
                    IsThreeState="True"
                    Theme="{DynamicResource PureCardCheckBox}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                    </StackPanel>
                </CheckBox>
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</UserControl>