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

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.RadioButtonShowCase"
    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:ShowCasePanel.Styles>
            <Style Selector="atom|RadioButton">
                <Setter Property="Margin" Value="0, 0, 5, 10"></Setter>
            </Style>
        </showcase:ShowCasePanel.Styles>
        <showcase:ShowCaseItem
            Title="Basic"
            Description="The simplest use.">
            <StackPanel HorizontalAlignment="Left" Spacing="10" Orientation="Horizontal">
                <atom:RadioButton>Radio</atom:RadioButton>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Disabled"
            Description="Disabled state of RadioButton.">
            <StackPanel HorizontalAlignment="Left" Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <atom:RadioButton x:Name="ToggleDisabledRadioUnChecked">Radio1</atom:RadioButton>
                    <atom:RadioButton x:Name="ToggleDisabledRadioChecked" IsChecked="True">Radio2</atom:RadioButton>
                </StackPanel>
                <atom:Button ButtonType="Primary"
                             x:Name="ToggleDisabledButton"
                             Margin="0, 20, 0, 0"
                             Command="{Binding $parent[showcase:RadioButtonShowCase].ToggleDisabledStatus}"
                             CommandParameter="{Binding ElementName=ToggleDisabledButton}">
                    toggle disabled
                </atom:Button>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Radio Group"
            Description="A group of radio components.">
            <WrapPanel Orientation="Horizontal">
                <atom:RadioButton>A</atom:RadioButton>
                <atom:RadioButton>B</atom:RadioButton>
                <atom:RadioButton>C</atom:RadioButton>
                <atom:RadioButton>D</atom:RadioButton>
            </WrapPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Vertical Radio Group"
            Description="Vertical Radio Group.">
            <StackPanel Orientation="Vertical" HorizontalAlignment="Left">
                <atom:RadioButton>Option A</atom:RadioButton>
                <atom:RadioButton>Option B</atom:RadioButton>
                <atom:RadioButton>Option C</atom:RadioButton>
                <atom:RadioButton>Option D</atom:RadioButton>
            </StackPanel>
        </showcase:ShowCaseItem>

        <showcase:ShowCaseItem
            Title="Option Button"
            Description="OptionButton Group.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
                    <atom:RadioButton>Pear</atom:RadioButton>
                    <atom:RadioButton>Orange</atom:RadioButton>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <atom:RadioButton IsChecked="True">Apple</atom:RadioButton>
                    <atom:RadioButton>Pear</atom:RadioButton>
                    <atom:RadioButton IsEnabled="False">Orange</atom:RadioButton>
                </StackPanel>

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Spacing="10">
                    <atom:OptionButtonGroup ButtonStyle="Solid">
                        <atom:OptionButton IsChecked="True">Apple</atom:OptionButton>
                        <atom:OptionButton>Pear</atom:OptionButton>
                        <atom:OptionButton>Orange</atom:OptionButton>
                    </atom:OptionButtonGroup>
                </StackPanel>
                <atom:OptionButtonGroup ButtonStyle="Outline">
                    <atom:OptionButton>Apple</atom:OptionButton>
                    <atom:OptionButton IsChecked="True">Pear</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Orange</atom:OptionButton>
                </atom:OptionButtonGroup>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="option style"
            Description="The combination of option button style.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:OptionButtonGroup>
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton>Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
                <atom:OptionButtonGroup>
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
        
                <atom:OptionButtonGroup>
                    <atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Solid option button"
            Description="Solid option button style.">
            <StackPanel Orientation="Vertical" Spacing="10">
        
                <atom:OptionButtonGroup ButtonStyle="Solid">
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton>Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
                <atom:OptionButtonGroup ButtonStyle="Solid">
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
        
                <atom:OptionButtonGroup ButtonStyle="Solid">
                    <atom:OptionButton IsChecked="True" IsEnabled="False">Hangzhou</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Shanghai</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Beijing</atom:OptionButton>
                    <atom:OptionButton IsEnabled="False">Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Size type"
            Description="There are three sizes available: large, medium, and small. It can coordinate with input box.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:OptionButtonGroup SizeType="Large">
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton>Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
                <atom:OptionButtonGroup SizeType="Middle">
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton>Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
        
                <atom:OptionButtonGroup SizeType="Small">
                    <atom:OptionButton IsChecked="True">Hangzhou</atom:OptionButton>
                    <atom:OptionButton>Shanghai</atom:OptionButton>
                    <atom:OptionButton>Beijing</atom:OptionButton>
                    <atom:OptionButton>Chengdu</atom:OptionButton>
                </atom:OptionButtonGroup>
        
            </StackPanel>
        </showcase:ShowCaseItem>

    </showcase:ShowCasePanel>
</UserControl>