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

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.NumberUpDownShowCase"
    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 usage"
            Description="Numeric-only NumberUpDown.">
            <atom:NumericUpDown Value="3" />
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Three sizes of NumberUpDown"
            Description="There are three sizes of an Input box: large (40px), default (32px) and small (24px).">
            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
                <atom:NumericUpDown SizeType="Large" Value="3" />
                <atom:NumericUpDown SizeType="Middle" Value="3" />
                <atom:NumericUpDown SizeType="Small" Value="3" />
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Variants"
            Description="Variants of NumberUpDown.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:NumericUpDown Value="3" StyleVariant="Outline" />
                <atom:NumericUpDown Value="3" StyleVariant="Filled" />
                <atom:NumericUpDown Value="3" StyleVariant="Borderless" />
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Pre / Post tab"
            Description="Using pre and post tabs example.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:NumericUpDown LeftAddOn="http://" RightAddOn=".com" Width="400" HorizontalAlignment="Left"
                                    Value="3" />
                <atom:NumericUpDown RightAddOn="{atom:IconProvider Kind=SettingOutlined}" Width="400"
                                    HorizontalAlignment="Left"
                                    Value="3" />
                <atom:NumericUpDown LeftAddOn="http://" InnerRightContent=".com" Width="400" HorizontalAlignment="Left"
                                    Value="3" />
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="With clear icon"
            Description="Input box with the remove icon, click the icon to delete everything.">
            <atom:NumericUpDown Watermark="input with clear icon" Width="400" HorizontalAlignment="Left"
                                IsEnableClearButton="True" />
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="prefix and suffix"
            Description="Add a prefix or suffix icons inside input.">
            <StackPanel Orientation="Vertical" Spacing="10">
                <atom:NumericUpDown Watermark="Enter your value"
                                    InnerLeftContent="{atom:IconProvider Kind=UserOutlined, NormalFilledColor=#D7D7D7}"
                                    InnerRightContent="{atom:IconProvider Kind=InfoCircleOutlined, NormalFilledColor=#8C8C8C}" />
                <atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" />
                <atom:NumericUpDown InnerLeftContent="￥" InnerRightContent="RMB" IsEnabled="False" />
            </StackPanel>
        </desktop:ShowCaseItem>

        <desktop:ShowCaseItem
            Title="Status"
            Description="Add status to Input with status, which could be error or warning.">
            <StackPanel Orientation="Vertical" Spacing="10" Margin="0, 0, 20, 0">
                <atom:NumericUpDown Watermark="Error" Status="Error" />
                <atom:NumericUpDown Watermark="Warning" Status="Warning" />
                <atom:NumericUpDown Watermark="Error with prefix"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Error" />
                <atom:NumericUpDown Watermark="Warning with prefix"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}" Status="Warning" />

                <atom:NumericUpDown Watermark="Error" Status="Error"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
                                    StyleVariant="Filled" />
                <atom:NumericUpDown Watermark="Warning" Status="Warning"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
                                    StyleVariant="Filled" />

                <atom:NumericUpDown Watermark="Error" Status="Error"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
                                    StyleVariant="Borderless" />
                <atom:NumericUpDown Watermark="Warning" Status="Warning"
                                    InnerLeftContent="{atom:IconProvider Kind=ClockCircleOutlined}"
                                    StyleVariant="Borderless" />
            </StackPanel>
        </desktop:ShowCaseItem>

    </desktop:ShowCasePanel>
</UserControl>