From 875b7f063230b8118e8ab2aad75de7be1acd5740 Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Sat, 16 Oct 2021 18:24:42 +0800
Subject: [PATCH] feat(style): add button small style

---
 .../HandyControl_Net_40/Themes/Theme.xaml     |  58 +++
 .../UserControl/Styles/ButtonDemoCtl.xaml     | 384 +++++++++++-------
 .../Themes/Styles/Button.xaml                 |  72 ++++
 .../HandyControl_Shared/Themes/Theme.xaml     |  58 +++
 4 files changed, 426 insertions(+), 146 deletions(-)

diff --git a/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml b/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
index 5383cc0b..9d52c7f6 100644
--- a/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
+++ b/src/Net_40/HandyControl_Net_40/Themes/Theme.xaml
@@ -3055,22 +3055,46 @@
 			</Trigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ButtonDefault.Small" BasedOn="{StaticResource ButtonDefault}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style BasedOn="{StaticResource ButtonDefault}" TargetType="Button" />
 	<Style x:Key="ButtonPrimary" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
 	</Style>
+	<Style x:Key="ButtonPrimary.Small" BasedOn="{StaticResource ButtonPrimary}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonSuccess" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource SuccessBrush}" />
 	</Style>
+	<Style x:Key="ButtonSuccess.Small" BasedOn="{StaticResource ButtonSuccess}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonInfo" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource InfoBrush}" />
 	</Style>
+	<Style x:Key="ButtonInfo.Small" BasedOn="{StaticResource ButtonInfo}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonWarning" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource WarningBrush}" />
 	</Style>
+	<Style x:Key="ButtonWarning.Small" BasedOn="{StaticResource ButtonWarning}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonDanger" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource DangerBrush}" />
 	</Style>
+	<Style x:Key="ButtonDanger.Small" BasedOn="{StaticResource ButtonDanger}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonIcon" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="Transparent" />
 		<Setter Property="BorderBrush" Value="Transparent" />
@@ -3088,11 +3112,16 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
+	<Style x:Key="ButtonIcon.Small" BasedOn="{StaticResource ButtonIcon}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonIconCircular" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Width" Value="{StaticResource DefaultControlHeight}" />
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
 		<Setter Property="BorderThickness" Value="1" />
 		<Setter Property="hc:BorderElement.CornerRadius" Value="0" />
+		<Setter Property="Padding" Value="6" />
 		<Setter Property="FocusVisualStyle">
 			<Setter.Value>
 				<Style>
@@ -3118,6 +3147,11 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
+	<Style x:Key="ButtonIconCircular.Small" BasedOn="{StaticResource ButtonIconCircular}" TargetType="Button">
+		<Setter Property="Width" Value="20" />
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="1" />
+	</Style>
 	<Style x:Key="ButtonDashed" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
 		<Style.Triggers>
@@ -3127,26 +3161,50 @@
 			</Trigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ButtonDashed.Small" BasedOn="{StaticResource ButtonDashed}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedPrimary" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedPrimary.Small" BasedOn="{StaticResource ButtonDashedPrimary}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedSuccess" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource SuccessBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource SuccessBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedSuccess.Small" BasedOn="{StaticResource ButtonDashedSuccess}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedInfo" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource InfoBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource InfoBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedInfo.Small" BasedOn="{StaticResource ButtonDashedInfo}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedWarning" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource WarningBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource WarningBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedWarning.Small" BasedOn="{StaticResource ButtonDashedWarning}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedDanger" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource DangerBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource DangerBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedDanger.Small" BasedOn="{StaticResource ButtonDashedDanger}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonCustom" BasedOn="{StaticResource BaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{x:Null}" />
 		<Setter Property="HorizontalContentAlignment" Value="Center" />
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ButtonDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ButtonDemoCtl.xaml
index 309ea6ff..324581b0 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ButtonDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Styles/ButtonDemoCtl.xaml
@@ -7,152 +7,244 @@
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
         <hc:ScrollViewer IsInertiaEnabled="True">
-            <StackPanel Margin="32">
-                <WrapPanel ItemWidth="160" ItemHeight="130">
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonPrimary"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonSuccess"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonInfo"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonWarning"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDanger"/>
-                    </StackPanel>
-                </WrapPanel>
-                <WrapPanel ItemWidth="160" ItemHeight="130">
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashed"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedPrimary"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedSuccess"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedInfo"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedWarning"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger}"/>
-                        <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger}"/>
-                        <TextBlock TextAlignment="Center" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedDanger"/>
-                    </StackPanel>
-                </WrapPanel>
-                <WrapPanel ItemWidth="160" ItemHeight="130">
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="Default（DeleteGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonPrimary（ClockGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonSuccess（CalendarGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonInfo（DownGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
-                        <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonWarning（LeftGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDanger（DeleteGeometry）"/>
-                    </StackPanel>
-                </WrapPanel>
-                <WrapPanel ItemWidth="160" ItemHeight="130">
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="DashedDefault（DeleteGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedPrimary（ClockGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
-                        <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedSuccess（CalendarGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Padding="15,7" Margin="5" Style="{StaticResource ButtonDashedInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
-                        <Button Width="50" Padding="15,7" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedInfo（DownGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Margin="5" Style="{StaticResource ButtonDashedWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
-                        <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedWarning（LeftGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonDashedDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonDashedDanger（DeleteGeometry）"/>
-                    </StackPanel>
-                </WrapPanel>
-                <WrapPanel ItemWidth="160" ItemHeight="130">
-                    <StackPanel>
-                        <Button Margin="5" Height="28" Padding="10,0" Background="#24292e" Foreground="White" Content="{ex:Lang Key={x:Static langs:LangKeys.ButtonCustom}}" Style="{StaticResource ButtonCustom}" hc:BackgroundSwitchElement.MouseHoverBackground="Red" hc:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>
-                        <Button Margin="5" Height="28" IsEnabled="False" Padding="10,0" Background="#24292e" Foreground="White" Content="{ex:Lang Key={x:Static langs:LangKeys.ButtonCustom}}" Style="{StaticResource ButtonCustom}" hc:BackgroundSwitchElement.MouseHoverBackground="Red" hc:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>
-                        <TextBlock TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonCustom"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
-                        <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonIcon（UpDownGeometry）"/>
-                    </StackPanel>
-                    <StackPanel>
-                        <Button Padding="7" Margin="5" Style="{StaticResource ButtonIconCircular}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
-                        <Button Padding="7" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIconCircular}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
-                        <TextBlock TextAlignment="Center" TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ButtonIconCircular（UpDownGeometry）"/>
-                    </StackPanel>
-                </WrapPanel>
-            </StackPanel>
+            <hc:UniformSpacingPanel ChildWrapping="Wrap" Spacing="32" Margin="32">
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="32">
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                            <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonDashedPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedPrimary}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonDashedSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedSuccess}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="15,7" Margin="5" Style="{StaticResource ButtonDashedInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                            <Button Width="50" Padding="15,7" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedInfo}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Margin="5" Style="{StaticResource ButtonDashedWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                            <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedWarning}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonDashedDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedDanger}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,8" Margin="5" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                            <Button Width="50" Padding="16,8" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Padding="7" Margin="5" Style="{StaticResource ButtonIconCircular}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                            <Button Padding="7" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIconCircular}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel Margin="16,0,0,0">
+                            <Button Margin="5" Height="28" Padding="10,0" Background="#24292e" Foreground="White" Content="{ex:Lang Key={x:Static langs:LangKeys.ButtonCustom}}" Style="{StaticResource ButtonCustom}" hc:BackgroundSwitchElement.MouseHoverBackground="Red" hc:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>
+                            <Button Margin="5" Height="28" IsEnabled="False" Padding="10,0" Background="#24292e" Foreground="White" Content="{ex:Lang Key={x:Static langs:LangKeys.ButtonCustom}}" Style="{StaticResource ButtonCustom}" hc:BackgroundSwitchElement.MouseHoverBackground="Red" hc:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>
+                        </StackPanel>
+                    </WrapPanel>
+                </hc:UniformSpacingPanel>
+                <hc:UniformSpacingPanel Orientation="Vertical" Spacing="32">
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDefault.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDefault.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonPrimary.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonSuccess.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonInfo.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonWarning.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDanger.Small}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Default}}" Margin="5" Style="{StaticResource ButtonDashed.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Primary}}" Margin="5" Style="{StaticResource ButtonDashedPrimary.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Success}}" Margin="5" Style="{StaticResource ButtonDashedSuccess.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Info}}" Margin="5" Style="{StaticResource ButtonDashedInfo.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Warning}}" Margin="5" Style="{StaticResource ButtonDashedWarning.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger.Small}"/>
+                            <Button IsEnabled="False" Content="{ex:Lang Key={x:Static langs:LangKeys.Danger}}" Margin="5" Style="{StaticResource ButtonDashedDanger.Small}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDefault.Small}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDefault.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonPrimary.Small}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonPrimary.Small}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonSuccess.Small}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonSuccess.Small}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" Style="{StaticResource ButtonInfo.Small}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" Style="{StaticResource ButtonInfo.Small}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Margin="5" Style="{StaticResource ButtonWarning.Small}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                            <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonWarning.Small}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" Style="{StaticResource ButtonDanger.Small}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDanger.Small}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed.Small}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" hc:IconElement.Geometry="{StaticResource DeleteGeometry}" Style="{StaticResource ButtonDashed.Small}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" Margin="5" Style="{StaticResource ButtonDashedPrimary.Small}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Clock}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedPrimary.Small}" hc:IconElement.Geometry="{StaticResource ClockGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" Margin="5" Style="{StaticResource ButtonDashedSuccess.Small}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                            <Button Content="{ex:Lang Key={x:Static langs:LangKeys.Calendar}}" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedSuccess.Small}" hc:IconElement.Geometry="{StaticResource CalendarGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="15,2" Margin="5" Style="{StaticResource ButtonDashedInfo.Small}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                            <Button Width="50" Padding="15,2" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedInfo.Small}" hc:IconElement.Geometry="{StaticResource DownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Margin="5" Style="{StaticResource ButtonDashedWarning.Small}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                            <Button Width="50" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedWarning.Small}" hc:IconElement.Geometry="{StaticResource LeftGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" Style="{StaticResource ButtonDashedDanger.Small}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" Style="{StaticResource ButtonDashedDanger.Small}" hc:IconElement.Geometry="{StaticResource DeleteGeometry}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                    <WrapPanel>
+                        <StackPanel>
+                            <Button Width="50" Padding="16,3" Margin="5" Style="{StaticResource ButtonIcon.Small}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                            <Button Width="50" Padding="16,3" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIcon.Small}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                        </StackPanel>
+                        <StackPanel>
+                            <Button Padding="2" Margin="5" Style="{StaticResource ButtonIconCircular.Small}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                            <Button Padding="2" IsEnabled="False" Margin="5" Style="{StaticResource ButtonIconCircular.Small}" hc:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+                        </StackPanel>
+                    </WrapPanel>
+                </hc:UniformSpacingPanel>
+            </hc:UniformSpacingPanel>
         </hc:ScrollViewer>
     </hc:TransitioningContentControl>
 </UserControl>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Button.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Button.xaml
index b0872208..29c87320 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/Button.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Button.xaml
@@ -17,28 +17,58 @@
         </Style.Triggers>
     </Style>
 
+    <Style x:Key="ButtonDefault.Small" BasedOn="{StaticResource ButtonDefault}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style BasedOn="{StaticResource ButtonDefault}" TargetType="Button"/>
 
     <Style x:Key="ButtonPrimary" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonPrimary.Small" BasedOn="{StaticResource ButtonPrimary}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <Style x:Key="ButtonSuccess" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource SuccessBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonSuccess.Small" BasedOn="{StaticResource ButtonSuccess}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <Style x:Key="ButtonInfo" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource InfoBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonInfo.Small" BasedOn="{StaticResource ButtonInfo}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <Style x:Key="ButtonWarning" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource WarningBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonWarning.Small" BasedOn="{StaticResource ButtonWarning}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <Style x:Key="ButtonDanger" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Background" Value="{DynamicResource DangerBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDanger.Small" BasedOn="{StaticResource ButtonDanger}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <!--endregion-->
 
     <!--region ButtonIcon-->
@@ -61,11 +91,17 @@
         </Setter>
     </Style>
 
+    <Style x:Key="ButtonIcon.Small" BasedOn="{StaticResource ButtonIcon}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,2"/>
+    </Style>
+
     <Style x:Key="ButtonIconCircular" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
         <Setter Property="Width" Value="{StaticResource DefaultControlHeight}"/>
         <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="hc:BorderElement.CornerRadius" Value="0"/>
+        <Setter Property="Padding" Value="6"/>
         <Setter Property="FocusVisualStyle">
             <Setter.Value>
                 <Style>
@@ -92,6 +128,12 @@
         </Setter>
     </Style>
 
+    <Style x:Key="ButtonIconCircular.Small" BasedOn="{StaticResource ButtonIconCircular}" TargetType="Button">
+        <Setter Property="Width" Value="20"/>
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="1"/>
+    </Style>
+
     <!--endregion-->
 
     <!--region ButtonDashed-->
@@ -106,31 +148,61 @@
         </Style.Triggers>
     </Style>
 
+    <Style x:Key="ButtonDashed.Small" BasedOn="{StaticResource ButtonDashed}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style x:Key="ButtonDashedPrimary" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDashedPrimary.Small" BasedOn="{StaticResource ButtonDashedPrimary}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style x:Key="ButtonDashedSuccess" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource SuccessBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource SuccessBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDashedSuccess.Small" BasedOn="{StaticResource ButtonDashedSuccess}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style x:Key="ButtonDashedInfo" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource InfoBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource InfoBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDashedInfo.Small" BasedOn="{StaticResource ButtonDashedInfo}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style x:Key="ButtonDashedWarning" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource WarningBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource WarningBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDashedWarning.Small" BasedOn="{StaticResource ButtonDashedWarning}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <Style x:Key="ButtonDashedDanger" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
         <Setter Property="Foreground" Value="{DynamicResource DangerBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource DangerBrush}"/>
     </Style>
 
+    <Style x:Key="ButtonDashedDanger.Small" BasedOn="{StaticResource ButtonDashedDanger}" TargetType="Button">
+        <Setter Property="Height" Value="20"/>
+        <Setter Property="Padding" Value="6,1"/>
+    </Style>
+
     <!--endregion-->
 
     <Style x:Key="ButtonCustom" BasedOn="{StaticResource BaseStyle}" TargetType="Button">
diff --git a/src/Shared/HandyControl_Shared/Themes/Theme.xaml b/src/Shared/HandyControl_Shared/Themes/Theme.xaml
index 72ad0053..a141c564 100644
--- a/src/Shared/HandyControl_Shared/Themes/Theme.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Theme.xaml
@@ -3055,22 +3055,46 @@
 			</Trigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ButtonDefault.Small" BasedOn="{StaticResource ButtonDefault}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style BasedOn="{StaticResource ButtonDefault}" TargetType="Button" />
 	<Style x:Key="ButtonPrimary" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
 	</Style>
+	<Style x:Key="ButtonPrimary.Small" BasedOn="{StaticResource ButtonPrimary}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonSuccess" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource SuccessBrush}" />
 	</Style>
+	<Style x:Key="ButtonSuccess.Small" BasedOn="{StaticResource ButtonSuccess}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonInfo" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource InfoBrush}" />
 	</Style>
+	<Style x:Key="ButtonInfo.Small" BasedOn="{StaticResource ButtonInfo}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonWarning" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource WarningBrush}" />
 	</Style>
+	<Style x:Key="ButtonWarning.Small" BasedOn="{StaticResource ButtonWarning}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonDanger" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{DynamicResource DangerBrush}" />
 	</Style>
+	<Style x:Key="ButtonDanger.Small" BasedOn="{StaticResource ButtonDanger}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonIcon" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="Transparent" />
 		<Setter Property="BorderBrush" Value="Transparent" />
@@ -3088,11 +3112,16 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
+	<Style x:Key="ButtonIcon.Small" BasedOn="{StaticResource ButtonIcon}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,2" />
+	</Style>
 	<Style x:Key="ButtonIconCircular" BasedOn="{StaticResource ButtonBaseStyle}" TargetType="Button">
 		<Setter Property="Width" Value="{StaticResource DefaultControlHeight}" />
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
 		<Setter Property="BorderThickness" Value="1" />
 		<Setter Property="hc:BorderElement.CornerRadius" Value="0" />
+		<Setter Property="Padding" Value="6" />
 		<Setter Property="FocusVisualStyle">
 			<Setter.Value>
 				<Style>
@@ -3118,6 +3147,11 @@
 			</Setter.Value>
 		</Setter>
 	</Style>
+	<Style x:Key="ButtonIconCircular.Small" BasedOn="{StaticResource ButtonIconCircular}" TargetType="Button">
+		<Setter Property="Width" Value="20" />
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="1" />
+	</Style>
 	<Style x:Key="ButtonDashed" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
 		<Style.Triggers>
@@ -3127,26 +3161,50 @@
 			</Trigger>
 		</Style.Triggers>
 	</Style>
+	<Style x:Key="ButtonDashed.Small" BasedOn="{StaticResource ButtonDashed}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedPrimary" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedPrimary.Small" BasedOn="{StaticResource ButtonDashedPrimary}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedSuccess" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource SuccessBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource SuccessBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedSuccess.Small" BasedOn="{StaticResource ButtonDashedSuccess}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedInfo" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource InfoBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource InfoBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedInfo.Small" BasedOn="{StaticResource ButtonDashedInfo}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedWarning" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource WarningBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource WarningBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedWarning.Small" BasedOn="{StaticResource ButtonDashedWarning}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonDashedDanger" BasedOn="{StaticResource ButtonDashedBaseStyle}" TargetType="Button">
 		<Setter Property="Foreground" Value="{DynamicResource DangerBrush}" />
 		<Setter Property="BorderBrush" Value="{DynamicResource DangerBrush}" />
 	</Style>
+	<Style x:Key="ButtonDashedDanger.Small" BasedOn="{StaticResource ButtonDashedDanger}" TargetType="Button">
+		<Setter Property="Height" Value="20" />
+		<Setter Property="Padding" Value="6,1" />
+	</Style>
 	<Style x:Key="ButtonCustom" BasedOn="{StaticResource BaseStyle}" TargetType="Button">
 		<Setter Property="Background" Value="{x:Null}" />
 		<Setter Property="HorizontalContentAlignment" Value="Center" />