From d145dee9c9779d5d533baad3a7ef92310f6b0d5d Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Mon, 25 Nov 2019 01:07:04 +0800
Subject: [PATCH 1/3] add Drawer demo

---
 .../HandyControlDemo_Core30.csproj            |  16 +-
 .../HandyControlDemo_Net_40.csproj            |   9 +-
 .../DrawerDemoCtl.xaml                        |  74 +++
 .../DrawerDemoCtl.xaml.cs                     |  10 +
 .../HandyControlDemo_Net_GE45.csproj          |  17 +
 .../Data/DemoInfo.json                        | 106 ++++
 .../Data/Model/DemoInfoModel.cs               |  34 ++
 .../Data/Model/DemoItemModel.cs               |  13 +
 .../HandyControlDemo_Shared.projitems         |   2 +
 .../MainWindow.xaml.cs                        |   1 -
 .../Properties/Langs/Lang.Designer.cs         |   9 +
 .../Properties/Langs/Lang.en.resx             |   3 +
 .../Properties/Langs/Lang.fa.resx             |   3 +
 .../Properties/Langs/Lang.fr.resx             |   3 +
 .../Properties/Langs/Lang.resx                |   3 +
 .../Img/LeftMainContent/View_Portrait_16x.png | Bin 0 -> 142 bytes
 .../Service/Data/DataService.cs               |  53 ++
 .../UserControl/Main/LeftMainContent.xaml     | 561 ++----------------
 .../UserControl/Main/LeftMainContent.xaml.cs  |  33 +-
 .../ViewModel/Main/MainViewModel.cs           |  60 +-
 .../Controls/Input/NumericUpDown.cs           |   2 +-
 .../Controls/Other/Drawer.cs                  | 276 +++++++++
 .../Controls/TabControl/TabControl.cs         |   2 +-
 .../Data/Enum/DrawerShowMode.cs               |   9 +
 .../HandyControl_Shared.projitems             |  10 +
 .../Themes/Styles/Base/BadgeBaseStyle.xaml    |   4 +-
 .../Themes/Styles/Base/DrawerBaseStyle.xaml   |  10 +
 .../Themes/Styles/Drawer.xaml                 |  10 +
 .../Themes/Styles/Style.xaml                  |   1 +
 29 files changed, 768 insertions(+), 566 deletions(-)
 create mode 100644 src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml
 create mode 100644 src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml.cs
 create mode 100644 src/Shared/HandyControlDemo_Shared/Data/DemoInfo.json
 create mode 100644 src/Shared/HandyControlDemo_Shared/Data/Model/DemoInfoModel.cs
 create mode 100644 src/Shared/HandyControlDemo_Shared/Data/Model/DemoItemModel.cs
 create mode 100644 src/Shared/HandyControlDemo_Shared/Resources/Img/LeftMainContent/View_Portrait_16x.png
 create mode 100644 src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
 create mode 100644 src/Shared/HandyControl_Shared/Data/Enum/DrawerShowMode.cs
 create mode 100644 src/Shared/HandyControl_Shared/Themes/Styles/Base/DrawerBaseStyle.xaml
 create mode 100644 src/Shared/HandyControl_Shared/Themes/Styles/Drawer.xaml

diff --git a/src/Core_30/HandyControlDemo_Core_30/HandyControlDemo_Core30.csproj b/src/Core_30/HandyControlDemo_Core_30/HandyControlDemo_Core30.csproj
index 66eac0be..e9ef66a4 100644
--- a/src/Core_30/HandyControlDemo_Core_30/HandyControlDemo_Core30.csproj
+++ b/src/Core_30/HandyControlDemo_Core_30/HandyControlDemo_Core30.csproj
@@ -49,6 +49,9 @@
     <ProjectReference Include="..\HandyControl_Core_30\HandyControl_Core_30.csproj" />
   </ItemGroup>
   <ItemGroup>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Data\DemoInfo.json">
+      <Link>Data\DemoInfo.json</Link>
+    </Resource>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Cover.png">
       <Link>Resources\Img\Cover.png</Link>
     </Resource>
@@ -166,10 +169,10 @@
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Flag\en.png">
       <Link>Resources\Img\Flag\en.png</Link>
     </Resource>
-     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Flag\fa.png">
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Flag\fa.png">
       <Link>Resources\Img\Flag\fa.png</Link>
     </Resource>
-     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Flag\fr.png">
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\Flag\fr.png">
       <Link>Resources\Img\Flag\fr.png</Link>
     </Resource>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\icon-white.ico">
@@ -442,15 +445,18 @@
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransitioningContentControl_16x.png">
       <Link>Resources\Img\LeftMainContent\TransitioningContentControl_16x.png</Link>
     </Resource>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
+      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
+    </Resource>
   </ItemGroup>
   <ItemGroup>
     <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.en.resx">
       <Link>Properties\Langs\Lang.en.resx</Link>
     </EmbeddedResource>
-     <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.fa.resx">
+    <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.fa.resx">
       <Link>Properties\Langs\Lang.fa.resx</Link>
     </EmbeddedResource>
-     <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.fr.resx">
+    <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.fr.resx">
       <Link>Properties\Langs\Lang.fr.resx</Link>
     </EmbeddedResource>
     <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.resx">
@@ -472,4 +478,4 @@
     </None>
   </ItemGroup>
   <Import Project="..\..\Shared\HandyControlDemo_Shared\HandyControlDemo_Shared.projitems" Label="Shared" />
-</Project>
+</Project>
\ No newline at end of file
diff --git a/src/Net_40/HandyControlDemo_Net_40/HandyControlDemo_Net_40.csproj b/src/Net_40/HandyControlDemo_Net_40/HandyControlDemo_Net_40.csproj
index 44e96af7..e5a658ad 100644
--- a/src/Net_40/HandyControlDemo_Net_40/HandyControlDemo_Net_40.csproj
+++ b/src/Net_40/HandyControlDemo_Net_40/HandyControlDemo_Net_40.csproj
@@ -430,6 +430,9 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
+      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
+    </Resource>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransitioningContentControl_16x.png">
       <Link>Resources\Img\LeftMainContent\TransitioningContentControl_16x.png</Link>
     </Resource>
@@ -509,7 +512,11 @@
       <Link>Resources\Img\LeftMainContent\RepeatButton_16x.png</Link>
     </Resource>
   </ItemGroup>
-  <ItemGroup />
+  <ItemGroup>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Data\DemoInfo.json">
+      <Link>Data\DemoInfo.json</Link>
+    </Resource>
+  </ItemGroup>
   <Import Project="..\..\Shared\HandyControlDemo_Shared\HandyControlDemo_Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>
\ No newline at end of file
diff --git a/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml b/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml
new file mode 100644
index 00000000..d637c9a5
--- /dev/null
+++ b/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml
@@ -0,0 +1,74 @@
+<UserControl x:Class="HandyControlDemo.UserControl.DrawerDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:hc="https://handyorg.github.io/handycontrol"
+             Background="{DynamicResource RegionBrush}">
+    <hc:TransitioningContentControl>
+        <hc:SimplePanel Margin="22">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition/>
+                    <ColumnDefinition/>
+                    <ColumnDefinition/>
+                </Grid.ColumnDefinitions>
+                <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="0" Content="Left" IsChecked="{Binding IsOpen,ElementName=DrawerLeft}"/>
+                <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="0" Grid.Column="1" Content="Top" IsChecked="{Binding IsOpen,ElementName=DrawerTop}"/>
+                <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" Content="Right" IsChecked="{Binding IsOpen,ElementName=DrawerRight}"/>
+                <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1" Content="Bottom" IsChecked="{Binding IsOpen,ElementName=DrawerBottom}"/>
+            </Grid>
+            <hc:Drawer Name="DrawerLeft" Dock="Left">
+                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/>
+                        <Button CommandTarget="{Binding}" Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/>
+                    </Grid>
+                </Border>
+            </hc:Drawer>
+            <hc:Drawer Name="DrawerTop" Dock="Top">
+                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/>
+                        <Button CommandTarget="{Binding}" Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/>
+                    </Grid>
+                </Border>
+            </hc:Drawer>
+            <hc:Drawer Name="DrawerRight" ShowMask="False">
+                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="1,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/>
+                        <Button CommandTarget="{Binding}" Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/>
+                    </Grid>
+                </Border>
+            </hc:Drawer>
+            <hc:Drawer Name="DrawerBottom" Dock="Bottom">
+                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderBrush="{DynamicResource BorderBrush}">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <TextBlock Margin="10,0,0,0" Text="Header" Style="{StaticResource TextBlockTitle}" HorizontalAlignment="Left"/>
+                        <Button CommandTarget="{Binding}" Command="hc:ControlCommands.Close" Grid.Row="0" HorizontalAlignment="Right" Foreground="{DynamicResource PrimaryTextBrush}" Style="{StaticResource ButtonIcon}" hc:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}"/>
+                    </Grid>
+                </Border>
+            </hc:Drawer>
+        </hc:SimplePanel>
+    </hc:TransitioningContentControl>
+</UserControl>
\ No newline at end of file
diff --git a/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml.cs b/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml.cs
new file mode 100644
index 00000000..81259d96
--- /dev/null
+++ b/src/Net_GE45/HandyControlDemo_Net_GE45/DrawerDemoCtl.xaml.cs
@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class DrawerDemoCtl
+    {
+        public DrawerDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/src/Net_GE45/HandyControlDemo_Net_GE45/HandyControlDemo_Net_GE45.csproj b/src/Net_GE45/HandyControlDemo_Net_GE45/HandyControlDemo_Net_GE45.csproj
index 5cf76e7a..97ae3d92 100644
--- a/src/Net_GE45/HandyControlDemo_Net_GE45/HandyControlDemo_Net_GE45.csproj
+++ b/src/Net_GE45/HandyControlDemo_Net_GE45/HandyControlDemo_Net_GE45.csproj
@@ -156,6 +156,9 @@
       <DesignTime>True</DesignTime>
       <DependentUpon>Lang.resx</DependentUpon>
     </Compile>
+    <Compile Include="DrawerDemoCtl.xaml.cs">
+      <DependentUpon>DrawerDemoCtl.xaml</DependentUpon>
+    </Compile>
   </ItemGroup>
   <ItemGroup>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\QQ\1.gif">
@@ -496,6 +499,9 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
+      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
+    </Resource>
     <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransitioningContentControl_16x.png">
       <Link>Resources\Img\LeftMainContent\TransitioningContentControl_16x.png</Link>
     </Resource>
@@ -580,6 +586,17 @@
       <Link>Resources\Registry.txt</Link>
     </Resource>
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Data\DemoInfo.json">
+      <Link>Data\DemoInfo.json</Link>
+    </Resource>
+  </ItemGroup>
+  <ItemGroup>
+    <Page Include="DrawerDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <Import Project="..\..\Shared\HandyControlDemo_Shared\HandyControlDemo_Shared.projitems" Label="Shared" />
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Data/DemoInfo.json b/src/Shared/HandyControlDemo_Shared/Data/DemoInfo.json
new file mode 100644
index 00000000..6c5f4f76
--- /dev/null
+++ b/src/Shared/HandyControlDemo_Shared/Data/DemoInfo.json
@@ -0,0 +1,106 @@
+[
+  {
+    "title": "Styles",
+    "demoItemList": [
+      [ "Brush", "BrushDemoCtl", "Brush_16x", "" ],
+      [ "Button", "ButtonDemoCtl", "ButtonClick_16x", "" ],
+      [ "RepeatButton", "RepeatButtonDemoCtl", "RepeatButton_16x", "" ],
+      [ "ToggleButton", "ToggleButtonDemoCtl", "Toggle_16x", "" ],
+      [ "RadioButton", "RadioButtonDemoCtl", "RadioButton_16x", "" ],
+      [ "CheckBox", "CheckBoxDemoCtl", "CheckBox_16x", "" ],
+      [ "ScrollViewer", "NativeScrollViewerDemoCtl", "ScrollBox_16x", "" ],
+      [ "Slider", "SliderDemoCtl", "Slider_16x", "" ],
+      [ "TextBlock", "TextBlockDemoCtl", "TextBlock_16x", "" ],
+      [ "TextBox", "NativeTextBoxDemoCtl", "TextBox_16x", "" ],
+      [ "ComboBox", "NativeComboBoxDemoCtl", "ComboBox_16x", "" ],
+      [ "PasswordBox", "NativePasswordBoxDemoCtl", "PasswordBox_16x", "" ],
+      [ "Expander", "ExpanderDemoCtl", "Expander_16x", "" ],
+      [ "ProgressBar", "NativeProgressBarDemoCtl", "ProgressBar_16x", "" ],
+      [ "Calendar", "CalendarDemoCtl", "Calendar_16x", "" ],
+      [ "DatePicker", "NativeDatePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "TabControl", "NativeTabControlDemoCtl", "TabPage_16x", "" ],
+      [ "DataGrid", "DataGridDemoCtl", "DataGrid_16x", "" ],
+      [ "TreeView", "TreeViewDemoCtl", "TreeView_16x", "" ],
+      [ "ListBox", "ListBoxDemoCtl", "ListBox_16x", "" ],
+      [ "ListView", "ListViewDemoCtl", "ListView_16x", "" ],
+      [ "GroupBox", "GroupBoxDemoCtl", "GroupBox_16x", "" ],
+      [ "Menu", "MenuDemoCtl", "ContextMenu_16x", "" ],
+      [ "RichTextBox", "RichTextBoxDemoCtl", "RichTextBox_16x", "" ],
+      [ "ToolBar", "ToolBarDemoCtl", "ToolBar_16x", "" ],
+      [ "Border", "BorderDemoCtl", "BorderElement_16x", "" ],
+      [ "Label", "LabelDemoCtl", "Label_16x", "" ]
+    ]
+  },
+  {
+    "title": "Controls",
+    "demoItemList": [
+      [ "FloatingBlock", "FloatingBlockDemoCtl", "thumbs_up", "" ],
+      [ "ImageBlock", "ImageBlockDemoCtl", "ImageStack_16x", "" ],
+      [ "Magnifier", "MagnifierDemoCtl", "Search_16x", "" ],
+      [ "Gravatar", "GravatarDemoCtl", "User_16x", "" ],
+      [ "Badge", "BadgeDemoCtl", "DotLarge_16x", "" ],
+      [ "GotoTop", "GotoTopDemoCtl", "GoToTop_16x", "" ],
+      [ "SplitButton", "SplitButtonDemoCtl", "SplitButton_16x", "1" ],
+      [ "ButtonGroup", "ButtonGroupDemoCtl", "ButtonGroup_16x", "" ],
+      [ "ProgressButton", "ProgressButtonDemoCtl", "ProgressButton_16x", "" ],
+      [ "ChatBubble", "ChatBubbleDemoCtl", "Bubble_16xLG", "" ],
+      [ "Poptip", "PoptipDemoCtl", "PopupCursor_16x", "1" ],
+      [ "NotifyIcon", "NotifyIconDemoCtl", "NotificationHub_16x", "" ],
+      [ "NumericUpDown", "NumericUpDownDemoCtl", "NumericListBox_16x", "" ],
+      [ "TextBox", "TextBoxDemoCtl", "TextBox_16x", "" ],
+      [ "ComboBox", "ComboBoxDemoCtl", "ComboBox_16x", "" ],
+      [ "PasswordBox", "PasswordBoxDemoCtl", "PasswordBox_16x", "" ],
+      [ "DatePicker", "DatePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "Clock", "ClockDemoCtl", "Time_color_16x", "" ],
+      [ "TimePicker", "TimePickerDemoCtl", "TimePicker_16x", "" ],
+      [ "CalendarWithClock", "CalendarWithClockDemoCtl", "Calendar_16x", "" ],
+      [ "DateTimePicker", "DateTimePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "Transfer", "TransferDemoCtl", "Transfer_16x", "" ],
+      [ "FlipClock", "FlipClockDemoCtl", "FlipVertical_16x", "" ],
+      [ "Rate", "RateDemoCtl", "Star", "" ],
+      [ "Shield", "ShieldDemoCtl", "Shield_16x", "" ],
+      [ "SearchBar", "SearchBarDemoCtl", "Search_16x", "" ],
+      [ "Tag", "TagDemoCtl", "Tag_16x", "" ],
+      [ "GifImage", "GifImageDemoCtl", "Animation_16x", "" ],
+      [ "OutlineText", "OutlineTextDemoCtl", "TextBlock_16x", "" ],
+      [ "RunningBlock", "RunningBlockDemoCtl", "Dynamic_16x", "" ],
+      [ "Card", "CardDemoCtl", "VSO_Card_16x", "" ],
+      [ "Divider", "DividerDemoCtl", "DottedSplitter_16x", "1" ],
+      [ "CirclePanel", "CirclePanelDemoCtl", "ColorWheel_16x", "" ],
+      [ "Grid", "GridDemoCtl", "GridPane_16x", "" ],
+      [ "WaterfallPanel", "WaterfallPanelDemoCtl", "Panel_16x", "" ],
+      [ "HoneycombPanel", "HoneycombPanelDemoCtl", "PolygonHexagon_16x", "" ],
+      [ "TransitioningContentControl", "TransitioningContentControlDemoCtl", "TransitioningContentControl_16x", "" ],
+      [ "Drawer", "DrawerDemoCtl", "View_Portrait_16x", "1" ],
+      [ "CoverView", "CoverViewDemoCtl", "DetailDataView_16x", "" ],
+      [ "CoverFlow", "CoverFlowDemoCtl", "LinearCarousel_16x", "" ],
+      [ "ProgressBar", "ProgressBarDemoCtl", "ProgressBar_16x", "" ],
+      [ "StepBar", "StepBarDemoCtl", "Flow_16x", "" ],
+      [ "Growl", "GrowlDemoCtl", "Message_16x", "" ],
+      [ "Loading", "LoadingDemoCtl", "Loading_Blue_16x", "" ],
+      [ "ImageBrowser", "ImageBrowserDemoCtl", "ImageBrowser_16x", "" ],
+      [ "ColorPicker", "ColorPickerDemoCtl", "ColorPalette_16x", "" ],
+      [ "Carousel", "CarouselDemoCtl", "Carousel_16x", "" ],
+      [ "CompareSlider", "CompareSliderDemoCtl", "SplitterControl_16x", "" ],
+      [ "PreviewSlider", "PreviewSliderDemoCtl", "HoverMenu_16x", "" ],
+      [ "RangeSlider", "RangeSliderDemoCtl", "brackets_Square_16xLG", "" ],
+      [ "TimeBar", "TimeBarDemoCtl", "Timeline_16x", "" ],
+      [ "Pagination", "PaginationDemoCtl", "Paginator_16x", "" ],
+      [ "AnimationPath", "AnimationPathDemoCtl", "Path_16x", "" ],
+      [ "TabControl", "TabControlDemoCtl", "TabPage_16x", "" ],
+      [ "SideMenu", "SideMenuDemoCtl", "MainMenuControl_16x", "" ],
+      [ "ScrollViewer", "ScrollViewerDemoCtl", "ScrollBox_16x", "" ],
+      [ "Sprite", "SpriteDemoCtl", "HandyControl", "" ],
+      [ "Notification", "NotificationDemoCtl", "Procedure_16x", "" ],
+      [ "Dialog", "DialogDemoCtl", "Dialog_16x", "" ],
+      [ "Window", "WindowDemoCtl", "WindowsForm_16x", "" ]
+    ]
+  },
+  {
+    "title": "Tools",
+    "demoItemList": [
+      [ "HatchBrushGenerator", "HatchBrushGeneratorDemoCtl", "DataGenerator_16x", "" ],
+      [ "Morphing Animation", "GeometryAnimationDemoCtl", "Animation_16x", "1" ]
+    ]
+  }
+]
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Data/Model/DemoInfoModel.cs b/src/Shared/HandyControlDemo_Shared/Data/Model/DemoInfoModel.cs
new file mode 100644
index 00000000..30149de4
--- /dev/null
+++ b/src/Shared/HandyControlDemo_Shared/Data/Model/DemoInfoModel.cs
@@ -0,0 +1,34 @@
+using System.Collections.Generic;
+using GalaSoft.MvvmLight;
+
+namespace HandyControlDemo.Data
+{
+    public class DemoInfoModel : ViewModelBase
+    {
+        private string _title;
+
+        public string Title
+        {
+            get => _title;
+#if netle40
+            set => Set(nameof(Title), ref _title, value);
+#else
+            set => Set(ref _title, value);
+#endif
+        }
+
+        private int _selectedIndex = -1;
+
+        public int SelectedIndex
+        {
+            get => _selectedIndex;
+#if netle40
+            set => Set(nameof(SelectedIndex), ref _selectedIndex, value);
+#else
+            set => Set(ref _selectedIndex, value);
+#endif   
+        }
+
+        public IList<DemoItemModel> DemoItemList { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Data/Model/DemoItemModel.cs b/src/Shared/HandyControlDemo_Shared/Data/Model/DemoItemModel.cs
new file mode 100644
index 00000000..e4c6501c
--- /dev/null
+++ b/src/Shared/HandyControlDemo_Shared/Data/Model/DemoItemModel.cs
@@ -0,0 +1,13 @@
+namespace HandyControlDemo.Data
+{
+    public class DemoItemModel
+    {
+        public string Name { get; set; }
+
+        public string TargetCtlName { get; set; }
+
+        public string ImageName { get; set; }
+
+        public bool IsNew { get; set; }
+    }
+}
diff --git a/src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems b/src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems
index ec4ff019..7ad8d822 100644
--- a/src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems
+++ b/src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems
@@ -21,6 +21,8 @@
     <Compile Include="$(MSBuildThisFileDirectory)Data\Model\AvatarModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Model\CoverViewDemoModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoDataModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoInfoModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoItemModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Model\StepBarDemoModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Model\TabControlDemoModel.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)MainWindow.xaml.cs">
diff --git a/src/Shared/HandyControlDemo_Shared/MainWindow.xaml.cs b/src/Shared/HandyControlDemo_Shared/MainWindow.xaml.cs
index ec24646f..b317b980 100644
--- a/src/Shared/HandyControlDemo_Shared/MainWindow.xaml.cs
+++ b/src/Shared/HandyControlDemo_Shared/MainWindow.xaml.cs
@@ -18,7 +18,6 @@ namespace HandyControlDemo
         {
             base.OnInitialized(e);
 
-            Messenger.Default.Send<object>(null, MessageToken.ClearLeftSelected);
             Messenger.Default.Send(true, MessageToken.FullSwitch);
             Messenger.Default.Send(AssemblyHelper.CreateInternalInstance($"UserControl.{MessageToken.OverView}"), MessageToken.LoadShowContent);
         }
diff --git a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.Designer.cs b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.Designer.cs
index 94bfcf21..0aa76e77 100644
--- a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.Designer.cs
+++ b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.Designer.cs
@@ -510,6 +510,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 抽屉 的本地化字符串。
+        /// </summary>
+        public static string Drawer {
+            get {
+                return ResourceManager.GetString("Drawer", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 邮箱 的本地化字符串。
         /// </summary>
diff --git a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.en.resx b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.en.resx
index 4ddc96ae..95647270 100644
--- a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.en.resx
+++ b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.en.resx
@@ -687,4 +687,7 @@
   <data name="TransitioningContentControl" xml:space="preserve">
     <value>TransitioningContentControl</value>
   </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fa.resx b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fa.resx
index b65b9415..f7c92746 100644
--- a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fa.resx
+++ b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fa.resx
@@ -687,4 +687,7 @@
   <data name="TransitioningContentControl" xml:space="preserve">
     <value>TransitioningContentControl</value>
   </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fr.resx b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fr.resx
index 2fe1a113..cd855df0 100644
--- a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fr.resx
+++ b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.fr.resx
@@ -687,4 +687,7 @@
   <data name="TransitioningContentControl" xml:space="preserve">
     <value>TransitioningContentControl</value>
   </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.resx b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.resx
index 2bd0b2f2..813ca2e5 100644
--- a/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.resx
+++ b/src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.resx
@@ -687,4 +687,7 @@
   <data name="TransitioningContentControl" xml:space="preserve">
     <value>内容过渡控件</value>
   </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>抽屉</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/Resources/Img/LeftMainContent/View_Portrait_16x.png b/src/Shared/HandyControlDemo_Shared/Resources/Img/LeftMainContent/View_Portrait_16x.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e998c6bf8a1bfae3a172a95a596738131138689
GIT binary patch
literal 142
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F5he4R}c>anMprC`N
zi(^Pd+}q2Bd<+U4%ntXj{r~S8yX#R?VUS6$w2G{ySk$u#Tdx0j#l&zYjepCn#VrS3
me&SbXWcd<)?X=4EN`@nj`jgw<FP;E2i^0>?&t;ucLK6TA-Y|&(

literal 0
HcmV?d00001

diff --git a/src/Shared/HandyControlDemo_Shared/Service/Data/DataService.cs b/src/Shared/HandyControlDemo_Shared/Service/Data/DataService.cs
index 8e753131..c317945b 100644
--- a/src/Shared/HandyControlDemo_Shared/Service/Data/DataService.cs
+++ b/src/Shared/HandyControlDemo_Shared/Service/Data/DataService.cs
@@ -2,8 +2,10 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Globalization;
+using System.IO;
 using System.Linq;
 using System.Net;
+using System.Windows;
 using HandyControl.Data;
 using HandyControlDemo.Data;
 using HandyControlDemo.Tools.Converter;
@@ -341,5 +343,56 @@ namespace HandyControlDemo.Service
                 }
             };
         }
+
+        internal List<DemoInfoModel> GetDemoInfo()
+        {
+            var infoList = new List<DemoInfoModel>();
+
+            var stream = Application.GetResourceStream(new Uri("Data/DemoInfo.json", UriKind.Relative))?.Stream;
+            if (stream == null) return infoList;
+
+            string jsonStr;
+            using (var reader = new StreamReader(stream))
+            {
+                jsonStr = reader.ReadToEnd();
+            }
+
+            var jsonObj = JsonConvert.DeserializeObject<dynamic>(jsonStr);
+            foreach (var item in jsonObj)
+            {
+                var title = Properties.Langs.Lang.ResourceManager.GetString((string)item.title);
+                var list = Convert2DemoItemList(item.demoItemList);
+                infoList.Add(new DemoInfoModel
+                {
+                    Title = title,
+                    DemoItemList = list
+                });
+            }
+
+            return infoList;
+        }
+
+        private List<DemoItemModel> Convert2DemoItemList(dynamic list)
+        {
+            var resultList = new List<DemoItemModel>();
+
+            foreach (var item in list)
+            {
+                var name = Properties.Langs.Lang.ResourceManager.GetString((string)item[0]);
+                string targetCtlName = item[1];
+                string imageName = item[2];
+                var isNew = !string.IsNullOrEmpty((string)item[3]);
+
+                resultList.Add(new DemoItemModel
+                {
+                    Name = name,
+                    TargetCtlName = targetCtlName,
+                    ImageName = $"../../Resources/Img/LeftMainContent/{imageName}.png",
+                    IsNew = isNew
+                });
+            }
+
+            return resultList;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml
index 3fd46ca8..36596d31 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml
@@ -3,529 +3,66 @@
         xmlns:command="http://www.galasoft.ch/mvvmlight"
         x:Class="HandyControlDemo.UserControl.LeftMainContent"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:data="clr-namespace:HandyControlDemo.Data"
         Background="{Binding Background,RelativeSource={RelativeSource AncestorType=Window}}"
         xmlns:hc="https://handyorg.github.io/handycontrol"
         xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+    <Border.Resources>
+        <Style x:Key="DemoInfoSortButtonStyle" BasedOn="{StaticResource ToggleButtonCustom}" TargetType="ToggleButton" x:Shared="False">
+            <Setter Property="Content">
+                <Setter.Value>
+                    <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
+                        <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
+                    </Border>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="hc:StatusSwitchElement.CheckedElement">
+                <Setter.Value>
+                    <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Border.Resources>
     <DockPanel>
         <Button Command="{Binding OpenOverviewCmd}" DockPanel.Dock="Top" HorizontalAlignment="Stretch" Margin="4,4,4,0" Content="{x:Static langs:Lang.Overview}"/>
-        <TabControl SelectionChanged="TabControl_OnSelectionChanged" Style="{StaticResource TabControlInLine}" Background="Transparent" >
+        <TabControl SelectionChanged="TabControl_OnSelectionChanged" ItemsSource="{Binding DemoInfoList}" Style="{StaticResource TabControlInLine}" Background="Transparent" SelectedIndex="0">
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock Text="{Binding Title}"/>
+                </DataTemplate>
+            </TabControl.ItemTemplate>
+            <TabControl.ContentTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+                        <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxDemo}"/>
+                        <ToggleButton Tag="{Binding ElementName=ListBoxDemo}" Name="ButtonStyleAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource DemoInfoSortButtonStyle}"/>
+                        <ListBox Name="ListBoxDemo" SelectedIndex="{Binding SelectedIndex}" ItemsSource="{Binding DemoItemList}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
+                            <ListBox.ItemTemplate>
+                                <DataTemplate>
+                                    <StackPanel Orientation="Horizontal">
+                                        <Image Width="16" Height="16" Source="{Binding ImageName}"/>
+                                        <TextBlock Margin="6,0,0,0" Text="{Binding Name}"/>
+                                        <Path Visibility="{Binding IsNew,Converter={StaticResource Boolean2VisibilityConverter}}" VerticalAlignment="Center" Data="{StaticResource NewGeometry}" Stretch="Uniform" Margin="10,0,0,0" Width="30" Height="14" Fill="{DynamicResource DangerBrush}"/>
+                                    </StackPanel>
+                                </DataTemplate>
+                            </ListBox.ItemTemplate>
+                        </ListBox>
+                    </Grid>
+                </DataTemplate>
+            </TabControl.ContentTemplate>
             <i:Interaction.Triggers>
                 <i:EventTrigger EventName="SelectionChanged">
                     <command:EventToCommand Command="{Binding SwitchDemoCmd}" PassEventArgsToCommand="True" />
                 </i:EventTrigger>
             </i:Interaction.Triggers>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Styles}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxStyle}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxStyle}" Name="ButtonStyleAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxStyle" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BrushDemoCtl}" Content="{x:Static langs:Lang.Brush}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Brush_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ButtonDemoCtl}" Content="{x:Static langs:Lang.Button}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ButtonClick_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RepeatButtonDemoCtl}" Content="{x:Static langs:Lang.RepeatButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RepeatButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ToggleButtonDemoCtl}" Content="{x:Static langs:Lang.ToggleButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Toggle_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RadioButtonDemoCtl}" Content="{x:Static langs:Lang.RadioButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RadioButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CheckBoxDemoCtl}" Content="{x:Static langs:Lang.CheckBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/CheckBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SliderDemoCtl}" Content="{x:Static langs:Lang.Slider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Slider_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TextBlockDemoCtl}" Content="{x:Static langs:Lang.TextBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeTextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativePasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ExpanderDemoCtl}" Content="{x:Static langs:Lang.Expander}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Expander_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CalendarDemoCtl}" Content="{x:Static langs:Lang.Calendar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeDatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeTabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DataGridDemoCtl}" Content="{x:Static langs:Lang.DataGrid}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DataGrid_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TreeViewDemoCtl}" Content="{x:Static langs:Lang.TreeView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TreeView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ListBoxDemoCtl}" Content="{x:Static langs:Lang.ListBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ListBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ListViewDemoCtl}" Content="{x:Static langs:Lang.ListView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ListView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GroupBoxDemoCtl}" Content="{x:Static langs:Lang.GroupBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GroupBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.MenuDemoCtl}" Content="{x:Static langs:Lang.Menu}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ContextMenu_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RichTextBoxDemoCtl}" Content="{x:Static langs:Lang.RichTextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RichTextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ToolBarDemoCtl}" Content="{x:Static langs:Lang.ToolBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ToolBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Name="ListBoxItemBorder">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/BorderElement_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.LabelDemoCtl}" Content="{x:Static langs:Lang.Label}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Label_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-
-                    </ListBox>
-                </Grid>
-            </TabItem>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Controls}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxControl}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxControl}" Name="ButtonControlAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxControl" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.FloatingBlockDemoCtl}" Content="{x:Static langs:Lang.FloatingBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/thumbs_up.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ImageBlockDemoCtl}" Content="{x:Static langs:Lang.ImageBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ImageStack_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.MagnifierDemoCtl}" Content="{x:Static langs:Lang.Magnifier}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GravatarDemoCtl}" Content="{x:Static langs:Lang.Gravatar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/User_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BadgeDemoCtl}" Content="{x:Static langs:Lang.Badge}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DotLarge_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GotoTopDemoCtl}" Content="{x:Static langs:Lang.GotoTop}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GoToTop_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.SplitButtonDemoCtl}" Content="{x:Static langs:Lang.SplitButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/SplitButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ButtonGroupDemoCtl}" Content="{x:Static langs:Lang.ButtonGroup}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ButtonGroup_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ProgressButtonDemoCtl}" Content="{x:Static langs:Lang.ProgressButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ChatBubbleDemoCtl}" Content="{x:Static langs:Lang.ChatBubble}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Bubble_16xLG.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.PoptipDemoCtl}" Content="{x:Static langs:Lang.Poptip}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PopupCursor_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NotifyIconDemoCtl}" Content="{x:Static langs:Lang.NotifyIcon}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/NotificationHub_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ClockDemoCtl}" Content="{x:Static langs:Lang.Clock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Time_color_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TimePickerDemoCtl}" Content="{x:Static langs:Lang.TimePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TimePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CalendarWithClockDemoCtl}" Content="{x:Static langs:Lang.CalendarWithClock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DateTimePickerDemoCtl}" Content="{x:Static langs:Lang.DateTimePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TransferDemoCtl}" Content="{x:Static langs:Lang.Transfer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Transfer_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.FlipClockDemoCtl}" Content="{x:Static langs:Lang.FlipClock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Star.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ShieldDemoCtl}" Content="{x:Static langs:Lang.Shield}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Shield_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SearchBarDemoCtl}" Content="{x:Static langs:Lang.SearchBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TagDemoCtl}" Content="{x:Static langs:Lang.Tag}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Tag_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GifImageDemoCtl}" Content="{x:Static langs:Lang.GifImage}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.OutlineTextDemoCtl}" Content="{x:Static langs:Lang.OutlineText}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RunningBlockDemoCtl}" Content="{x:Static langs:Lang.RunningBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Dynamic_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CardDemoCtl}" Content="{x:Static langs:Lang.Card}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/VSO_Card_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.DividerDemoCtl}" Content="{x:Static langs:Lang.Divider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DottedSplitter_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GridDemoCtl}" Content="{x:Static langs:Lang.Grid}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GridPane_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.WaterfallPanelDemoCtl}" Content="{x:Static langs:Lang.WaterfallPanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Panel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.HoneycombPanelDemoCtl}" Content="{x:Static langs:Lang.HoneycombPanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PolygonHexagon_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TransitioningContentControlDemoCtl}" Content="{x:Static langs:Lang.TransitioningContentControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TransitioningContentControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CoverViewDemoCtl}" Content="{x:Static langs:Lang.CoverView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DetailDataView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CoverFlowDemoCtl}" Content="{x:Static langs:Lang.CoverFlow}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/LinearCarousel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Flow_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GrowlDemoCtl}" Content="{x:Static langs:Lang.Growl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Message_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.LoadingDemoCtl}" Content="{x:Static langs:Lang.Loading}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Loading_Blue_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ImageBrowserDemoCtl}" Content="{x:Static langs:Lang.ImageBrowser}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ImageBrowser_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ColorPickerDemoCtl}" Content="{x:Static langs:Lang.ColorPicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ColorPalette_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CarouselDemoCtl}" Content="{x:Static langs:Lang.Carousel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Carousel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CompareSliderDemoCtl}" Content="{x:Static langs:Lang.CompareSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/SplitterControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PreviewSliderDemoCtl}" Content="{x:Static langs:Lang.PreviewSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/HoverMenu_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RangeSliderDemoCtl}" Content="{x:Static langs:Lang.RangeSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/brackets_Square_16xLG.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TimeBarDemoCtl}" Content="{x:Static langs:Lang.TimeBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Timeline_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PaginationDemoCtl}" Content="{x:Static langs:Lang.Pagination}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Paginator_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.AnimationPathDemoCtl}" Content="{x:Static langs:Lang.AnimationPath}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Path_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SideMenuDemoCtl}" Content="{x:Static langs:Lang.SideMenu}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/MainMenuControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SpriteDemoCtl}" Content="{x:Static langs:Lang.Sprite}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/HandyControl.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NotificationDemoCtl}" Content="{x:Static langs:Lang.Notification}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Procedure_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DialogDemoCtl}" Content="{x:Static langs:Lang.Dialog}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Dialog_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/WindowsForm_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                    </ListBox>
-                </Grid>
-            </TabItem>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Tools}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxStyle}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxTool}" Name="ButtonToolAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxTool" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Tag="{x:Static data:MessageToken.HatchBrushGeneratorDemoCtl}" Content="{x:Static langs:Lang.HatchBrushGenerator}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DataGenerator_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GeometryAnimationDemoCtl}" Content="{x:Static langs:Lang.Morphing_Animation}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                    </ListBox>
-                </Grid>
-            </TabItem>
         </TabControl>
     </DockPanel>
 </Border>
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml.cs b/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml.cs
index b99fe9c9..7826a952 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml.cs
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml.cs
@@ -1,11 +1,10 @@
 using System.ComponentModel;
-using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
 using HandyControl.Data;
-using HandyControl.Tools;
 using HandyControl.Tools.Extension;
+using HandyControlDemo.Data;
 
 
 namespace HandyControlDemo.UserControl
@@ -18,27 +17,16 @@ namespace HandyControlDemo.UserControl
         public LeftMainContent()
         {
             InitializeComponent();
-
-            /*You have to ask me why I made Border special.
-             What drives me crazy is that if you don't do this, 
-             the content of ListBoxItemBorder will always be 1 ! 
-             How amazing!
-             I wish someone could tell me why. */
-            ListBoxItemBorder.Content = Properties.Langs.Lang.Border;
         }
 
         private void TabControl_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
         {
             if (e.AddedItems.Count == 0) return;
-            if (e.AddedItems[0] is TabItem tabItem && 
-                VisualHelper.GetChild<ListBox>(tabItem.Content as DependencyObject) is ListBox listBox)
+            if (e.AddedItems[0] is DemoInfoModel demoInfo)
             {
-                if (listBox.SelectedItem != null)
-                {
-                    var item = listBox.SelectedItem;
-                    listBox.SelectedIndex = -1;
-                    listBox.SelectedItem = item;
-                }
+                var selectedIndex = demoInfo.SelectedIndex;
+                demoInfo.SelectedIndex = -1;
+                demoInfo.SelectedIndex = selectedIndex;
             }
         }
 
@@ -48,7 +36,7 @@ namespace HandyControlDemo.UserControl
             {
                 if (button.IsChecked == true)
                 {
-                    itemsControl.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
+                    itemsControl.Items.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
                 }
                 else
                 {
@@ -61,11 +49,12 @@ namespace HandyControlDemo.UserControl
         {
             if (e.Info == null) return;
             if (!(sender is FrameworkElement searchBar && searchBar.Tag is ListBox listBox)) return;
-            foreach (var listBoxItem in listBox.Items.OfType<ListBoxItem>())
+            foreach (DemoItemModel item in listBox.Items)
             {
-                listBoxItem.Show(listBoxItem.Content.ToString().ToLower().Contains(e.Info.ToLower()) ||
-                                 listBoxItem.Tag.ToString().Replace("DemoCtl", "").ToLower().Contains(e.Info.ToLower()));
+                var listBoxItem = listBox.ItemContainerGenerator.ContainerFromItem(item) as ListBoxItem;
+                listBoxItem?.Show(item.Name.ToLower().Contains(e.Info.ToLower()) ||
+                                  item.TargetCtlName.Replace("DemoCtl", "").ToLower().Contains(e.Info.ToLower()));
             }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/ViewModel/Main/MainViewModel.cs b/src/Shared/HandyControlDemo_Shared/ViewModel/Main/MainViewModel.cs
index 939d32e2..755d2e9e 100644
--- a/src/Shared/HandyControlDemo_Shared/ViewModel/Main/MainViewModel.cs
+++ b/src/Shared/HandyControlDemo_Shared/ViewModel/Main/MainViewModel.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Windows.Controls;
 #if netle40
 using GalaSoft.MvvmLight.Command;
@@ -29,9 +30,14 @@ namespace HandyControlDemo.ViewModel
         private object _subContent;
 
         /// <summary>
-        ///     当前选中的列表项
+        ///     demo信息
         /// </summary>
-        private ListBoxItem _listBoxItemCurrent;
+        private List<DemoInfoModel> _demoInfoList;
+
+        /// <summary>
+        ///     当前选中的demo项
+        /// </summary>
+        private DemoItemModel _demoItemCurrent;
 
         #endregion
 
@@ -45,13 +51,18 @@ namespace HandyControlDemo.ViewModel
                 }
                 SubContent = obj;
             });
+
             Messenger.Default.Register<object>(this, MessageToken.ClearLeftSelected, obj =>
             {
-                if (_listBoxItemCurrent == null) return;
-                _listBoxItemCurrent.IsSelected = false;
-                _listBoxItemCurrent = null;
+                _demoItemCurrent = null;
+                foreach (var item in DemoInfoList)
+                {
+                    item.SelectedIndex = -1;
+                }
             });
+
             DataList = dataService.GetDemoDataList();
+            DemoInfoList = dataService.GetDemoInfo();
         }
 
         #region 属性
@@ -82,6 +93,19 @@ namespace HandyControlDemo.ViewModel
 #endif
         }
 
+        /// <summary>
+        ///     demo信息
+        /// </summary>
+        public List<DemoInfoModel> DemoInfoList
+        {
+            get => _demoInfoList;
+#if netle40
+            set => Set(nameof(DemoInfoList), ref _demoInfoList, value);
+#else
+            set => Set(ref _demoInfoList, value);
+#endif
+        }
+
         #endregion
 
         #region 命令
@@ -115,24 +139,16 @@ namespace HandyControlDemo.ViewModel
         private void SwitchDemo(SelectionChangedEventArgs e)
         {
             if (e.AddedItems.Count == 0) return;
-            if (e.AddedItems[0] is ListBoxItem item)
+            if (e.AddedItems[0] is DemoItemModel item)
             {
-                if (item.Tag is string tag)
-                {
-                    if (Equals(_listBoxItemCurrent, item)) return;
-                    _listBoxItemCurrent = item;
-                    ContentTitle = item.Content;
-                    var obj = AssemblyHelper.ResolveByKey(tag);
-                    var ctl = obj ?? AssemblyHelper.CreateInternalInstance($"UserControl.{tag}");
-                    Messenger.Default.Send(ctl is IFull, MessageToken.FullSwitch);
-                    Messenger.Default.Send(ctl, MessageToken.LoadShowContent);
-                }
-                else
-                {
-                    _listBoxItemCurrent = null;
-                    ContentTitle = null;
-                    SubContent = null;
-                }
+                if (Equals(_demoItemCurrent, item)) return;
+
+                _demoItemCurrent = item;
+                ContentTitle = item.Name;
+                var obj = AssemblyHelper.ResolveByKey(item.TargetCtlName);
+                var ctl = obj ?? AssemblyHelper.CreateInternalInstance($"UserControl.{item.TargetCtlName}");
+                Messenger.Default.Send(ctl is IFull, MessageToken.FullSwitch);
+                Messenger.Default.Send(ctl, MessageToken.LoadShowContent);
             }
         }
 
diff --git a/src/Shared/HandyControl_Shared/Controls/Input/NumericUpDown.cs b/src/Shared/HandyControl_Shared/Controls/Input/NumericUpDown.cs
index 761fa2d9..46a9ce1f 100644
--- a/src/Shared/HandyControl_Shared/Controls/Input/NumericUpDown.cs
+++ b/src/Shared/HandyControl_Shared/Controls/Input/NumericUpDown.cs
@@ -43,7 +43,7 @@ namespace HandyControl.Controls
             }));
             CommandBindings.Add(new CommandBinding(ControlCommands.Clear, (s, e) =>
             {
-                SetCurrentValue(ValueProperty, 0d);
+                SetCurrentValue(ValueProperty, ValueBoxes.Double0Box);
                 _textBox.Text = string.Empty;
             }));
 
diff --git a/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs b/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
new file mode 100644
index 00000000..ba71e131
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
@@ -0,0 +1,276 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Markup;
+using System.Windows.Media;
+using HandyControl.Data;
+using HandyControl.Interactivity;
+using HandyControl.Tools;
+
+namespace HandyControl.Controls
+{
+    [ContentProperty("Content")]
+    public class Drawer : FrameworkElement
+    {
+        private AdornerContainer _container;
+
+        private ContentControl _animateControl;
+
+        private TranslateTransform _translateTransform;
+
+        private double _animationLength;
+
+        private DependencyProperty _animationProperty;
+
+        private FrameworkElement _maskElement;
+
+        private AdornerLayer _layer;
+
+        public Drawer()
+        {
+            Loaded += Drawer_Loaded;
+            Unloaded += Drawer_Unloaded;
+
+            CommandBindings.Add(new CommandBinding(ControlCommands.Close, (s, e) => SetCurrentValue(IsOpenProperty, ValueBoxes.FalseBox)));
+        }
+
+        private void Drawer_Loaded(object sender, RoutedEventArgs e)
+        {
+            if (IsOpen)
+            {
+                OnIsOpenChanged(true);
+            }
+        }
+
+        private void Drawer_Unloaded(object sender, RoutedEventArgs e)
+        {
+            Loaded -= Drawer_Loaded;
+            if (_maskElement != null)
+            {
+                _maskElement.PreviewMouseLeftButtonDown -= MaskElement_PreviewMouseLeftButtonDown;
+            }
+        }
+
+        public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
+            "IsOpen", typeof(bool), typeof(Drawer), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnIsOpenChanged));
+
+        private static void OnIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var ctl = (Drawer) d;
+            ctl.OnIsOpenChanged((bool)e.NewValue);
+        }
+
+        public bool IsOpen
+        {
+            get => (bool) GetValue(IsOpenProperty);
+            set => SetValue(IsOpenProperty, value);
+        }
+
+        public static readonly DependencyProperty MaskCanCloseProperty = DependencyProperty.Register(
+            "MaskCanClose", typeof(bool), typeof(Drawer), new PropertyMetadata(ValueBoxes.TrueBox));
+
+        public bool MaskCanClose
+        {
+            get => (bool) GetValue(MaskCanCloseProperty);
+            set => SetValue(MaskCanCloseProperty, value);
+        }
+
+        public static readonly DependencyProperty ShowMaskProperty = DependencyProperty.Register(
+            "ShowMask", typeof(bool), typeof(Drawer), new PropertyMetadata(ValueBoxes.TrueBox));
+
+        public bool ShowMask
+        {
+            get => (bool) GetValue(ShowMaskProperty);
+            set => SetValue(ShowMaskProperty, value);
+        }
+
+        public static readonly DependencyProperty DockProperty = DependencyProperty.Register(
+            "Dock", typeof(Dock), typeof(Drawer), new PropertyMetadata(default(Dock)));
+
+        public Dock Dock
+        {
+            get => (Dock) GetValue(DockProperty);
+            set => SetValue(DockProperty, value);
+        }
+
+        public static readonly DependencyProperty ShowModeProperty = DependencyProperty.Register(
+            "ShowMode", typeof(DrawerShowMode), typeof(Drawer), new PropertyMetadata(default(DrawerShowMode)));
+
+        public DrawerShowMode ShowMode
+        {
+            get => (DrawerShowMode) GetValue(ShowModeProperty);
+            set => SetValue(ShowModeProperty, value);
+        }
+
+        public static readonly DependencyProperty MaskBrushProperty = DependencyProperty.Register(
+            "MaskBrush", typeof(Brush), typeof(Drawer), new PropertyMetadata(default(Brush)));
+
+        public Brush MaskBrush
+        {
+            get => (Brush) GetValue(MaskBrushProperty);
+            set => SetValue(MaskBrushProperty, value);
+        }
+
+        public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(
+            "Content", typeof(object), typeof(Drawer), new PropertyMetadata(default(object)));
+
+        public object Content
+        {
+            get => GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        private void OnIsOpenChanged(bool isOpen)
+        {
+            if (Content == null) return;
+
+            var window = WindowHelper.GetActiveWindow();
+            if (window == null) return;
+
+            var decorator = VisualHelper.GetChild<AdornerDecorator>(window);
+            _layer = decorator?.AdornerLayer;
+            if (_layer == null) return;
+
+            if (_container == null)
+            {
+                CreateContainer();
+            }
+
+            switch (ShowMode)
+            {
+                case DrawerShowMode.Cover:
+                    ShowByCover(isOpen);
+                    break;
+                case DrawerShowMode.Push:
+                    ShowByPush(isOpen);
+                    break;
+                case DrawerShowMode.Press:
+                    ShowByPress(isOpen);
+                    break;
+                default:
+                    throw new ArgumentOutOfRangeException();
+            }
+        }
+
+        private void ShowByCover(bool isOpen)
+        {
+            if (isOpen)
+            {
+                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(1));
+                _translateTransform.BeginAnimation(_animationProperty, AnimationHelper.CreateAnimation(0));
+                _layer.Add(_container);
+            }
+            else
+            {
+                var animation = AnimationHelper.CreateAnimation(_animationLength);
+                animation.Completed += (s, e) => _layer.Remove(_container);
+                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(0));
+                _translateTransform.BeginAnimation(_animationProperty, animation);
+            }
+        }
+
+        private void ShowByPush(bool isOpen)
+        {
+            if (isOpen)
+            {
+                
+            }
+            else
+            {
+                
+            }
+        }
+
+        private void ShowByPress(bool isOpen)
+        {
+            if (isOpen)
+            {
+
+            }
+            else
+            {
+
+            }
+        }
+
+        private void CreateContainer()
+        {
+            _translateTransform = new TranslateTransform();
+            _animateControl = new ContentControl
+            {
+                Content = Content,
+                RenderTransform = _translateTransform,
+                DataContext = this
+            };
+            var panel = new SimplePanel
+            {
+                ClipToBounds = true
+            };
+
+            if (ShowMask)
+            {
+                _maskElement = new Border
+                {
+                    Background = MaskBrush,
+                    Opacity = 0
+                };
+                _maskElement.PreviewMouseLeftButtonDown += MaskElement_PreviewMouseLeftButtonDown;
+                panel.Children.Add(_maskElement);
+            }
+
+            _animateControl.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
+            var size = _animateControl.DesiredSize;
+
+            switch (Dock)
+            {
+                case Dock.Left:
+                    _animateControl.HorizontalAlignment = HorizontalAlignment.Left;
+                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _translateTransform.X = -size.Width;
+                    _animationLength = -size.Width;
+                    _animationProperty = TranslateTransform.XProperty;
+                    break;
+                case Dock.Top:
+                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animateControl.VerticalAlignment = VerticalAlignment.Top;
+                    _translateTransform.Y = -size.Height;
+                    _animationLength = -size.Height;
+                    _animationProperty = TranslateTransform.YProperty;
+                    break;
+                case Dock.Right:
+                    _animateControl.HorizontalAlignment = HorizontalAlignment.Right;
+                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _translateTransform.X = size.Width;
+                    _animationLength = size.Width;
+                    _animationProperty = TranslateTransform.XProperty;
+                    break;
+                case Dock.Bottom:
+                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animateControl.VerticalAlignment = VerticalAlignment.Bottom;
+                    _translateTransform.Y = size.Height;
+                    _animationLength = size.Height;
+                    _animationProperty = TranslateTransform.YProperty;
+                    break;
+                default:
+                    throw new ArgumentOutOfRangeException();
+            }
+
+            panel.Children.Add(_animateControl);
+            _container = new AdornerContainer(_layer)
+            {
+                Child = panel,
+                ClipToBounds = true
+            };
+        }
+
+        private void MaskElement_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        {
+            if (MaskCanClose)
+            {
+                SetCurrentValue(IsOpenProperty, ValueBoxes.FalseBox);
+            }
+        }
+    }
+}
diff --git a/src/Shared/HandyControl_Shared/Controls/TabControl/TabControl.cs b/src/Shared/HandyControl_Shared/Controls/TabControl/TabControl.cs
index 4344f41d..fb717a52 100644
--- a/src/Shared/HandyControl_Shared/Controls/TabControl/TabControl.cs
+++ b/src/Shared/HandyControl_Shared/Controls/TabControl/TabControl.cs
@@ -368,7 +368,7 @@ namespace HandyControl.Controls
                             HeaderPanel.ForceUpdate = true;
                             HeaderPanel.Measure(new Size(HeaderPanel.DesiredSize.Width, ActualHeight));
                             HeaderPanel.ForceUpdate = false;
-                            SetCurrentValue(SelectedIndexProperty, 0);
+                            SetCurrentValue(SelectedIndexProperty, ValueBoxes.Int0Box);
                         }
 
                         item.IsSelected = true;
diff --git a/src/Shared/HandyControl_Shared/Data/Enum/DrawerShowMode.cs b/src/Shared/HandyControl_Shared/Data/Enum/DrawerShowMode.cs
new file mode 100644
index 00000000..a02ff814
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Data/Enum/DrawerShowMode.cs
@@ -0,0 +1,9 @@
+namespace HandyControl.Data
+{
+    public enum DrawerShowMode
+    {
+        Cover,
+        Push,
+        Press
+    }
+}
diff --git a/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems b/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
index 6c2ea7c9..bb56f6d3 100644
--- a/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
+++ b/src/Shared/HandyControl_Shared/HandyControl_Shared.projitems
@@ -26,6 +26,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Growl\GrowlWindow.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Image\ImageBlock.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Divider.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Drawer.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Magnifier.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\ButtonGroup.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Card.cs" />
@@ -38,6 +39,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeThumb.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\TwoWayRangeBase.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Block\RunningBlock.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Enum\DrawerShowMode.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Enum\HatchStyle.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Enum\HitMode.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Data\Enum\ShowAnimation.cs" />
@@ -386,6 +388,14 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Drawer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\DrawerBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Poptip.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Base/BadgeBaseStyle.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Base/BadgeBaseStyle.xaml
index 79d720e5..627fa2b4 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/Base/BadgeBaseStyle.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Base/BadgeBaseStyle.xaml
@@ -1,4 +1,6 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:HandyControl.Controls">
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="../Border.xaml" />
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Base/DrawerBaseStyle.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Base/DrawerBaseStyle.xaml
new file mode 100644
index 00000000..fd9084f3
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Base/DrawerBaseStyle.xaml
@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <Style x:Key="DrawerBaseStyle" TargetType="controls:Drawer">
+        <Setter Property="Dock" Value="Right"/>
+        <Setter Property="MaskBrush" Value="{DynamicResource DarkOpacityBrush}"/>
+    </Style>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Drawer.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Drawer.xaml
new file mode 100644
index 00000000..a4808d95
--- /dev/null
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Drawer.xaml
@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/DrawerBaseStyle.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource DrawerBaseStyle}" TargetType="controls:Drawer"/>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Shared/HandyControl_Shared/Themes/Styles/Style.xaml b/src/Shared/HandyControl_Shared/Themes/Styles/Style.xaml
index 971fca8e..62a380e9 100644
--- a/src/Shared/HandyControl_Shared/Themes/Styles/Style.xaml
+++ b/src/Shared/HandyControl_Shared/Themes/Styles/Style.xaml
@@ -77,6 +77,7 @@
         <ResourceDictionary Source="SplitButton.xaml"/>
         <ResourceDictionary Source="Divider.xaml"/>
         <ResourceDictionary Source="Poptip.xaml"/>
+        <ResourceDictionary Source="Drawer.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>
\ No newline at end of file

From f586bb2b34fcc960161cee9a2cda3d9fbb5174b1 Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Mon, 25 Nov 2019 01:15:42 +0800
Subject: [PATCH 2/3] Update README.md

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 45d1d9d0..200dc3e8 100644
--- a/README.md
+++ b/README.md
@@ -42,6 +42,9 @@
 <a href="https://github.com/IUpdatable" target="_blank"><img width="64px" src="https://avatars2.githubusercontent.com/u/51181716?s=400&v=4"></a>
 <a href="https://github.com/maplewei" target="_blank"><img width="64px" src="https://avatars1.githubusercontent.com/u/13778095?s=400&v=4"></a>
 <a href="https://github.com/sunshang-hl" target="_blank"><img width="64px" src="https://avatars1.githubusercontent.com/u/34593206?s=400&v=4"></a>
+<a href="https://github.com/yangkang326" target="_blank"><img width="64px" src="https://avatars1.githubusercontent.com/u/51224259?s=400&v=4"></a>	
+<a href="https://github.com/zmrbak" target="_blank"><img width="64px" src="https://avatars3.githubusercontent.com/u/7257543?s=400&v=4"></a>	
+<a href="https://github.com/AFei19911012" target="_blank"><img width="64px" src="https://avatars0.githubusercontent.com/u/31465314?s=400&v=4"></a>
 
 ## Special thanks to
 

From fb3ec79c1cb770173e360ad83b6fe3d5973aa52b Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Tue, 26 Nov 2019 00:48:08 +0800
Subject: [PATCH 3/3] add Drawer

---
 README.md                                     |   8 +-
 .../Data/SideMenuConfig.json                  | 120 ++++++++
 .../UserControl/Controls/DrawerDemoCtl.xaml   |  12 +-
 .../Controls/Other/Drawer.cs                  | 267 ++++++++++++------
 4 files changed, 308 insertions(+), 99 deletions(-)
 create mode 100644 src/Shared/HandyControlDemo_Shared/Data/SideMenuConfig.json

diff --git a/README.md b/README.md
index 200dc3e8..6e820dfc 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,10 @@ Step 4：enjoy coding
 
 ## Latest examples
 
+### Drawer
+
+![Drawer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Drawer.gif)
+
 ### Poptip
 
 ![Poptip](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Poptip.gif)
@@ -102,12 +106,12 @@ Step 4：enjoy coding
 
 ![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.png)
 
+## History publication
+
 ### FloatingBlock
 
 ![FloatingBlock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/FloatingBlock.gif)
 
-## History publication
-
 ### HoneycombPanel
 
 ![HoneycombPanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/HoneycombPanel.png)
diff --git a/src/Shared/HandyControlDemo_Shared/Data/SideMenuConfig.json b/src/Shared/HandyControlDemo_Shared/Data/SideMenuConfig.json
new file mode 100644
index 00000000..8e58a2ac
--- /dev/null
+++ b/src/Shared/HandyControlDemo_Shared/Data/SideMenuConfig.json
@@ -0,0 +1,120 @@
+[
+  {
+    "Header": "Overview",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Overview.png",
+    "Items": [
+      {
+        "Header": "Summary",
+        "IconKey": "&#xf2cb;"
+      },
+      {
+        "Header": "Dashboards",
+        "IconKey": "&#xf246;"
+      },
+      {
+        "Header": "Wiki",
+        "IconKey": "&#xe82d;"
+      }
+    ]
+  },
+  {
+    "Header": "Boards",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Boards.png",
+    "Items": [
+      {
+        "Header": "Work Items",
+        "IconKey": "&#xf314;"
+      },
+      {
+        "Header": "Boards",
+        "IconKey": "&#xf444;"
+      },
+      {
+        "Header": "Backlogs",
+        "IconKey": "&#xf6bf;"
+      },
+      {
+        "Header": "Sprints",
+        "IconKey": "&#xf3b0;"
+      },
+      {
+        "Header": "Queries",
+        "IconKey": "&#xf2b8;"
+      }
+    ]
+  },
+  {
+    "Header": "Repos",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Repos.png",
+    "Items": [
+      {
+        "Header": "Files",
+        "IconKey": "&#xf30e;"
+      },
+      {
+        "Header": "Commits",
+        "IconKey": "&#xf293;"
+      },
+      {
+        "Header": "Pushes",
+        "IconKey": "&#xf298;"
+      },
+      {
+        "Header": "Branches",
+        "IconKey": "&#xebc2;"
+      },
+      {
+        "Header": "Tags",
+        "IconKey": "&#xe8ec;"
+      },
+      {
+        "Header": "Pull requests",
+        "IconKey": "&#xf296;"
+      }
+    ]
+  },
+  {
+    "Header": "Pipelines",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Pipelines.png",
+    "Items": [
+      {
+        "Header": "Builds",
+        "IconKey": "&#xf28f;"
+      },
+      {
+        "Header": "Releases",
+        "IconKey": "&#xf3b3;"
+      },
+      {
+        "Header": "Library",
+        "IconKey": "&#xe8f1;"
+      },
+      {
+        "Header": "Task groups",
+        "IconKey": "&#xf2ae;"
+      },
+      {
+        "Header": "Deployment groups",
+        "IconKey": "&#xf29d;"
+      }
+    ]
+  },
+  {
+    "Header": "Test Plans",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-TestPlans.png",
+    "Items": [
+      {
+        "Header": "Test Plans",
+        "IconKey": "&#xf3ab;"
+      },
+      {
+        "Header": "Runs",
+        "IconKey": "&#xf3ac;"
+      },
+      {
+        "Header": "Load test",
+        "IconKey": "&#xe8a9;"
+      }
+    ]
+  }
+]
\ No newline at end of file
diff --git a/src/Shared/HandyControlDemo_Shared/UserControl/Controls/DrawerDemoCtl.xaml b/src/Shared/HandyControlDemo_Shared/UserControl/Controls/DrawerDemoCtl.xaml
index d637c9a5..3da2d201 100644
--- a/src/Shared/HandyControlDemo_Shared/UserControl/Controls/DrawerDemoCtl.xaml
+++ b/src/Shared/HandyControlDemo_Shared/UserControl/Controls/DrawerDemoCtl.xaml
@@ -21,7 +21,7 @@
                 <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" Content="Right" IsChecked="{Binding IsOpen,ElementName=DrawerRight}"/>
                 <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1" Content="Bottom" IsChecked="{Binding IsOpen,ElementName=DrawerBottom}"/>
             </Grid>
-            <hc:Drawer Name="DrawerLeft" Dock="Left">
+            <hc:Drawer Name="DrawerLeft" Dock="Left" ShowMode="Push">
                 <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
@@ -33,7 +33,7 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerTop" Dock="Top">
+            <hc:Drawer Name="DrawerTop" Dock="Top" ShowMode="Press">
                 <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
@@ -45,8 +45,8 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerRight" ShowMask="False">
-                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="1,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
+            <hc:Drawer Name="DrawerRight" MaskCanClose="False">
+                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
@@ -57,8 +57,8 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerBottom" Dock="Bottom">
-                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderBrush="{DynamicResource BorderBrush}">
+            <hc:Drawer Name="DrawerBottom" Dock="Bottom" ShowMask="False">
+                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
diff --git a/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs b/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
index ba71e131..c99d5e16 100644
--- a/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
+++ b/src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs
@@ -5,6 +5,7 @@ using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Markup;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using HandyControl.Data;
 using HandyControl.Interactivity;
 using HandyControl.Tools;
@@ -14,20 +15,28 @@ namespace HandyControl.Controls
     [ContentProperty("Content")]
     public class Drawer : FrameworkElement
     {
+        private Storyboard _storyboard;
+
         private AdornerContainer _container;
 
-        private ContentControl _animateControl;
+        private ContentControl _animationControl;
 
         private TranslateTransform _translateTransform;
 
         private double _animationLength;
 
-        private DependencyProperty _animationProperty;
+        private string _animationPropertyName;
 
         private FrameworkElement _maskElement;
 
         private AdornerLayer _layer;
 
+        private System.Windows.Window _window;
+
+        private UIElement _windowContentElement;
+
+        private Point _contentRenderTransformOrigin;
+
         public Drawer()
         {
             Loaded += Drawer_Loaded;
@@ -47,10 +56,16 @@ namespace HandyControl.Controls
         private void Drawer_Unloaded(object sender, RoutedEventArgs e)
         {
             Loaded -= Drawer_Loaded;
+            
             if (_maskElement != null)
             {
                 _maskElement.PreviewMouseLeftButtonDown -= MaskElement_PreviewMouseLeftButtonDown;
             }
+
+            if (_storyboard != null)
+            {
+                _storyboard.Completed -= Storyboard_Completed;
+            }
         }
 
         public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
@@ -122,88 +137,19 @@ namespace HandyControl.Controls
             set => SetValue(ContentProperty, value);
         }
 
-        private void OnIsOpenChanged(bool isOpen)
-        {
-            if (Content == null) return;
-
-            var window = WindowHelper.GetActiveWindow();
-            if (window == null) return;
-
-            var decorator = VisualHelper.GetChild<AdornerDecorator>(window);
-            _layer = decorator?.AdornerLayer;
-            if (_layer == null) return;
-
-            if (_container == null)
-            {
-                CreateContainer();
-            }
-
-            switch (ShowMode)
-            {
-                case DrawerShowMode.Cover:
-                    ShowByCover(isOpen);
-                    break;
-                case DrawerShowMode.Push:
-                    ShowByPush(isOpen);
-                    break;
-                case DrawerShowMode.Press:
-                    ShowByPress(isOpen);
-                    break;
-                default:
-                    throw new ArgumentOutOfRangeException();
-            }
-        }
-
-        private void ShowByCover(bool isOpen)
-        {
-            if (isOpen)
-            {
-                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(1));
-                _translateTransform.BeginAnimation(_animationProperty, AnimationHelper.CreateAnimation(0));
-                _layer.Add(_container);
-            }
-            else
-            {
-                var animation = AnimationHelper.CreateAnimation(_animationLength);
-                animation.Completed += (s, e) => _layer.Remove(_container);
-                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(0));
-                _translateTransform.BeginAnimation(_animationProperty, animation);
-            }
-        }
-
-        private void ShowByPush(bool isOpen)
-        {
-            if (isOpen)
-            {
-                
-            }
-            else
-            {
-                
-            }
-        }
-
-        private void ShowByPress(bool isOpen)
-        {
-            if (isOpen)
-            {
-
-            }
-            else
-            {
-
-            }
-        }
-
         private void CreateContainer()
         {
+            _storyboard = new Storyboard();
+            _storyboard.Completed += Storyboard_Completed;
+
             _translateTransform = new TranslateTransform();
-            _animateControl = new ContentControl
+            _animationControl = new ContentControl
             {
                 Content = Content,
                 RenderTransform = _translateTransform,
                 DataContext = this
             };
+
             var panel = new SimplePanel
             {
                 ClipToBounds = true
@@ -220,44 +166,44 @@ namespace HandyControl.Controls
                 panel.Children.Add(_maskElement);
             }
 
-            _animateControl.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
-            var size = _animateControl.DesiredSize;
+            _animationControl.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
+            var size = _animationControl.DesiredSize;
 
             switch (Dock)
             {
                 case Dock.Left:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Left;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Left;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Stretch;
                     _translateTransform.X = -size.Width;
                     _animationLength = -size.Width;
-                    _animationProperty = TranslateTransform.XProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
                     break;
                 case Dock.Top:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Top;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Top;
                     _translateTransform.Y = -size.Height;
                     _animationLength = -size.Height;
-                    _animationProperty = TranslateTransform.YProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
                     break;
                 case Dock.Right:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Right;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Right;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Stretch;
                     _translateTransform.X = size.Width;
                     _animationLength = size.Width;
-                    _animationProperty = TranslateTransform.XProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
                     break;
                 case Dock.Bottom:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Bottom;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Bottom;
                     _translateTransform.Y = size.Height;
                     _animationLength = size.Height;
-                    _animationProperty = TranslateTransform.YProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
                     break;
                 default:
                     throw new ArgumentOutOfRangeException();
             }
 
-            panel.Children.Add(_animateControl);
+            panel.Children.Add(_animationControl);
             _container = new AdornerContainer(_layer)
             {
                 Child = panel,
@@ -265,6 +211,145 @@ namespace HandyControl.Controls
             };
         }
 
+        private void Storyboard_Completed(object sender, EventArgs e)
+        {
+            if (!IsOpen)
+            {
+                _windowContentElement.SetCurrentValue(RenderTransformOriginProperty, _contentRenderTransformOrigin);
+                _layer.Remove(_container);
+            }
+        }
+
+        private void OnIsOpenChanged(bool isOpen)
+        {
+            if (Content == null) return;
+
+            _window = WindowHelper.GetActiveWindow();
+            if (_window == null) return;
+
+            _windowContentElement = _window.Content as UIElement;
+            if (_windowContentElement == null) return;
+
+            _contentRenderTransformOrigin = _windowContentElement.RenderTransformOrigin;
+
+            var decorator = VisualHelper.GetChild<AdornerDecorator>(_window);
+            _layer = decorator?.AdornerLayer;
+            if (_layer == null) return;
+
+            if (_container == null)
+            {
+                CreateContainer();
+            }
+
+            switch (ShowMode)
+            {
+                case DrawerShowMode.Push:
+                    ShowByPush(isOpen);
+                    break;
+                case DrawerShowMode.Press:
+                    _windowContentElement.SetCurrentValue(RenderTransformOriginProperty, new Point(0.5, 0.5));
+                    ShowByPress(isOpen);
+                    break;
+            }
+
+            if (isOpen)
+            {
+                if (_maskElement != null)
+                {
+                    var maskAnimation = AnimationHelper.CreateAnimation(1);
+                    Storyboard.SetTarget(maskAnimation, _maskElement);
+                    Storyboard.SetTargetProperty(maskAnimation, new PropertyPath(OpacityProperty.Name));
+                    _storyboard.Children.Add(maskAnimation);
+                }
+
+                var drawerAnimation = AnimationHelper.CreateAnimation(0);
+                Storyboard.SetTarget(drawerAnimation, _animationControl);
+                Storyboard.SetTargetProperty(drawerAnimation, new PropertyPath(_animationPropertyName));
+                _storyboard.Children.Add(drawerAnimation);
+                _layer.Remove(_container);
+                _layer.Add(_container);
+            }
+            else
+            {
+                if (_maskElement != null)
+                {
+                    var maskAnimation = AnimationHelper.CreateAnimation(0);
+                    Storyboard.SetTarget(maskAnimation, _maskElement);
+                    Storyboard.SetTargetProperty(maskAnimation, new PropertyPath(OpacityProperty.Name));
+                    _storyboard.Children.Add(maskAnimation);
+                }
+
+                var drawerAnimation = AnimationHelper.CreateAnimation(_animationLength);
+                Storyboard.SetTarget(drawerAnimation, _animationControl);
+                Storyboard.SetTargetProperty(drawerAnimation, new PropertyPath(_animationPropertyName));
+                _storyboard.Children.Add(drawerAnimation);
+            }
+
+            _storyboard.Begin();
+        }
+
+        private void ShowByPush(bool isOpen)
+        {
+            string animationPropertyName;
+
+            switch (Dock)
+            {
+                case Dock.Left:
+                case Dock.Right:
+                    animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
+                    _windowContentElement.RenderTransform = new TranslateTransform
+                    {
+                        X = isOpen ? 0 : -_animationLength
+                    };
+                    break;
+                case Dock.Top:
+                case Dock.Bottom:
+                    animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
+                    _windowContentElement.RenderTransform = new TranslateTransform
+                    {
+                        Y = isOpen ? 0 : -_animationLength
+                    };
+                    break;
+                default:
+                    throw new ArgumentOutOfRangeException();
+            }
+
+            var animation = isOpen
+                ? AnimationHelper.CreateAnimation(-_animationLength)
+                : AnimationHelper.CreateAnimation(0);
+            Storyboard.SetTarget(animation, _windowContentElement);
+            Storyboard.SetTargetProperty(animation, new PropertyPath(animationPropertyName));
+
+            _storyboard.Children.Add(animation);
+        }
+
+        private void ShowByPress(bool isOpen)
+        {
+            _windowContentElement.RenderTransform = isOpen
+                ? new ScaleTransform()
+                : new ScaleTransform
+                {
+                    ScaleX = 0.9,
+                    ScaleY = 0.9
+                };
+
+            var animationX = isOpen
+                ? AnimationHelper.CreateAnimation(.9)
+                : AnimationHelper.CreateAnimation(1);
+            Storyboard.SetTarget(animationX, _windowContentElement);
+            Storyboard.SetTargetProperty(animationX, new PropertyPath("(UIElement.RenderTransform).(ScaleTransform.ScaleX)"));
+
+            _storyboard.Children.Add(animationX);
+
+            var animationY = isOpen
+                ? AnimationHelper.CreateAnimation(.9)
+                : AnimationHelper.CreateAnimation(1);
+            Storyboard.SetTarget(animationY, _windowContentElement);
+            Storyboard.SetTargetProperty(animationY, new PropertyPath("(UIElement.RenderTransform).(ScaleTransform.ScaleY)"));
+
+            _storyboard.Children.Add(animationY);
+        }
+
         private void MaskElement_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (MaskCanClose)