From d0094f049e8b86a57267b970a367ebb1e0a5e7ff Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Thu, 17 Jan 2019 15:00:08 +0800
Subject: [PATCH] add support for search

---
 HandyControl/Controls/Input/SearchBar.cs      |   4 +-
 .../Styles/Base/SearchBarBaseStyle.xaml       |  11 +-
 HandyControlDemo/HandyControlDemo.csproj      |   1 +
 .../Properties/Langs/Lang.Designer.cs         |  11 +-
 .../Properties/Langs/Lang.en.resx             |   3 +
 HandyControlDemo/Properties/Langs/Lang.resx   |   3 +
 .../SortAscending_grey_16x.png                | Bin 0 -> 356 bytes
 .../UserControl/Main/LeftMainContent.xaml     | 646 +++++++++---------
 .../UserControl/Main/LeftMainContent.xaml.cs  |  50 +-
 9 files changed, 415 insertions(+), 314 deletions(-)
 create mode 100644 HandyControlDemo/Resources/Img/LeftMainContent/SortAscending_grey_16x.png

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 bebcb158..732f8a4b 100644
--- a/HandyControlDemo/HandyControlDemo.csproj
+++ b/HandyControlDemo/HandyControlDemo.csproj
@@ -692,6 +692,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 717a2a83..66edf6f5 100644
--- a/HandyControlDemo/Properties/Langs/Lang.Designer.cs
+++ b/HandyControlDemo/Properties/Langs/Lang.Designer.cs
@@ -47,7 +47,7 @@ namespace HandyControlDemo.Properties.Langs {
         }
         
         /// <summary>
-        ///   使用此强类型资源类，为所有资源查找
+        ///   重写当前线程的 CurrentUICulture 属性
         ///   重写当前线程的 CurrentUICulture 属性。
         /// </summary>
         [global::System.ComponentModel.EditorBrowsableAttribute(global::System.ComponentModel.EditorBrowsableState.Advanced)]
@@ -717,6 +717,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 e236fd84..f2a6316e 100644
--- a/HandyControlDemo/Properties/Langs/Lang.en.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.en.resx
@@ -462,4 +462,7 @@
   <data name="CoverFlow" xml:space="preserve">
     <value>CoverFlow</value>
   </data>
+  <data name="PlsEnterKey" xml:space="preserve">
+    <value>Please input a keyword</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/HandyControlDemo/Properties/Langs/Lang.resx b/HandyControlDemo/Properties/Langs/Lang.resx
index 681ac894..de185647 100644
--- a/HandyControlDemo/Properties/Langs/Lang.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.resx
@@ -442,4 +442,7 @@
   <data name="CoverFlow" xml:space="preserve">
     <value>封面流</value>
   </data>
+  <data name="PlsEnterKey" xml:space="preserve">
+    <value>请输入关键字</value>
+  </data>
 </root>
\ No newline at end of file
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 0000000000000000000000000000000000000000..150a8703ffbcd30eb62d2bcd150f8203dde973a6
GIT binary patch
literal 356
zcmV-q0h|7bP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00009a7bBm000ie
z000ie0hKEb8vp<S7D+@wRCr#EQ$bFJFcd6JR~&!?u>CH)0u4Las9QCdZ~!hKG2etW
z$#<_8P&X`z9K{2$aL2a(skE7dUuBY)$D8TAw67(a=h=vV5XW&8(iBor6hU*}_u?-|
zF0xFE_qPw53ELa!EaS`&I4Z}gL6Rh5w>uL}^MGt?hC3>PA-#C<EA01Az7BwQ^&<KF
zhv$R1y1qoVH7_I|bER^`?cI$R$MMq!q2z)&wdJb1t`l`#pX4Mxk|2g*fPu}H0~Ad-
z_=xg6hk+Yf4v@4M;e|9!o%D*WI^Hz|2hC0N{1{(t+ZwI4sjA9M(}V}}=q7#)108{H
zaC{}-D>J<~YO*p%i)cbK;2|$YaQBW=TmL#XGJXKs>$!16a0Vg(0000<MNUMnLSTX{
CbCR+E

literal 0
HcmV?d00001

diff --git a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
index 6c6d7552..4e5625b5 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 Name="listStyle" 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 Name="listControl" 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 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 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 2268f3d9..ff057101 100644
--- a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs
+++ b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml.cs
@@ -1,5 +1,9 @@
 using System.ComponentModel;
+using System.Linq;
+using System.Windows;
 using System.Windows.Controls;
+using HandyControl.Data;
+using HandyControl.Tools.Extension;
 
 // ReSharper disable once CheckNamespace
 namespace HandyControlDemo.UserControl
@@ -12,8 +16,6 @@ namespace HandyControlDemo.UserControl
         public LeftMainContent()
         {
             InitializeComponent();
-            listStyle.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
-            listControl.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
         }
 
         private void TabControl_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
@@ -29,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));
+            }
+        }
     }
 }