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

<UserControl
    x:Class="Semi.Avalonia.Demo.Pages.Overview"
    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="1000"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <StackPanel Margin="10" Spacing="5">
            <TextBlock
                HorizontalAlignment="Center"
                Classes="H4"
                Text="Welcome to Semi Avalonia"
                Theme="{StaticResource TitleTextBlock}" />

            <StackPanel Orientation="Horizontal" Spacing="20">
                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
                <Button
                    Classes="Primary"
                    IsEnabled="False"
                    Theme="{DynamicResource SolidButton}">
                    Danger
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Spacing="20">
                <Label Theme="{StaticResource TagLabel}">Label</Label>
                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Spacing="20">
                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <StackPanel
                    Margin="0,0,16,0"
                    VerticalAlignment="Center"
                    Orientation="Horizontal">
                    <RadioButton Margin="0,0,8,0">Option 1</RadioButton>
                    <RadioButton>Option 2</RadioButton>
                </StackPanel>
                <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
                    <StackPanel Orientation="Horizontal">
                        <RadioButton IsChecked="True" Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
                        <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
                    </StackPanel>
                </Border>
                <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
                    </StackPanel>
                </RadioButton>
                <RadioButton
                    Margin="4"
                    IsChecked="True"
                    Theme="{StaticResource CardRadioButton}">
                    <StackPanel>
                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
                    </StackPanel>
                </RadioButton>
            </StackPanel>
            <StackPanel Orientation="Horizontal" />
            <StackPanel Orientation="Horizontal">
                <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <ToggleSwitch
                    Content="Content"
                    OffContent="No"
                    OnContent="Yes" />
                <ProgressBar
                    Classes="Right"
                    ShowProgressText="True"
                    Value="20" />
                <Slider
                    Width="200"
                    Margin="30,0"
                    Orientation="Horizontal"
                    Value="30" />
            </StackPanel>
            <TabControl>
                <TabItem Header="Tab 1">
                    <TextBlock Margin="8">Tab Content 1</TextBlock>
                </TabItem>
                <TabItem Header="Tab 2">
                    <TextBlock Margin="8">Tab Content 2</TextBlock>
                </TabItem>
                <TabItem Header="Tab 3">
                    <TextBlock Margin="8">Tab Content 3</TextBlock>
                </TabItem>
            </TabControl>
            <StackPanel Orientation="Horizontal" Spacing="20">
                <ComboBox Width="200" PlaceholderText="Please Select" />
                <DatePicker />
                <TimePicker />
                <CalendarDatePicker />
            </StackPanel>
            <Grid ColumnDefinitions="* * *">
                <Border Theme="{StaticResource CardBorder}">
                    <TextBlock>Card</TextBlock>
                </Border>
                <Border
                    Grid.Column="1"
                    Classes="Hover"
                    Theme="{StaticResource CardBorder}">
                    <TextBlock>Shadow on hover</TextBlock>
                </Border>
                <Border
                    Grid.Column="2"
                    Classes="Shadow"
                    Theme="{StaticResource CardBorder}">
                    <TextBlock>Shadow</TextBlock>
                </Border>
            </Grid>
            <StackPanel Orientation="Horizontal" Spacing="20">
                <TextBox
                    Width="200"
                    InnerLeftContent="http://"
                    InnerRightContent=".com" />
                <TextBox
                    Width="200"
                    Classes="revealPasswordButton"
                    PasswordChar="*"
                    Text="Avalonia" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" Spacing="20">
                <TreeView>
                    <TreeViewItem Header="Level 1" IsExpanded="True">
                        <TreeViewItem Header="Level 2" />
                        <TreeViewItem Header="Level 2" />
                        <TreeViewItem Header="Level 2" IsExpanded="True">
                            <TreeViewItem Header="Level 3" />
                            <TreeViewItem Header="Level 3" />
                        </TreeViewItem>
                    </TreeViewItem>
                </TreeView>
                <ListBox SelectedIndex="3">
                    <TextBlock>List Item 1</TextBlock>
                    <TextBlock>List Item 2</TextBlock>
                    <TextBlock>List Item 3</TextBlock>
                    <TextBlock>List Item 4</TextBlock>
                    <TextBlock>List Item 5</TextBlock>
                </ListBox>
                <Calendar />
            </StackPanel>
        </StackPanel>
    </ScrollViewer>
</UserControl>