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

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.SegmentedShowCase"
    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:desktop="clr-namespace:AtomUI.Demo.Desktop"

    mc:Ignorable="d">
    <desktop:ShowCasePanel>
        <desktop:ShowCaseItem
            Title="Basic"
            Description="The most basic usage.">
            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
                <atom:Segmented>
                    <atom:SegmentedItem>Daily</atom:SegmentedItem>
                    <atom:SegmentedItem>Weekly</atom:SegmentedItem>
                    <atom:SegmentedItem>Monthly</atom:SegmentedItem>
                    <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                    <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                </atom:Segmented>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Block Segmented"
            Description="block property will make the Segmented fit to its parent width.">
            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical">
                <atom:Segmented IsExpanding="True">
                    <atom:SegmentedItem>123</atom:SegmentedItem>
                    <atom:SegmentedItem>456</atom:SegmentedItem>
                    <atom:SegmentedItem>longtext-longtext-longtext-longtext</atom:SegmentedItem>
                </atom:Segmented>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Disabled"
            Description="Disabled Segmented.">
            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" Spacing="10">
                <atom:Segmented>
                    <atom:SegmentedItem IsEnabled="False">Map</atom:SegmentedItem>
                    <atom:SegmentedItem IsEnabled="False">Transit</atom:SegmentedItem>
                    <atom:SegmentedItem IsEnabled="False">Satellite</atom:SegmentedItem>
                </atom:Segmented>
                <atom:Segmented>
                    <atom:SegmentedItem>Daily</atom:SegmentedItem>
                    <atom:SegmentedItem IsEnabled="False">Weekly</atom:SegmentedItem>
                    <atom:SegmentedItem>Monthly</atom:SegmentedItem>
                    <atom:SegmentedItem IsEnabled="False">Quarterly</atom:SegmentedItem>
                    <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                </atom:Segmented>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Three sizes of Segmented"
            Description="There are three sizes of an Segmented: large (40px), default (32px) and small (24px).">
            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
                <atom:Segmented SizeType="Large">
                    <atom:SegmentedItem>Daily</atom:SegmentedItem>
                    <atom:SegmentedItem>Weekly</atom:SegmentedItem>
                    <atom:SegmentedItem>Monthly</atom:SegmentedItem>
                    <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                    <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                </atom:Segmented>

                <atom:Segmented>
                    <atom:SegmentedItem>Daily</atom:SegmentedItem>
                    <atom:SegmentedItem>Weekly</atom:SegmentedItem>
                    <atom:SegmentedItem>Monthly</atom:SegmentedItem>
                    <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                    <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                </atom:Segmented>

                <atom:Segmented SizeType="Small">
                    <atom:SegmentedItem>Daily</atom:SegmentedItem>
                    <atom:SegmentedItem>Weekly</atom:SegmentedItem>
                    <atom:SegmentedItem>Monthly</atom:SegmentedItem>
                    <atom:SegmentedItem>Quarterly</atom:SegmentedItem>
                    <atom:SegmentedItem>Yearly</atom:SegmentedItem>
                </atom:Segmented>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="With Icon only"
            Description="Set icon without label for Segmented Item.">
            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
                <atom:Segmented>
                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}" />
                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
                </atom:Segmented>
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="With Icon"
            Description="Set icon for Segmented Item.">
            <StackPanel HorizontalAlignment="Left" Orientation="Vertical" Spacing="10">
                <atom:Segmented>
                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                        List
                    </atom:SegmentedItem>
                    <atom:SegmentedItem Content="Kanban" Icon="{atom:IconProvider Kind=AppstoreOutlined}" />
                </atom:Segmented>

                <atom:Segmented>
                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                        Ava 牛逼
                    </atom:SegmentedItem>
                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />

                    <atom:SegmentedItem Content="微软牛逼"
                                        Icon="{atom:IconProvider Kind=WindowsOutlined}" />

                </atom:Segmented>

                <atom:Segmented SizeType="Large">
                    <atom:SegmentedItem Icon="{atom:IconProvider Kind=BarsOutlined}">
                        Ava 牛逼
                    </atom:SegmentedItem>
                    <atom:SegmentedItem Content="群主牛逼" Icon="{atom:IconProvider Kind=WechatOutlined}" />

                    <atom:SegmentedItem Content="微软牛逼"
                                        Icon="{atom:IconProvider Kind=WindowsOutlined}" />

                </atom:Segmented>

            </StackPanel>
        </desktop:ShowCaseItem>
    </desktop:ShowCasePanel>
</UserControl>