From bdf381cd77825b2a1635bf48c5b73e8b42a1d84f Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Wed, 16 Mar 2022 23:51:31 +0800
Subject: [PATCH] chore: optimized element layout of demo

---
 .../UserControl/Styles/BorderDemoCtl.xaml     |  90 +++++++------
 .../UserControl/Styles/BrushDemoCtl.xaml      |  62 ++++-----
 .../UserControl/Styles/CheckBoxDemoCtl.xaml   |   3 +-
 .../UserControl/Styles/ExpanderDemoCtl.xaml   | 122 +++++++++---------
 .../UserControl/Styles/GroupBoxDemoCtl.xaml   |  40 +++---
 .../Styles/NativeComboBoxDemoCtl.xaml         |   4 +-
 .../Styles/NativeDatePickerDemoCtl.xaml       |   4 +-
 .../Styles/NativePasswordBoxDemoCtl.xaml      |  38 +++---
 .../Styles/NativeProgressBarDemoCtl.xaml      |  81 +++++-------
 .../Styles/NativeTabControlDemoCtl.xaml       |  16 +--
 .../Styles/NativeTextBoxDemoCtl.xaml          |  38 +++---
 .../UserControl/Styles/SliderDemoCtl.xaml     |  34 ++---
 12 files changed, 261 insertions(+), 271 deletions(-)

diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BorderDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BorderDemoCtl.xaml
index 04b09fd0..d30ef7fb 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BorderDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BorderDemoCtl.xaml
@@ -6,54 +6,58 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <StackPanel>
-            <UniformGrid Margin="32,32,0,0" Columns="3" Rows="2">
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32">
-                    <Border Background="{DynamicResource PrimaryBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Margin="32" Orientation="Vertical" Spacing="32" MaxWidth="664">
+                <hc:UniformSpacingPanel Spacing="32" ItemWidth="200" ItemHeight="200" ChildWrapping="Wrap" HorizontalAlignment="Center">
+                    <Border Style="{StaticResource BorderRegion}">
+                        <Border Background="{DynamicResource PrimaryBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                        </Border>
                     </Border>
-                </Border>
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow1}">
-                    <Border Background="{DynamicResource InfoBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                    <Border Style="{StaticResource BorderRegion}" Effect="{StaticResource EffectShadow1}">
+                        <Border Background="{DynamicResource InfoBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                        </Border>
                     </Border>
-                </Border>
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200" Margin="0,0,32,32" Effect="{StaticResource EffectShadow2}">
-                    <Border Background="{DynamicResource WarningBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                    <Border Style="{StaticResource BorderRegion}" Effect="{StaticResource EffectShadow2}">
+                        <Border Background="{DynamicResource WarningBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                        </Border>
                     </Border>
-                </Border>
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow3}">
-                    <Border Background="{DynamicResource DangerBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                    <Border Style="{StaticResource BorderRegion}" Effect="{StaticResource EffectShadow3}">
+                        <Border Background="{DynamicResource DangerBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                        </Border>
                     </Border>
-                </Border>
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow4}">
-                    <Border Background="{DynamicResource AccentBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                    <Border Style="{StaticResource BorderRegion}" Effect="{StaticResource EffectShadow4}">
+                        <Border Background="{DynamicResource AccentBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
+                        </Border>
                     </Border>
-                </Border>
-                <Border Style="{StaticResource BorderRegion}" Width="200" Height="200"  Margin="0,0,32,32" Effect="{StaticResource EffectShadow5}">
-                    <Border Background="{DynamicResource BorderBrush}">
-                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                    <Border Style="{StaticResource BorderRegion}" Effect="{StaticResource EffectShadow5}">
+                        <Border Background="{DynamicResource BorderBrush}">
+                            <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+                        </Border>
                     </Border>
-                </Border>
-            </UniformGrid>
-            <Border Margin="32,0,32,10" Style="{StaticResource BorderTipPrimary}">
-                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
-            </Border>
-            <Border Margin="32,0,32,10" Style="{StaticResource BorderTipDanger}">
-                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
-            </Border>
-            <Border Margin="32,0,32,10" Style="{StaticResource BorderTipWarning}">
-                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
-            </Border>
-            <Border Margin="32,0,32,10" Style="{StaticResource BorderTipInfo}">
-                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
-            </Border>
-            <Border Margin="32,0,32,10" Style="{StaticResource BorderTipSuccess}">
-                <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
-            </Border>
-        </StackPanel>
+                </hc:UniformSpacingPanel>
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="10">
+                    <Border Style="{StaticResource BorderTipPrimary}">
+                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
+                    </Border>
+                    <Border Style="{StaticResource BorderTipDanger}">
+                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
+                    </Border>
+                    <Border Style="{StaticResource BorderTipWarning}">
+                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
+                    </Border>
+                    <Border Style="{StaticResource BorderTipInfo}">
+                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
+                    </Border>
+                    <Border Style="{StaticResource BorderTipSuccess}">
+                        <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.Title},Converter={StaticResource StringRepeatConverter},ConverterParameter=10}"/>
+                    </Border>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BrushDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BrushDemoCtl.xaml
index fc406aa0..69d22757 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BrushDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/BrushDemoCtl.xaml
@@ -4,40 +4,42 @@
              xmlns:hc="https://handyorg.github.io/handycontrol"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <UniformGrid Margin="24" VerticalAlignment="Center" Columns="4" Rows="7">
-            <Label Content="PrimaryBrush" Style="{StaticResource LabelPrimary}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkPrimaryBrush" Background="{DynamicResource DarkPrimaryBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel ChildWrapping="Wrap" ItemWidth="200" Margin="32" Spacing="16" VerticalAlignment="Center" MaxWidth="632">
+                <Label Content="PrimaryBrush" Style="{StaticResource LabelPrimary}"/>
+                <Label Content="DarkPrimaryBrush" Background="{DynamicResource DarkPrimaryBrush}" Foreground="White" BorderThickness="0"/>
 
-            <Label Content="DangerBrush" Style="{StaticResource LabelDanger}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkDangerBrush" Background="{DynamicResource DarkDangerBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
+                <Label Content="DangerBrush" Style="{StaticResource LabelDanger}"/>
+                <Label Content="DarkDangerBrush" Background="{DynamicResource DarkDangerBrush}" Foreground="White" BorderThickness="0"/>
 
-            <Label Content="WarningBrush" Style="{StaticResource LabelWarning}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkWarningBrush" Background="{DynamicResource DarkWarningBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
+                <Label Content="WarningBrush" Style="{StaticResource LabelWarning}"/>
+                <Label Content="DarkWarningBrush" Background="{DynamicResource DarkWarningBrush}" Foreground="White" BorderThickness="0"/>
 
-            <Label Content="InfoBrush" Style="{StaticResource LabelInfo}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkInfoBrush" Background="{DynamicResource DarkInfoBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
+                <Label Content="InfoBrush" Style="{StaticResource LabelInfo}"/>
+                <Label Content="DarkInfoBrush" Background="{DynamicResource DarkInfoBrush}" Foreground="White" BorderThickness="0"/>
 
-            <Label Content="SuccessBrush" Style="{StaticResource LabelSuccess}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkSuccessBrush" Background="{DynamicResource DarkSuccessBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
+                <Label Content="SuccessBrush" Style="{StaticResource LabelSuccess}"/>
+                <Label Content="DarkSuccessBrush" Background="{DynamicResource DarkSuccessBrush}" Foreground="White" BorderThickness="0"/>
 
-            <Label Content="AccentBrush" Background="{DynamicResource AccentBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkAccentBrush" Background="{DynamicResource DarkAccentBrush}" Foreground="White" BorderThickness="0" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="PrimaryTextBrush" Background="{DynamicResource PrimaryTextBrush}" Foreground="{DynamicResource ThirdlyTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="SecondaryTextBrush" BorderThickness="0" Background="{DynamicResource SecondaryTextBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="ThirdlyTextBrush" BorderThickness="0" Background="{DynamicResource ThirdlyTextBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="ReverseTextBrush" BorderThickness="0" Background="{DynamicResource ReverseTextBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="TextIconBrush" Background="{DynamicResource TextIconBrush}" Foreground="{DynamicResource ReverseTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="BorderBrush" BorderThickness="0" Background="{DynamicResource BorderBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="SecondaryBorderBrush" BorderThickness="0" Background="{DynamicResource SecondaryBorderBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="BackgroundBrush" BorderThickness="0" Background="{DynamicResource BackgroundBrush}" Foreground="{DynamicResource ReverseTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="RegionBrush" Background="{DynamicResource RegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="SecondaryRegionBrush" BorderThickness="0" Background="{DynamicResource SecondaryRegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="ThirdlyRegionBrush" Background="{DynamicResource ThirdlyRegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="TitleBrush" BorderThickness="0" Background="{DynamicResource TitleBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DefaultBrush" Background="{DynamicResource DefaultBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkDefaultBrush" BorderThickness="0" Background="{DynamicResource DarkDefaultBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkMaskBrush" BorderThickness="0" Background="{DynamicResource DarkMaskBrush}" Foreground="{DynamicResource PrimaryTextBrush}" Margin="8" HorizontalAlignment="Stretch"/>
-            <Label Content="DarkOpacityBrush" BorderThickness="0" Background="{DynamicResource DarkOpacityBrush}" Foreground="White" Margin="8" HorizontalAlignment="Stretch"/>
-        </UniformGrid>
+                <Label Content="AccentBrush" Background="{DynamicResource AccentBrush}" Foreground="White" BorderThickness="0"/>
+                <Label Content="DarkAccentBrush" Background="{DynamicResource DarkAccentBrush}" Foreground="White" BorderThickness="0"/>
+                <Label Content="PrimaryTextBrush" Background="{DynamicResource PrimaryTextBrush}" Foreground="{DynamicResource ThirdlyTextBrush}"/>
+                <Label Content="SecondaryTextBrush" BorderThickness="0" Background="{DynamicResource SecondaryTextBrush}" Foreground="White"/>
+                <Label Content="ThirdlyTextBrush" BorderThickness="0" Background="{DynamicResource ThirdlyTextBrush}" Foreground="White"/>
+                <Label Content="ReverseTextBrush" BorderThickness="0" Background="{DynamicResource ReverseTextBrush}" Foreground="White"/>
+                <Label Content="TextIconBrush" Background="{DynamicResource TextIconBrush}" Foreground="{DynamicResource ReverseTextBrush}"/>
+                <Label Content="BorderBrush" BorderThickness="0" Background="{DynamicResource BorderBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="SecondaryBorderBrush" BorderThickness="0" Background="{DynamicResource SecondaryBorderBrush}" Foreground="White"/>
+                <Label Content="BackgroundBrush" BorderThickness="0" Background="{DynamicResource BackgroundBrush}" Foreground="{DynamicResource ReverseTextBrush}"/>
+                <Label Content="RegionBrush" Background="{DynamicResource RegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="SecondaryRegionBrush" BorderThickness="0" Background="{DynamicResource SecondaryRegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="ThirdlyRegionBrush" Background="{DynamicResource ThirdlyRegionBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="TitleBrush" BorderThickness="0" Background="{DynamicResource TitleBrush}" Foreground="White"/>
+                <Label Content="DefaultBrush" Background="{DynamicResource DefaultBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="DarkDefaultBrush" BorderThickness="0" Background="{DynamicResource DarkDefaultBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="DarkMaskBrush" BorderThickness="0" Background="{DynamicResource DarkMaskBrush}" Foreground="{DynamicResource PrimaryTextBrush}"/>
+                <Label Content="DarkOpacityBrush" BorderThickness="0" Background="{DynamicResource DarkOpacityBrush}" Foreground="White"/>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/CheckBoxDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/CheckBoxDemoCtl.xaml
index c9ab0a61..bf497ae5 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/CheckBoxDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/CheckBoxDemoCtl.xaml
@@ -4,8 +4,7 @@
              xmlns:hc="https://handyorg.github.io/handycontrol"
              xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
-             Background="{DynamicResource RegionBrush}"
-             Width="400">
+             Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
         <StackPanel Margin="32" HorizontalAlignment="Center" VerticalAlignment="Center">
             <CheckBox Content="{ex:Lang Key={x:Static langs:LangKeys.CheckBox}}" IsChecked="True"/>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ExpanderDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ExpanderDemoCtl.xaml
index 967c77c6..402a78c8 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ExpanderDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ExpanderDemoCtl.xaml
@@ -6,63 +6,69 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              xmlns:hc="https://handyorg.github.io/handycontrol">
     <hc:TransitioningContentControl>
-        <WrapPanel Margin="16" HorizontalAlignment="Center" VerticalAlignment="Center">
-            <StackPanel Width="240" Margin="16">
-                <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
-                    <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
-                    <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
-                    <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
-                    <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
-                </Expander>
-            </StackPanel>
-            <StackPanel Width="240" Margin="16">
-                <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
-                    <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
-                    <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
-                    <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
-                </Expander>
-                <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
-                    <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
-                </Expander>
-            </StackPanel>
-            <StackPanel Height="240" Margin="16" Orientation="Horizontal">
-                <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
-                    <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
-                    <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
-                    <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
-                    <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
-                </Expander>
-            </StackPanel>
-            <StackPanel Height="240" Margin="16" Orientation="Horizontal">
-                <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
-                    <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
-                    <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
-                    <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
-                </Expander>
-                <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
-                    <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
-                </Expander>
-            </StackPanel>
-        </WrapPanel>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Margin="32" Spacing="32" ChildWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center">
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="32">
+                    <StackPanel Width="240">
+                        <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
+                            <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
+                            <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
+                            <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}">
+                            <Border Height="100" BorderThickness="1,0,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,0,4,4"/>
+                        </Expander>
+                    </StackPanel>
+                    <StackPanel Width="240">
+                        <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
+                            <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
+                            <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
+                            <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
+                        </Expander>
+                        <Expander Margin="0,4,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Up">
+                            <Border Height="100" BorderThickness="1,1,1,0" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,4,0,0"/>
+                        </Expander>
+                    </StackPanel>
+                </hc:UniformSpacingPanel>
+                <hc:UniformSpacingPanel Spacing="32" ChildWrapping="Wrap">
+                    <StackPanel Height="240" Orientation="Horizontal">
+                        <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
+                            <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
+                            <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
+                            <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Left">
+                            <Border Width="100" BorderThickness="1,1,0,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="4,0,0,4"/>
+                        </Expander>
+                    </StackPanel>
+                    <StackPanel Height="240" Orientation="Horizontal">
+                        <Expander Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
+                            <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
+                            <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
+                            <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
+                        </Expander>
+                        <Expander Margin="4,0,0,0" Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" ExpandDirection="Right">
+                            <Border Width="100" BorderThickness="0,1,1,1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" CornerRadius="0,4,4,0"/>
+                        </Expander>
+                    </StackPanel>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/GroupBoxDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/GroupBoxDemoCtl.xaml
index c3683aff..a02b5bc1 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/GroupBoxDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/GroupBoxDemoCtl.xaml
@@ -6,45 +6,37 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              xmlns:hc="https://handyorg.github.io/handycontrol">
     <hc:TransitioningContentControl>
-        <ScrollViewer>
-            <Grid Margin="32">
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition Height="Auto"/>
-                    <RowDefinition Height="Auto"/>
-                </Grid.RowDefinitions>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition/>
-                    <ColumnDefinition/>
-                </Grid.ColumnDefinitions>
-                <GroupBox Grid.Row="0" Grid.Column="0" Width="300" Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Margin="16">
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel ChildWrapping="Wrap" Margin="32" Spacing="32" ItemWidth="300">
+                <GroupBox Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10">
                     <Border Background="{DynamicResource RegionBrush}" CornerRadius="4">
                         <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     </Border>
                 </GroupBox>
-                <GroupBox Grid.Row="0" Grid.Column="1" Width="300" Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Margin="16" hc:TitleElement.TitlePlacement="Left">
+                <GroupBox Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" hc:TitleElement.TitlePlacement="Left">
                     <Border Background="{DynamicResource RegionBrush}" CornerRadius="4">
                         <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     </Border>
                 </GroupBox>
-                <GroupBox Grid.Row="1" Grid.Column="0" Width="300" Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Margin="16" Style="{StaticResource GroupBoxTab}">
+                <GroupBox Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Style="{StaticResource GroupBoxTab}">
                     <Border Background="{DynamicResource RegionBrush}" CornerRadius="4">
                         <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     </Border>
                 </GroupBox>
-                <GroupBox Grid.Row="1" Grid.Column="1" Width="300" Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Margin="16" Style="{StaticResource GroupBoxTab}" hc:TitleElement.TitlePlacement="Left">
+                <GroupBox Height="200" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Padding="10" Style="{StaticResource GroupBoxTab}" hc:TitleElement.TitlePlacement="Left">
                     <Border Background="{DynamicResource RegionBrush}" CornerRadius="4">
                         <TextBlock Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     </Border>
                 </GroupBox>
-                <GroupBox Grid.Row="2" Grid.Column="0" Width="300" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="16" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left">
-                    <TextBox/>
-                </GroupBox>
-                <GroupBox Grid.Row="2" VerticalAlignment="Bottom" Grid.Column="1" Width="300" hc:TitleElement.TitleWidth="100" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="16" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left" hc:TitleElement.TitlePlacement="Left">
-                    <ComboBox DataContext="{Binding InputElementDemo,Source={StaticResource Locator}}" ItemsSource="{Binding DataList}"/>
-                </GroupBox>
-            </Grid>
-        </ScrollViewer>
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="16">
+                    <GroupBox VerticalAlignment="Bottom" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left">
+                        <TextBox/>
+                    </GroupBox>
+                    <GroupBox VerticalAlignment="Bottom" hc:TitleElement.TitleWidth="100" Header="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource GroupBoxOriginal}" HorizontalContentAlignment="Left" hc:TitleElement.TitlePlacement="Left">
+                        <ComboBox DataContext="{Binding InputElementDemo,Source={StaticResource Locator}}" ItemsSource="{Binding DataList}"/>
+                    </GroupBox>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeComboBoxDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeComboBoxDemoCtl.xaml
index c8c55ec4..199cb261 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeComboBoxDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeComboBoxDemoCtl.xaml
@@ -7,7 +7,7 @@
              DataContext="{Binding InputElementDemo,Source={StaticResource Locator}}"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <ScrollViewer>
+        <hc:ScrollViewer IsInertiaEnabled="True">
             <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
                 <StackPanel>
                     <ComboBox hc:DropDownElement.ConsistentWidth="False" ItemsSource="{Binding DataList}" SelectedIndex="0"/>
@@ -40,6 +40,6 @@
                     <ComboBox ItemsSource="{Binding DataList}" IsEditable="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource ComboBoxExtend.Small}" Margin="0,16,0,0"/>
                 </StackPanel>
             </hc:UniformSpacingPanel>
-        </ScrollViewer>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeDatePickerDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeDatePickerDemoCtl.xaml
index 6b036c08..4e8d63d6 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeDatePickerDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeDatePickerDemoCtl.xaml
@@ -7,7 +7,7 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <ScrollViewer>
+        <hc:ScrollViewer IsInertiaEnabled="True">
             <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
                 <StackPanel>
                     <DatePicker SelectedDate="{x:Static system:DateTime.Now}"/>
@@ -30,6 +30,6 @@
                     <DatePicker Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource DatePickerExtend.Small}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
                 </StackPanel>
             </hc:UniformSpacingPanel>
-        </ScrollViewer>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativePasswordBoxDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativePasswordBoxDemoCtl.xaml
index f51ee3c5..58d92b99 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativePasswordBoxDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativePasswordBoxDemoCtl.xaml
@@ -6,27 +6,29 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
-            <StackPanel>
-                <PasswordBox Password="123456"/>
-                <PasswordBox Password="123456" IsEnabled="False" Margin="0,16,0,0"/>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
+                <StackPanel>
+                    <PasswordBox Password="123456"/>
+                    <PasswordBox Password="123456" IsEnabled="False" Margin="0,16,0,0"/>
 
-                <PasswordBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Password="123456" Margin="0,32,0,0" Style="{StaticResource PasswordBoxExtend}"/>
-                <PasswordBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource PasswordBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
+                    <PasswordBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Password="123456" Margin="0,32,0,0" Style="{StaticResource PasswordBoxExtend}"/>
+                    <PasswordBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource PasswordBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
 
-                <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource PasswordBoxExtend}" Margin="0,32,0,0" Password="123456"/>
-                <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource PasswordBoxExtend}" Margin="0,16,0,0"/>
-            </StackPanel>
-            <StackPanel>
-                <PasswordBox Password="123456" Style="{StaticResource PasswordBox.Small}"/>
-                <PasswordBox Password="123456" IsEnabled="False" Margin="0,16,0,0" Style="{StaticResource PasswordBox.Small}"/>
+                    <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource PasswordBoxExtend}" Margin="0,32,0,0" Password="123456"/>
+                    <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource PasswordBoxExtend}" Margin="0,16,0,0"/>
+                </StackPanel>
+                <StackPanel>
+                    <PasswordBox Password="123456" Style="{StaticResource PasswordBox.Small}"/>
+                    <PasswordBox Password="123456" IsEnabled="False" Margin="0,16,0,0" Style="{StaticResource PasswordBox.Small}"/>
 
-                <PasswordBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Password="123456" Margin="0,32,0,0" Style="{StaticResource PasswordBoxExtend.Small}"/>
-                <PasswordBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource PasswordBoxExtend.Small}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
+                    <PasswordBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Password="123456" Margin="0,32,0,0" Style="{StaticResource PasswordBoxExtend.Small}"/>
+                    <PasswordBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource PasswordBoxExtend.Small}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
 
-                <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource PasswordBoxExtend.Small}" Margin="0,32,0,0" Password="123456"/>
-                <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource PasswordBoxExtend.Small}" Margin="0,16,0,0"/>
-            </StackPanel>
-        </hc:UniformSpacingPanel>
+                    <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource PasswordBoxExtend.Small}" Margin="0,32,0,0" Password="123456"/>
+                    <PasswordBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource PasswordBoxExtend.Small}" Margin="0,16,0,0"/>
+                </StackPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeProgressBarDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeProgressBarDemoCtl.xaml
index 890e3624..b858aa8c 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeProgressBarDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeProgressBarDemoCtl.xaml
@@ -4,55 +4,36 @@
              Background="{DynamicResource RegionBrush}"
              xmlns:hc="https://handyorg.github.io/handycontrol">
     <hc:TransitioningContentControl>
-        <WrapPanel Margin="32" ItemWidth="600">
-            <StackPanel Orientation="Horizontal">
-                <StackPanel Width="400">
-                    <ProgressBar Value="20" Margin="0,0,0,10"/>
-                    <ProgressBar Style="{StaticResource ProgressBarSuccess}" Margin="0,0,0,10" Value="40"/>
-                    <ProgressBar Style="{StaticResource ProgressBarInfo}" Margin="0,0,0,10" Value="60"/>
-                    <ProgressBar Style="{StaticResource ProgressBarWarning}" Margin="0,0,0,10" Value="80"/>
-                    <ProgressBar Style="{StaticResource ProgressBarDanger}" Margin="0,0,0,10" Value="100" Maximum="200" IsIndeterminate="True"/>
-                </StackPanel>
-                <StackPanel Margin="10,0,0,0" Width="200" HorizontalAlignment="Left">
-                    <TextBlock Padding="0,2,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarPrimary" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarSuccess" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarInfo" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarWarning" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarDanger" HorizontalAlignment="Left"/>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel Width="400">
-                    <ProgressBar Style="{StaticResource ProgressBarPrimaryStripe}" Margin="0,0,0,10" Value="120" Maximum="200" />
-                    <ProgressBar Style="{StaticResource ProgressBarSuccessStripe}" Margin="0,0,0,10" Value="60" Maximum="200" />
-                    <ProgressBar Style="{StaticResource ProgressBarInfoStripe}" Margin="0,0,0,10" Value="50" Maximum="200" />
-                    <ProgressBar Style="{StaticResource ProgressBarWarningStripe}" Margin="0,0,0,10" Value="180" Maximum="200" />
-                    <ProgressBar Style="{StaticResource ProgressBarDangerStripe}" Margin="0,0,0,10" IsIndeterminate="True" Maximum="200" />
-                    <ProgressBar Style="{StaticResource ProgressBarFlat}" Margin="0,8,0,10" Value="110" Maximum="200" IsIndeterminate="True"/>
-                </StackPanel>
-                <StackPanel Margin="10,0,0,0" Width="200" HorizontalAlignment="Left">
-                    <TextBlock Padding="0,2,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarPrimaryStripe" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarSuccessStripe" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarInfoStripe" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarWarningStripe" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarDangerStripe" HorizontalAlignment="Left"/>
-                    <TextBlock Padding="0,12,0,3" Style="{StaticResource TextBlockDefault}" Text="ProgressBarFlat" HorizontalAlignment="Left"/>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal" Height="200">
-                <ProgressBar Value="20" Margin="0,0,10,0" Orientation="Vertical" Width="20"/>
-                <ProgressBar Style="{StaticResource ProgressBarSuccess}" Margin="0,0,10,0" Value="40" Orientation="Vertical" Width="20"/>
-                <ProgressBar Style="{StaticResource ProgressBarInfo}" Margin="0,0,10,0" Value="60" Orientation="Vertical" Width="20"/>
-                <ProgressBar Style="{StaticResource ProgressBarWarning}" Margin="0,0,10,0" Value="80" Orientation="Vertical" Width="20"/>
-                <ProgressBar Style="{StaticResource ProgressBarDanger}" Margin="0,0,10,0" Value="100" Maximum="200" IsIndeterminate="True" Width="20" Orientation="Vertical"/>
-                
-                <ProgressBar Style="{StaticResource ProgressBarPrimaryStripe}" Margin="10,0,10,0" Value="120" Maximum="200" Orientation="Vertical" Width="20" />
-                <ProgressBar Style="{StaticResource ProgressBarSuccessStripe}" Margin="0,0,10,0" Value="60" Maximum="200" Orientation="Vertical" Width="20" />
-                <ProgressBar Style="{StaticResource ProgressBarInfoStripe}" Margin="0,0,10,0" Value="50" Maximum="200" Orientation="Vertical" Width="20" />
-                <ProgressBar Style="{StaticResource ProgressBarWarningStripe}" Margin="0,0,10,0" Value="180" Maximum="200" Orientation="Vertical" Width="20" />
-                <ProgressBar Style="{StaticResource ProgressBarDangerStripe}" Margin="0,0,10,0" IsIndeterminate="True" Maximum="200" Orientation="Vertical" Width="20"/>
-                <ProgressBar Style="{StaticResource ProgressBarFlat}" Margin="0,0,10,0" Value="110" Maximum="200" IsIndeterminate="True" Orientation="Vertical" Width="4"/>
-            </StackPanel>
-        </WrapPanel>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Margin="32" Spacing="32" ChildWrapping="Wrap">
+                <hc:UniformSpacingPanel Spacing="10" ItemWidth="400" Orientation="Vertical">
+                    <ProgressBar Value="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarSuccess}" Value="40"/>
+                    <ProgressBar Style="{StaticResource ProgressBarInfo}" Value="60"/>
+                    <ProgressBar Style="{StaticResource ProgressBarWarning}" Value="80"/>
+                    <ProgressBar Style="{StaticResource ProgressBarDanger}" Value="100" Maximum="200" IsIndeterminate="True"/>
+                    <ProgressBar Style="{StaticResource ProgressBarPrimaryStripe}" Value="120" Maximum="200" />
+                    <ProgressBar Style="{StaticResource ProgressBarSuccessStripe}" Value="60" Maximum="200" />
+                    <ProgressBar Style="{StaticResource ProgressBarInfoStripe}" Value="50" Maximum="200" />
+                    <ProgressBar Style="{StaticResource ProgressBarWarningStripe}" Value="180" Maximum="200" />
+                    <ProgressBar Style="{StaticResource ProgressBarDangerStripe}" IsIndeterminate="True" Maximum="200" />
+                    <ProgressBar Style="{StaticResource ProgressBarFlat}" Value="110" Maximum="200" IsIndeterminate="True"/>
+                </hc:UniformSpacingPanel>
+                <hc:UniformSpacingPanel Spacing="10" ItemHeight="300">
+                    <ProgressBar Value="20" Orientation="Vertical" Width="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarSuccess}" Value="40" Orientation="Vertical" Width="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarInfo}" Value="60" Orientation="Vertical" Width="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarWarning}" Value="80" Orientation="Vertical" Width="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarDanger}" Value="100" Maximum="200" IsIndeterminate="True" Width="20" Orientation="Vertical"/>
+
+                    <ProgressBar Style="{StaticResource ProgressBarPrimaryStripe}" Value="120" Maximum="200" Orientation="Vertical" Width="20" />
+                    <ProgressBar Style="{StaticResource ProgressBarSuccessStripe}" Value="60" Maximum="200" Orientation="Vertical" Width="20" />
+                    <ProgressBar Style="{StaticResource ProgressBarInfoStripe}" Value="50" Maximum="200" Orientation="Vertical" Width="20" />
+                    <ProgressBar Style="{StaticResource ProgressBarWarningStripe}" Value="180" Maximum="200" Orientation="Vertical" Width="20" />
+                    <ProgressBar Style="{StaticResource ProgressBarDangerStripe}" IsIndeterminate="True" Maximum="200" Orientation="Vertical" Width="20"/>
+                    <ProgressBar Style="{StaticResource ProgressBarFlat}" Value="110" Maximum="200" IsIndeterminate="True" Orientation="Vertical" Width="4"/>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTabControlDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTabControlDemoCtl.xaml
index 02dafde3..add47557 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTabControlDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTabControlDemoCtl.xaml
@@ -6,9 +6,9 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <ScrollViewer>
-            <UniformGrid Rows="2" Columns="2" Margin="16">
-                <TabControl TabStripPlacement="Right" Margin="16" Width="400" Height="200">
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Margin="32" Spacing="32" ItemWidth="400" ItemHeight="200" MaxWidth="832" ChildWrapping="Wrap">
+                <TabControl TabStripPlacement="Right">
                     <TabItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" HeaderStringFormat="{}{0}1">
                         <Border Background="{DynamicResource PrimaryBrush}">
                             <TextBlock Style="{StaticResource TextBlockLargeBold}" Foreground="{DynamicResource TextIconBrush}">
@@ -50,7 +50,7 @@
                         </Border>
                     </TabItem>
                 </TabControl>
-                <TabControl Margin="16" Width="400" Height="200" Style="{StaticResource TabControlInLine}">
+                <TabControl Style="{StaticResource TabControlInLine}">
                     <TabItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" HeaderStringFormat="{}{0}1">
                         <Border Background="{DynamicResource PrimaryBrush}">
                             <TextBlock Style="{StaticResource TextBlockLargeBold}" Foreground="{DynamicResource TextIconBrush}">
@@ -92,7 +92,7 @@
                         </Border>
                     </TabItem>
                 </TabControl>
-                <TabControl TabStripPlacement="Left" Margin="16" Width="400" Height="200" Style="{StaticResource TabControlCapsule}">
+                <TabControl TabStripPlacement="Left" Style="{StaticResource TabControlCapsule}">
                     <TabItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" HeaderStringFormat="{}{0}1">
                         <Border Background="{DynamicResource PrimaryBrush}">
                             <TextBlock Style="{StaticResource TextBlockLargeBold}" Foreground="{DynamicResource TextIconBrush}">
@@ -134,7 +134,7 @@
                         </Border>
                     </TabItem>
                 </TabControl>
-                <TabControl TabStripPlacement="Bottom" Margin="16" Width="400" Height="200" Style="{StaticResource TabControlCapsuleSolid}">
+                <TabControl TabStripPlacement="Bottom" Style="{StaticResource TabControlCapsuleSolid}">
                     <TabItem Header="{ex:Lang Key={x:Static langs:LangKeys.Title}}" HeaderStringFormat="{}{0}1">
                         <Border Background="{DynamicResource PrimaryBrush}">
                             <TextBlock Style="{StaticResource TextBlockLargeBold}" Foreground="{DynamicResource TextIconBrush}">
@@ -176,7 +176,7 @@
                         </Border>
                     </TabItem>
                 </TabControl>
-            </UniformGrid>
-        </ScrollViewer>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTextBoxDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTextBoxDemoCtl.xaml
index bee7e215..12624bc0 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTextBoxDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/NativeTextBoxDemoCtl.xaml
@@ -6,25 +6,27 @@
              xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
-            <StackPanel>
-                <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
-                <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Margin="0,16,0,0" IsEnabled="False"/>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Spacing="32" Margin="32" ChildWrapping="Wrap">
+                <StackPanel>
+                    <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
+                    <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Margin="0,16,0,0" IsEnabled="False"/>
 
-                <TextBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource TextBoxExtend}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
-                <TextBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource TextBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
-                <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource TextBoxExtend}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
-                <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource TextBoxExtend}" Margin="0,16,0,0"/>
-            </StackPanel>
-            <StackPanel>
-                <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Style="{StaticResource TextBox.Small}"/>
-                <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Margin="0,16,0,0" IsEnabled="False" Style="{StaticResource TextBox.Small}"/>
+                    <TextBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource TextBoxExtend}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
+                    <TextBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource TextBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
+                    <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource TextBoxExtend}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
+                    <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource TextBoxExtend}" Margin="0,16,0,0"/>
+                </StackPanel>
+                <StackPanel>
+                    <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Style="{StaticResource TextBox.Small}"/>
+                    <TextBox Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}" Margin="0,16,0,0" IsEnabled="False" Style="{StaticResource TextBox.Small}"/>
 
-                <TextBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource TextBoxExtend.Small}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
-                <TextBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource TextBoxExtend.Small}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
-                <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource TextBoxExtend.Small}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
-                <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource TextBoxExtend.Small}" Margin="0,16,0,0"/>
-            </StackPanel>
-        </hc:UniformSpacingPanel>
+                    <TextBox hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Style="{StaticResource TextBoxExtend.Small}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
+                    <TextBox hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource TextBoxExtend.Small}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
+                    <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource TextBoxExtend.Small}" Margin="0,32,0,0" Text="{ex:Lang Key={x:Static langs:LangKeys.ContentDemoStr}}"/>
+                    <TextBox Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" hc:InfoElement.Necessary="True" Style="{StaticResource TextBoxExtend.Small}" Margin="0,16,0,0"/>
+                </StackPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/SliderDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/SliderDemoCtl.xaml
index 1094c1f5..d05a59dc 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/SliderDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/SliderDemoCtl.xaml
@@ -4,21 +4,23 @@
              xmlns:hc="https://handyorg.github.io/handycontrol"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <StackPanel Margin="32" Orientation="Horizontal">
-            <StackPanel>
-                <Slider Width="400" IsSnapToTickEnabled="True" Value="8"/>
-                <Slider Width="400" IsSnapToTickEnabled="True" Value="3" Margin="0,32,0,0" IsEnabled="False"/>
-                <Slider Width="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="10" SelectionEnd="80" Margin="0,32,0,0"/>
-                <Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Top" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight" Margin="0,32,0,0"/>
-                <Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Bottom" hc:TipElement.StringFormat="#0.00" Value="5" TickPlacement="Both" Margin="0,32,0,0"/>
-            </StackPanel>
-            <StackPanel Margin="32,0,0,0" Orientation="Horizontal">
-                <Slider Height="400" IsSnapToTickEnabled="True" Value="8" Orientation="Vertical"/>
-                <Slider Height="400" IsSnapToTickEnabled="True" Value="3" Margin="32,0,0,0" IsEnabled="False" Orientation="Vertical"/>
-                <Slider Height="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="20" SelectionEnd="80" Margin="32,0,0,0" Orientation="Vertical"/>
-                <Slider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Left" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight" Margin="32,0,0,0" Orientation="Vertical"/>
-                <Slider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Right" hc:TipElement.StringFormat="#0.00" Value="5" TickPlacement="Both" Margin="32,0" Orientation="Vertical"/>
-            </StackPanel>
-        </StackPanel>
+        <hc:ScrollViewer IsInertiaEnabled="True">
+            <hc:UniformSpacingPanel Margin="32" Orientation="Horizontal" Spacing="32" ClipToBounds="False" ChildWrapping="Wrap">
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="32">
+                    <Slider Width="400" IsSnapToTickEnabled="True" Value="8"/>
+                    <Slider Width="400" IsSnapToTickEnabled="True" Value="3" IsEnabled="False"/>
+                    <Slider Width="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="10" SelectionEnd="80"/>
+                    <Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Top" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight"/>
+                    <Slider Width="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Bottom" hc:TipElement.StringFormat="#0.00" Value="5" TickPlacement="Both"/>
+                </hc:UniformSpacingPanel>
+                <hc:UniformSpacingPanel Spacing="32">
+                    <Slider Height="400" IsSnapToTickEnabled="True" Value="8" Orientation="Vertical"/>
+                    <Slider Height="400" IsSnapToTickEnabled="True" Value="3" IsEnabled="False" Orientation="Vertical"/>
+                    <Slider Height="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="20" SelectionEnd="80" Orientation="Vertical"/>
+                    <Slider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Right" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight" Orientation="Vertical"/>
+                    <Slider Height="400" hc:TipElement.Visibility="Visible" hc:TipElement.Placement="Left" hc:TipElement.StringFormat="#0.00" Value="5" TickPlacement="Both" Orientation="Vertical"/>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
+        </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>