diff --git a/HandyControl/Controls/Input/SearchBar.cs b/HandyControl/Controls/Input/SearchBar.cs
index cc19ed54..864d3b39 100644
--- a/HandyControl/Controls/Input/SearchBar.cs
+++ b/HandyControl/Controls/Input/SearchBar.cs
@@ -28,7 +28,7 @@ namespace HandyControl.Controls
             {
                 RaiseEvent(new FunctionEventArgs<string>(SearchStartedEvent, this)
                 {
-                    Source = Text
+                    Info = Text
                 });
             }));
         }
@@ -72,7 +72,7 @@ namespace HandyControl.Controls
             {
                 RaiseEvent(new FunctionEventArgs<string>(SearchStartedEvent, this)
                 {
-                    Source = Text
+                    Info = Text
                 });
             }
         }
diff --git a/HandyControl/Themes/Styles/Base/SearchBarBaseStyle.xaml b/HandyControl/Themes/Styles/Base/SearchBarBaseStyle.xaml
index bf499612..7285a243 100644
--- a/HandyControl/Themes/Styles/Base/SearchBarBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/SearchBarBaseStyle.xaml
@@ -16,6 +16,7 @@
         <Setter Property="Background" Value="{DynamicResource RegionBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
         <Setter Property="Height" Value="30"/>
+        <Setter Property="Focusable" Value="False"/>
         <Setter Property="BorderThickness" Value="1"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
         <Setter Property="Template">
@@ -28,7 +29,7 @@
                                 <ColumnDefinition Width="30"/>
                             </Grid.ColumnDefinitions>
                             <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
-                            <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" Padding="5,6" Margin="0,0,0,1" x:Name="PART_TextBox" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                            <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" Padding="5,6" Margin="0,0,0,1" x:Name="PART_TextBox" HorizontalAlignment="Stretch" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                         </Grid>
                     </Border>
                     <ControlTemplate.Triggers>
@@ -64,7 +65,7 @@
                         <ColumnDefinition Width="30"/>
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
-                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
         </Grid>
@@ -98,7 +99,7 @@
                         <ColumnDefinition Width="30"/>
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="1" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
-                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
         </Grid>
@@ -156,7 +157,7 @@
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Clear" Visibility="Collapsed" Name="ButtonClear" Width="16" Grid.Column="1" Style="{StaticResource ButtonIcon}" Padding="0,6" controls:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}" Foreground="{Binding BorderBrush,ElementName=templateRoot}"/>
                     <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
-                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
         </Grid>
@@ -217,7 +218,7 @@
                     </Grid.ColumnDefinitions>
                     <Button Command="interactivity:ControlCommands.Clear" Visibility="Collapsed" Name="ButtonClear" Width="16" Grid.Column="1" Style="{StaticResource ButtonIcon}" Padding="0,6" controls:IconElement.Geometry="{StaticResource DeleteFillCircleGeometry}" Foreground="{Binding BorderBrush,ElementName=templateRoot}"/>
                     <Button Command="interactivity:ControlCommands.Search" Style="{StaticResource ButtonIcon}" Padding="2,7,7,7" controls:IconElement.Geometry="{StaticResource SearchGeometry}" Grid.Column="2" Foreground="{Binding BorderBrush,ElementName=templateRoot}" Focusable="False" Grid.Row="0"/>
-                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    <controls:WatermarkTextBox CaretBrush="{TemplateBinding Foreground}" x:Name="PART_TextBox" Padding="5,6" Margin="0,0,0,1" Watermark="{Binding Path=(controls:InfoElement.Placeholder),RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Stretch" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.Row="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                 </Grid>
             </Border>
         </Grid>
diff --git a/HandyControlDemo/HandyControlDemo.csproj b/HandyControlDemo/HandyControlDemo.csproj
index 1dcf7e7e..4400c69a 100644
--- a/HandyControlDemo/HandyControlDemo.csproj
+++ b/HandyControlDemo/HandyControlDemo.csproj
@@ -699,6 +699,7 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="Resources\Img\LeftMainContent\SortAscending_grey_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\LinearCarousel_16x.png" />
     <Resource Include="Resources\Img\Album\1.jpg" />
     <Resource Include="Resources\Img\Album\10.jpg" />
diff --git a/HandyControlDemo/Properties/Langs/Lang.Designer.cs b/HandyControlDemo/Properties/Langs/Lang.Designer.cs
index 057c4a16..a19f2900 100644
--- a/HandyControlDemo/Properties/Langs/Lang.Designer.cs
+++ b/HandyControlDemo/Properties/Langs/Lang.Designer.cs
@@ -744,6 +744,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 请输入关键字 的本地化字符串。
+        /// </summary>
+        public static string PlsEnterKey {
+            get {
+                return ResourceManager.GetString("PlsEnterKey", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 上一步 的本地化字符串。
         /// </summary>
diff --git a/HandyControlDemo/Properties/Langs/Lang.en.resx b/HandyControlDemo/Properties/Langs/Lang.en.resx
index fe2050ca..3db23d8b 100644
--- a/HandyControlDemo/Properties/Langs/Lang.en.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.en.resx
@@ -462,6 +462,9 @@
   <data name="CoverFlow" xml:space="preserve">
     <value>CoverFlow</value>
   </data>
+  <data name="PlsEnterKey" xml:space="preserve">
+    <value>Please input a keyword</value>
+  </data>
   <data name="OpenNoNonClientAreaDragableWindow" xml:space="preserve">
     <value>open no Non-client Area dragable window</value>
   </data>
@@ -471,4 +474,4 @@
   <data name="MessageBox" xml:space="preserve">
     <value>MessageBox</value>
   </data>
-</root>
\ No newline at end of file
+</root>
diff --git a/HandyControlDemo/Properties/Langs/Lang.resx b/HandyControlDemo/Properties/Langs/Lang.resx
index 0bdbf91c..37ee53dc 100644
--- a/HandyControlDemo/Properties/Langs/Lang.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.resx
@@ -462,6 +462,9 @@
   <data name="CoverFlow" xml:space="preserve">
     <value>封面流</value>
   </data>
+  <data name="PlsEnterKey" xml:space="preserve">
+    <value>请输入关键字</value>
+  </data>
   <data name="OpenNoNonClientAreaDragableWindow" xml:space="preserve">
     <value>打开无非客户端区域可拖拽窗口</value>
   </data>
@@ -471,4 +474,4 @@
   <data name="MessageBox" xml:space="preserve">
     <value>消息框</value>
   </data>
-</root>
\ No newline at end of file
+</root>
diff --git a/HandyControlDemo/Resources/Img/LeftMainContent/SortAscending_grey_16x.png b/HandyControlDemo/Resources/Img/LeftMainContent/SortAscending_grey_16x.png
new file mode 100644
index 00000000..150a8703
Binary files /dev/null and b/HandyControlDemo/Resources/Img/LeftMainContent/SortAscending_grey_16x.png differ
diff --git a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
index 0da4e052..7f1b2552 100644
--- a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
+++ b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
@@ -15,312 +15,350 @@
             </i:EventTrigger>
         </i:Interaction.Triggers>
         <TabItem Background="Transparent" Header="{x:Static langs:Lang.Styles}">
-            <ListBox BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
-                <ListBoxItem Tag="{x:Static data:MessageToken.BrushDemoCtl}" Content="{x:Static langs:Lang.Brush}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Brush_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ButtonDemoCtl}" Content="{x:Static langs:Lang.Button}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ButtonClick_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ToggleButtonDemoCtl}" Content="{x:Static langs:Lang.ToggleButton}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Toggle_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.RadioButtonDemoCtl}" Content="{x:Static langs:Lang.RadioButton}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/RadioButton_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CheckBoxDemoCtl}" Content="{x:Static langs:Lang.CheckBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/CheckBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaiveScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.SliderDemoCtl}" Content="{x:Static langs:Lang.Slider}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Slider_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TextBlockDemoCtl}" Content="{x:Static langs:Lang.TextBlock}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaiveTextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaiveComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaivePasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ExpanderDemoCtl}" Content="{x:Static langs:Lang.Expander}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Expander_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CalendarDemoCtl}" Content="{x:Static langs:Lang.Calendar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaiveDatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.NaiveTabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.DataGridDemoCtl}" Content="{x:Static langs:Lang.DataGrid}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/DataGrid_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TreeViewDemoCtl}" Content="{x:Static langs:Lang.TreeView}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TreeView_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ListBoxDemoCtl}" Content="{x:Static langs:Lang.ListBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ListBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ListViewDemoCtl}" Content="{x:Static langs:Lang.ListView}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ListView_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.GroupBoxDemoCtl}" Content="{x:Static langs:Lang.GroupBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/GroupBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.MenuDemoCtl}" Content="{x:Static langs:Lang.Menu}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ContextMenu_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.RichTextBoxDemoCtl}" Content="{x:Static langs:Lang.RichTextBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/RichTextBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ToolBarDemoCtl}" Content="{x:Static langs:Lang.ToolBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ToolBar_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Content="{x:Static langs:Lang.Border1}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/BorderElement_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-            </ListBox>
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition/>
+                    <ColumnDefinition Width="Auto"/>
+                </Grid.ColumnDefinitions>
+                <controls:SearchBar x:Name="SearchBarStyle" SearchStarted="SearchBarStyle_OnSearchStarted" Style="{StaticResource SearchBarPlus}" controls:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4"/>
+                <ToggleButton Name="ButtonStyleAscending" Click="ButtonStyleAscending_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>
+                    <controls:StatusSwitchElement.CheckedElement>
+                        <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
+                    </controls:StatusSwitchElement.CheckedElement>
+                </ToggleButton>
+                <ListBox Name="listStyle" 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}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Brush_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ButtonDemoCtl}" Content="{x:Static langs:Lang.Button}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ButtonClick_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ToggleButtonDemoCtl}" Content="{x:Static langs:Lang.ToggleButton}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Toggle_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.RadioButtonDemoCtl}" Content="{x:Static langs:Lang.RadioButton}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/RadioButton_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CheckBoxDemoCtl}" Content="{x:Static langs:Lang.CheckBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/CheckBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaiveScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.SliderDemoCtl}" Content="{x:Static langs:Lang.Slider}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Slider_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TextBlockDemoCtl}" Content="{x:Static langs:Lang.TextBlock}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaiveTextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaiveComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaivePasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ExpanderDemoCtl}" Content="{x:Static langs:Lang.Expander}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Expander_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CalendarDemoCtl}" Content="{x:Static langs:Lang.Calendar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaiveDatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NaiveTabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.DataGridDemoCtl}" Content="{x:Static langs:Lang.DataGrid}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/DataGrid_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TreeViewDemoCtl}" Content="{x:Static langs:Lang.TreeView}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TreeView_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ListBoxDemoCtl}" Content="{x:Static langs:Lang.ListBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ListBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ListViewDemoCtl}" Content="{x:Static langs:Lang.ListView}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ListView_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.GroupBoxDemoCtl}" Content="{x:Static langs:Lang.GroupBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/GroupBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.MenuDemoCtl}" Content="{x:Static langs:Lang.Menu}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ContextMenu_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.RichTextBoxDemoCtl}" Content="{x:Static langs:Lang.RichTextBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/RichTextBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ToolBarDemoCtl}" Content="{x:Static langs:Lang.ToolBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ToolBar_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Content="{x:Static langs:Lang.Border1}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/BorderElement_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                </ListBox>
+            </Grid>
         </TabItem>
         <TabItem Background="Transparent" Header="{x:Static langs:Lang.Controls}">
-            <ListBox BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
-                <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.PasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.DatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ClockDemoCtl}" Content="{x:Static langs:Lang.Clock}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Time_color_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TimePickerDemoCtl}" Content="{x:Static langs:Lang.TimePicker}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TimePicker_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CalendarWithClockDemoCtl}" Content="{x:Static langs:Lang.CalendarWithClock}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.DateTimePickerDemoCtl}" Content="{x:Static langs:Lang.DateTimePicker}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.FlipClockDemoCtl}" Content="{x:Static langs:Lang.FlipClock}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Star.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.ShieldDemoCtl}" Content="{x:Static langs:Lang.Shield}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Shield_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.SearchBarDemoCtl}" Content="{x:Static langs:Lang.SearchBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TagDemoCtl}" Content="{x:Static langs:Lang.Tag}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Tag_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.GifImageDemoCtl}" Content="{x:Static langs:Lang.GifImage}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.OutlineTextDemoCtl}" Content="{x:Static langs:Lang.OutlineText}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.WaterfallPanelDemoCtl}" Content="{x:Static langs:Lang.WaterfallPanel}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Panel_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.CoverViewDemoCtl}" Content="{x:Static langs:Lang.CoverView}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/DetailDataView_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.CoverFlowDemoCtl}" Content="{x:Static langs:Lang.CoverFlow}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/LinearCarousel_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CircleProgressBarDemoCtl}" Content="{x:Static langs:Lang.CircleProgressBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ShapeArcRing_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Flow_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.GrowlDemoCtl}" Content="{x:Static langs:Lang.Growl}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Message_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.LoadingDemoCtl}" Content="{x:Static langs:Lang.Loading}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Loading_Blue_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ImageBrowserDemoCtl}" Content="{x:Static langs:Lang.ImageBrowser}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ImageBrowser_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ColorPickerDemoCtl}" Content="{x:Static langs:Lang.ColorPicker}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ColorPalette_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CarouselDemoCtl}" Content="{x:Static langs:Lang.Carousel}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Carousel_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.CompareSliderDemoCtl}" Content="{x:Static langs:Lang.CompareSlider}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/SplitterControl_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.PreviewSliderDemoCtl}" Content="{x:Static langs:Lang.PreviewSlider}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/HoverMenu_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TimeBarDemoCtl}" Content="{x:Static langs:Lang.TimeBar}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Timeline_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.PaginationDemoCtl}" Content="{x:Static langs:Lang.Pagination}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Paginator_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.AnimationPathDemoCtl}" Content="{x:Static langs:Lang.AnimationPath}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/Path_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.TabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Tag="{x:Static data:MessageToken.ScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
-                    <controls:EdgeElement.LeftContent>
-                        <Image Source="../../Resources/Img/LeftMainContent/WindowsForm_16x.png"/>
-                    </controls:EdgeElement.LeftContent>
-                </ListBoxItem>
-            </ListBox>
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition/>
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition/>
+                    <ColumnDefinition Width="Auto"/>
+                </Grid.ColumnDefinitions>
+                <controls:SearchBar SearchStarted="SearchBarControl_OnSearchStarted" Style="{StaticResource SearchBarPlus}" controls:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4"/>
+                <ToggleButton Name="ButtonControlAscending" Click="ButtonControlAscending_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>
+                    <controls:StatusSwitchElement.CheckedElement>
+                        <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
+                    </controls:StatusSwitchElement.CheckedElement>
+                </ToggleButton>
+                <ListBox Name="listControl" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
+                    <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.PasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.DatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ClockDemoCtl}" Content="{x:Static langs:Lang.Clock}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Time_color_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TimePickerDemoCtl}" Content="{x:Static langs:Lang.TimePicker}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TimePicker_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CalendarWithClockDemoCtl}" Content="{x:Static langs:Lang.CalendarWithClock}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.DateTimePickerDemoCtl}" Content="{x:Static langs:Lang.DateTimePicker}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.FlipClockDemoCtl}" Content="{x:Static langs:Lang.FlipClock}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Star.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.ShieldDemoCtl}" Content="{x:Static langs:Lang.Shield}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Shield_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.SearchBarDemoCtl}" Content="{x:Static langs:Lang.SearchBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TagDemoCtl}" Content="{x:Static langs:Lang.Tag}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Tag_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.GifImageDemoCtl}" Content="{x:Static langs:Lang.GifImage}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.OutlineTextDemoCtl}" Content="{x:Static langs:Lang.OutlineText}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.WaterfallPanelDemoCtl}" Content="{x:Static langs:Lang.WaterfallPanel}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Panel_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.CoverViewDemoCtl}" Content="{x:Static langs:Lang.CoverView}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/DetailDataView_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.CoverFlowDemoCtl}" Content="{x:Static langs:Lang.CoverFlow}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/LinearCarousel_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CircleProgressBarDemoCtl}" Content="{x:Static langs:Lang.CircleProgressBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ShapeArcRing_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Flow_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.GrowlDemoCtl}" Content="{x:Static langs:Lang.Growl}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Message_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.LoadingDemoCtl}" Content="{x:Static langs:Lang.Loading}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Loading_Blue_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ImageBrowserDemoCtl}" Content="{x:Static langs:Lang.ImageBrowser}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ImageBrowser_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ColorPickerDemoCtl}" Content="{x:Static langs:Lang.ColorPicker}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ColorPalette_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CarouselDemoCtl}" Content="{x:Static langs:Lang.Carousel}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Carousel_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.CompareSliderDemoCtl}" Content="{x:Static langs:Lang.CompareSlider}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/SplitterControl_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.PreviewSliderDemoCtl}" Content="{x:Static langs:Lang.PreviewSlider}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/HoverMenu_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TimeBarDemoCtl}" Content="{x:Static langs:Lang.TimeBar}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Timeline_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.PaginationDemoCtl}" Content="{x:Static langs:Lang.Pagination}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Paginator_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.AnimationPathDemoCtl}" Content="{x:Static langs:Lang.AnimationPath}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/Path_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.TabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Tag="{x:Static data:MessageToken.ScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                    <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
+                        <controls:EdgeElement.LeftContent>
+                            <Image Source="../../Resources/Img/LeftMainContent/WindowsForm_16x.png"/>
+                        </controls:EdgeElement.LeftContent>
+                    </ListBoxItem>
+                </ListBox>
+            </Grid>
         </TabItem>
     </TabControl>
 </Border>
\ No newline at end of file
diff --git a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs
index 61fcfa75..2c5680ad 100644
--- a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs
+++ b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs
@@ -1,4 +1,9 @@
-using System.Windows.Controls;
+using System.ComponentModel;
+using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+using HandyControl.Data;
+using HandyControl.Tools.Extension;
 
 
 namespace HandyControlDemo.UserControl
@@ -26,5 +31,49 @@ namespace HandyControlDemo.UserControl
                 }
             }
         }
+
+        private void ButtonStyleAscending_OnClick(object sender, RoutedEventArgs e)
+        {
+            if (ButtonStyleAscending.IsChecked == true)
+            {
+                listStyle.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
+            }
+            else
+            {
+                listStyle.Items.SortDescriptions.Clear();
+            }
+        }
+
+        private void ButtonControlAscending_OnClick(object sender, RoutedEventArgs e)
+        {
+            if (ButtonControlAscending.IsChecked == true)
+            {
+                listControl.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
+            }
+            else
+            {
+                listControl.Items.SortDescriptions.Clear();
+            }
+        }
+
+        private void SearchBarStyle_OnSearchStarted(object sender, FunctionEventArgs<string> e)
+        {
+            if (e.Info == null) return;
+
+            foreach (var listBoxItem in listStyle.Items.OfType<ListBoxItem>())
+            {
+                listBoxItem.Show(listBoxItem.Content.ToString().Contains(e.Info));
+            }
+        }
+
+        private void SearchBarControl_OnSearchStarted(object sender, FunctionEventArgs<string> e)
+        {
+            if (e.Info == null) return;
+
+            foreach (var listBoxItem in listControl.Items.OfType<ListBoxItem>())
+            {
+                listBoxItem.Show(listBoxItem.Content.ToString().Contains(e.Info));
+            }
+        }
     }
 }