diff --git a/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml b/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml
index afe4496..14336ac 100644
--- a/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml
+++ b/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml
@@ -8,19 +8,173 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+
     <UserControl.Styles>
         <Style Selector=":is(u|NumericUpDown)">
-            <Setter Property="Width" Value="240"></Setter>
+            <Setter Property="Width" Value="240" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
+            <Setter Property="HorizontalContentAlignment" Value="Left" />
         </Style>
     </UserControl.Styles>
-    <StackPanel HorizontalAlignment="Left">
-        <u:NumericIntUpDown Name="input" InnerLeftContent="Age" Step="1" Value="2" Watermark="Input Value" Classes="ClearButton" />
-        <TextBlock Text="{Binding #input.Value}" ></TextBlock>
-        <u:NumericDoubleUpDown Name="inputDouble" Step="0.5" Value="3.1" EmptyInputValue="1"></u:NumericDoubleUpDown>
-        <TextBlock Text="{Binding #inputDouble.Value}"></TextBlock>
-        <u:NumericByteUpDown Name="inputByte" Step="1" Value="3" EmptyInputValue="1"></u:NumericByteUpDown>
-        <TextBlock Text="{Binding #inputByte.Value}"></TextBlock>
-        <TextBlock Text="Drag"></TextBlock>
-        <u:NumericIntUpDown  Step="1" Value="2" Watermark="Input Value" AllowDrag="True" />
-    </StackPanel>
+    <Grid ColumnDefinitions="*,*,*">
+        <StackPanel Grid.Column="0" HorizontalAlignment="Left">
+            <u:NumericIntUpDown
+                Name="input"
+                Classes="ClearButton"
+                InnerLeftContent="Age"
+                Step="1"
+                Watermark="Input Value"
+                Value="2" />
+            <TextBlock Text="{Binding #input.Value}" />
+            <u:NumericDoubleUpDown
+                Name="inputDouble"
+                EmptyInputValue="1"
+                Step="0.5"
+                Value="3.1" />
+            <TextBlock Text="{Binding #inputDouble.Value}" />
+            <u:NumericByteUpDown
+                Name="inputByte"
+                EmptyInputValue="1"
+                Step="1"
+                Value="3" />
+            <TextBlock Text="{Binding #inputByte.Value}" />
+            <TextBlock Text="Drag" />
+            <u:NumericIntUpDown
+                AllowDrag="True"
+                Step="1"
+                Watermark="Input Value"
+                Value="2" />
+
+            <u:NumericIntUpDown
+                AllowDrag="True"
+                InnerLeftContent="Drag"
+                Step="1"
+                Watermark="Input Value"
+                Value="2" />
+
+            <!--  hex demo  -->
+
+            <!--  =================this is error usage  -->
+            <!--  HorizontalContentAlignment="Right"  -->
+            <u:NumericUIntUpDown
+                AllowDrag="False"
+                FormatString="{}{0:x8}"
+                InnerLeftContent="HexNumber"
+                ParsingNumberStyle="HexNumber"
+                Step="1"
+                Watermark="Input Value"
+                Value="2" />
+
+            <!--  =================we should use AllowHexSpecifier  -->
+            <u:NumericUIntUpDown
+                HorizontalContentAlignment="Right"
+                AllowDrag="False"
+                FontFamily="Consolas"
+                FormatString="{}{0:x8}"
+                InnerLeftContent="AllowHexSpecifier"
+                ParsingNumberStyle="AllowHexSpecifier"
+                Step="1"
+                Watermark="AllowHexSpecifier"
+                Value="2" />
+
+            <u:NumericUIntUpDown
+                HorizontalContentAlignment="Right"
+                AllowDrag="False"
+                FontFamily="Consolas"
+                FormatString="x8"
+                InnerLeftContent="0x"
+                ParsingNumberStyle="AllowHexSpecifier"
+                Step="1"
+                Watermark="AllowHexSpecifier"
+                Value="2" />
+            <u:NumericUIntUpDown
+                HorizontalContentAlignment="Left"
+                AllowDrag="False"
+                FontFamily="Consolas"
+                FormatString="x8"
+                InnerLeftContent="0"
+                ParsingNumberStyle="AllowHexSpecifier"
+                Step="1"
+                Watermark="AllowHexSpecifier"
+                Value="2" />
+        </StackPanel>
+        <StackPanel Grid.Column="2" HorizontalAlignment="Left">
+
+
+            <Label Content="FontFamily" />
+            <TextBox Text="{Binding FontFamily}" />
+
+            <Label Content="AllowDrag" />
+            <CheckBox IsChecked="{Binding AllowDrag}" />
+
+            <Label Content="IsReadOnly" />
+            <CheckBox IsChecked="{Binding IsReadOnly}" />
+
+            <Label Content="HorizontalContentAlignment" />
+            <ComboBox ItemsSource="{Binding Array_HorizontalContentAlignment}" SelectedItem="{Binding HorizontalContentAlignment}" />
+
+            <Label Content="InnerLeftContent" />
+            <TextBox Text="{Binding InnerLeftContent}" />
+
+
+            <Label Content="Watermark" />
+            <TextBox Text="{Binding Watermark}" />
+
+
+            <Label Content="FormatString" />
+            <TextBox
+                MinWidth="100"
+                MaxLength="100"
+                Text="{Binding FormatString}" />
+
+            <Label Content="ParsingNumberStyle" />
+            <ComboBox ItemsSource="{Binding Array_ParsingNumberStyle}" SelectedItem="{Binding ParsingNumberStyle}" />
+
+
+            <Label Content="AllowSpin" />
+            <CheckBox IsChecked="{Binding AllowSpin}" />
+
+            <Label Content="ShowButtonSpinner" />
+            <CheckBox IsChecked="{Binding ShowButtonSpinner}" />
+
+            <u:NumericUIntUpDown
+                Name="nudV"
+                AllowSpin="True"
+                InnerLeftContent="Value"
+                IsEnabled="True"
+                IsReadOnly="False"
+                Value="{Binding Value, Mode=TwoWay}" />
+
+            <u:NumericUIntUpDown InnerLeftContent="Max" Value="{Binding Maximum}" />
+
+            <u:NumericUIntUpDown InnerLeftContent="Min" Value="{Binding Minimum}" />
+
+            <Label Content="Step" />
+            <Slider Minimum="1" Value="{Binding Step}" />
+
+            <Label Content="IsEnable" />
+            <CheckBox IsChecked="{Binding IsEnable}" />
+
+        </StackPanel>
+        <StackPanel Grid.Column="1" HorizontalAlignment="Left">
+            <u:Divider Content="Display" />
+            <u:NumericUIntUpDown
+                Name="numd"
+                HorizontalContentAlignment="{Binding HorizontalContentAlignment}"
+                AllowDrag="{Binding AllowDrag}"
+                AllowSpin="{Binding AllowSpin}"
+                FontFamily="{Binding FontFamily}"
+                FormatString="{Binding FormatString}"
+                InnerLeftContent="{Binding InnerLeftContent}"
+                IsEnabled="{Binding IsEnable}"
+                IsReadOnly="{Binding IsReadOnly}"
+                Maximum="{Binding Maximum}"
+                Minimum="{Binding Minimum}"
+                ParsingNumberStyle="{Binding ParsingNumberStyle}"
+                ShowButtonSpinner="{Binding ShowButtonSpinner}"
+                Step="{Binding Step}"
+                Watermark="{Binding Watermark}"
+                Value="{Binding Value}" />
+        </StackPanel>
+    </Grid>
 </UserControl>
diff --git a/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml.cs b/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml.cs
index 4bdf06d..8ca1387 100644
--- a/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml.cs
+++ b/demo/Ursa.Demo/Pages/NumericUpDownDemo.axaml.cs
@@ -1,6 +1,9 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using System;
+using System.Diagnostics;
+using Ursa.Controls;
 using Ursa.Demo.ViewModels;
 
 namespace Ursa.Demo.Pages;
@@ -11,5 +14,12 @@ public partial class NumericUpDownDemo : UserControl
     {
         InitializeComponent();
         DataContext = new NumericUpDownDemoViewModel();
+        numd.ValueChanged += Numd_ValueChanged;
+    }
+
+    private void Numd_ValueChanged(object? sender, ValueChangedEventArgs<uint> e)
+    {
+        Trace.WriteLine($"{(sender as NumericUIntUpDown).Name} {e.OldValue} {e.NewValue}");
+
     }
 }
\ No newline at end of file
diff --git a/demo/Ursa.Demo/ViewModels/NumericUpDownDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/NumericUpDownDemoViewModel.cs
index 9840cca..cd229ae 100644
--- a/demo/Ursa.Demo/ViewModels/NumericUpDownDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/NumericUpDownDemoViewModel.cs
@@ -1,8 +1,50 @@
-using CommunityToolkit.Mvvm.ComponentModel;
+using Avalonia.Controls;
+using Avalonia.Layout;
+using CommunityToolkit.Mvvm.ComponentModel;
+using System;
+using System.Globalization;
+using Ursa.Controls;
+using static System.Runtime.InteropServices.JavaScript.JSType;
 
 namespace Ursa.Demo.ViewModels;
 
-public class NumericUpDownDemoViewModel: ObservableObject
+public partial class NumericUpDownDemoViewModel : ObservableObject
 {
-    
+
+    [ObservableProperty] private uint _Value;
+    [ObservableProperty] private string _FontFamily = "Consolas";
+    [ObservableProperty] private bool _AllowDrag = false;
+    [ObservableProperty] private bool _IsReadOnly = false;
+
+    [ObservableProperty] private Array _Array_HorizontalContentAlignment;
+    [ObservableProperty] private HorizontalAlignment _HorizontalContentAlignment = HorizontalAlignment.Center;
+    [ObservableProperty] private object? _InnerLeftContent = "obj:0x";
+    [ObservableProperty] private string _Watermark = "Water mark showed";
+    [ObservableProperty] private string _FormatString = "x8";
+    [ObservableProperty] private Array _Array_ParsingNumberStyle;
+    [ObservableProperty] private NumberStyles _ParsingNumberStyle = NumberStyles.AllowHexSpecifier;
+    [ObservableProperty] private bool _AllowSpin = true;
+    [ObservableProperty] private bool _ShowButtonSpinner = true;
+
+    [ObservableProperty] private UInt32 _Maximum = UInt32.MaxValue;
+    [ObservableProperty] private UInt32 _Minimum = UInt32.MinValue;
+    [ObservableProperty] private UInt32 _Step = 1;
+
+    [ObservableProperty] private bool _IsEnable = true;
+
+
+    public NumericUpDownDemoViewModel()
+    {
+        Array_HorizontalContentAlignment = Enum.GetValues(typeof(HorizontalAlignment));
+        Array_ParsingNumberStyle = Enum.GetValues(typeof(NumberStyles));
+        NumericUIntUpDown numericUIntUpDown;
+        TextBox textBox;
+        
+    }
+
+    partial void OnValueChanging(uint oldValue, uint newValue)
+    {
+        Console.WriteLine(oldValue);
+    }
+
 }
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Controls/NumericUpDown.axaml b/src/Ursa.Themes.Semi/Controls/NumericUpDown.axaml
index 11c4b6b..f9533e5 100644
--- a/src/Ursa.Themes.Semi/Controls/NumericUpDown.axaml
+++ b/src/Ursa.Themes.Semi/Controls/NumericUpDown.axaml
@@ -55,7 +55,6 @@
                                 InnerLeftContent="{TemplateBinding InnerLeftContent}"
                                 IsReadOnly="{TemplateBinding IsReadOnly}"
                                 TextWrapping="NoWrap"
-                                InnerLeftContent="{TemplateBinding InnerLeftContent}"
                                 Theme="{DynamicResource NonErrorTextBox}"
                                 Watermark="{TemplateBinding Watermark}" />
                             <Panel