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:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
    mc:Ignorable="d">
    <showcase:ShowCasePanel>
        <showcase:ShowCaseItem
            Title="Basic usage"
            Description="Numeric-only NumberUpDown.">
            <atom:NumericUpDown Value="3"/>
        </showcase:ShowCaseItem>
        
        <showcase: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>
        </showcase:ShowCaseItem>
        
        <showcase: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>
        </showcase:ShowCaseItem>
        
        <showcase: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>
        </showcase:ShowCaseItem>
        
        <showcase: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" />
        </showcase:ShowCaseItem>
        
        <showcase: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>
        </showcase:ShowCaseItem>
        
        <showcase: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>
        </showcase:ShowCaseItem>

    </showcase:ShowCasePanel>
</UserControl>