add Drawer demo

2019-11-25 01:07:04 +08:00
1 parent 453839e763
commit d145dee9c9
@@ -0,0 +1,106 @@
+[
+  {
+    "title": "Styles",
+    "demoItemList": [
+      [ "Brush", "BrushDemoCtl", "Brush_16x", "" ],
+      [ "Button", "ButtonDemoCtl", "ButtonClick_16x", "" ],
+      [ "RepeatButton", "RepeatButtonDemoCtl", "RepeatButton_16x", "" ],
+      [ "ToggleButton", "ToggleButtonDemoCtl", "Toggle_16x", "" ],
+      [ "RadioButton", "RadioButtonDemoCtl", "RadioButton_16x", "" ],
+      [ "CheckBox", "CheckBoxDemoCtl", "CheckBox_16x", "" ],
+      [ "ScrollViewer", "NativeScrollViewerDemoCtl", "ScrollBox_16x", "" ],
+      [ "Slider", "SliderDemoCtl", "Slider_16x", "" ],
+      [ "TextBlock", "TextBlockDemoCtl", "TextBlock_16x", "" ],
+      [ "TextBox", "NativeTextBoxDemoCtl", "TextBox_16x", "" ],
+      [ "ComboBox", "NativeComboBoxDemoCtl", "ComboBox_16x", "" ],
+      [ "PasswordBox", "NativePasswordBoxDemoCtl", "PasswordBox_16x", "" ],
+      [ "Expander", "ExpanderDemoCtl", "Expander_16x", "" ],
+      [ "ProgressBar", "NativeProgressBarDemoCtl", "ProgressBar_16x", "" ],
+      [ "Calendar", "CalendarDemoCtl", "Calendar_16x", "" ],
+      [ "DatePicker", "NativeDatePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "TabControl", "NativeTabControlDemoCtl", "TabPage_16x", "" ],
+      [ "DataGrid", "DataGridDemoCtl", "DataGrid_16x", "" ],
+      [ "TreeView", "TreeViewDemoCtl", "TreeView_16x", "" ],
+      [ "ListBox", "ListBoxDemoCtl", "ListBox_16x", "" ],
+      [ "ListView", "ListViewDemoCtl", "ListView_16x", "" ],
+      [ "GroupBox", "GroupBoxDemoCtl", "GroupBox_16x", "" ],
+      [ "Menu", "MenuDemoCtl", "ContextMenu_16x", "" ],
+      [ "RichTextBox", "RichTextBoxDemoCtl", "RichTextBox_16x", "" ],
+      [ "ToolBar", "ToolBarDemoCtl", "ToolBar_16x", "" ],
+      [ "Border", "BorderDemoCtl", "BorderElement_16x", "" ],
+      [ "Label", "LabelDemoCtl", "Label_16x", "" ]
+    ]
+  },
+  {
+    "title": "Controls",
+    "demoItemList": [
+      [ "FloatingBlock", "FloatingBlockDemoCtl", "thumbs_up", "" ],
+      [ "ImageBlock", "ImageBlockDemoCtl", "ImageStack_16x", "" ],
+      [ "Magnifier", "MagnifierDemoCtl", "Search_16x", "" ],
+      [ "Gravatar", "GravatarDemoCtl", "User_16x", "" ],
+      [ "Badge", "BadgeDemoCtl", "DotLarge_16x", "" ],
+      [ "GotoTop", "GotoTopDemoCtl", "GoToTop_16x", "" ],
+      [ "SplitButton", "SplitButtonDemoCtl", "SplitButton_16x", "1" ],
+      [ "ButtonGroup", "ButtonGroupDemoCtl", "ButtonGroup_16x", "" ],
+      [ "ProgressButton", "ProgressButtonDemoCtl", "ProgressButton_16x", "" ],
+      [ "ChatBubble", "ChatBubbleDemoCtl", "Bubble_16xLG", "" ],
+      [ "Poptip", "PoptipDemoCtl", "PopupCursor_16x", "1" ],
+      [ "NotifyIcon", "NotifyIconDemoCtl", "NotificationHub_16x", "" ],
+      [ "NumericUpDown", "NumericUpDownDemoCtl", "NumericListBox_16x", "" ],
+      [ "TextBox", "TextBoxDemoCtl", "TextBox_16x", "" ],
+      [ "ComboBox", "ComboBoxDemoCtl", "ComboBox_16x", "" ],
+      [ "PasswordBox", "PasswordBoxDemoCtl", "PasswordBox_16x", "" ],
+      [ "DatePicker", "DatePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "Clock", "ClockDemoCtl", "Time_color_16x", "" ],
+      [ "TimePicker", "TimePickerDemoCtl", "TimePicker_16x", "" ],
+      [ "CalendarWithClock", "CalendarWithClockDemoCtl", "Calendar_16x", "" ],
+      [ "DateTimePicker", "DateTimePickerDemoCtl", "DatePicker_16x", "" ],
+      [ "Transfer", "TransferDemoCtl", "Transfer_16x", "" ],
+      [ "FlipClock", "FlipClockDemoCtl", "FlipVertical_16x", "" ],
+      [ "Rate", "RateDemoCtl", "Star", "" ],
+      [ "Shield", "ShieldDemoCtl", "Shield_16x", "" ],
+      [ "SearchBar", "SearchBarDemoCtl", "Search_16x", "" ],
+      [ "Tag", "TagDemoCtl", "Tag_16x", "" ],
+      [ "GifImage", "GifImageDemoCtl", "Animation_16x", "" ],
+      [ "OutlineText", "OutlineTextDemoCtl", "TextBlock_16x", "" ],
+      [ "RunningBlock", "RunningBlockDemoCtl", "Dynamic_16x", "" ],
+      [ "Card", "CardDemoCtl", "VSO_Card_16x", "" ],
+      [ "Divider", "DividerDemoCtl", "DottedSplitter_16x", "1" ],
+      [ "CirclePanel", "CirclePanelDemoCtl", "ColorWheel_16x", "" ],
+      [ "Grid", "GridDemoCtl", "GridPane_16x", "" ],
+      [ "WaterfallPanel", "WaterfallPanelDemoCtl", "Panel_16x", "" ],
+      [ "HoneycombPanel", "HoneycombPanelDemoCtl", "PolygonHexagon_16x", "" ],
+      [ "TransitioningContentControl", "TransitioningContentControlDemoCtl", "TransitioningContentControl_16x", "" ],
+      [ "Drawer", "DrawerDemoCtl", "View_Portrait_16x", "1" ],
+      [ "CoverView", "CoverViewDemoCtl", "DetailDataView_16x", "" ],
+      [ "CoverFlow", "CoverFlowDemoCtl", "LinearCarousel_16x", "" ],
+      [ "ProgressBar", "ProgressBarDemoCtl", "ProgressBar_16x", "" ],
+      [ "StepBar", "StepBarDemoCtl", "Flow_16x", "" ],
+      [ "Growl", "GrowlDemoCtl", "Message_16x", "" ],
+      [ "Loading", "LoadingDemoCtl", "Loading_Blue_16x", "" ],
+      [ "ImageBrowser", "ImageBrowserDemoCtl", "ImageBrowser_16x", "" ],
+      [ "ColorPicker", "ColorPickerDemoCtl", "ColorPalette_16x", "" ],
+      [ "Carousel", "CarouselDemoCtl", "Carousel_16x", "" ],
+      [ "CompareSlider", "CompareSliderDemoCtl", "SplitterControl_16x", "" ],
+      [ "PreviewSlider", "PreviewSliderDemoCtl", "HoverMenu_16x", "" ],
+      [ "RangeSlider", "RangeSliderDemoCtl", "brackets_Square_16xLG", "" ],
+      [ "TimeBar", "TimeBarDemoCtl", "Timeline_16x", "" ],
+      [ "Pagination", "PaginationDemoCtl", "Paginator_16x", "" ],
+      [ "AnimationPath", "AnimationPathDemoCtl", "Path_16x", "" ],
+      [ "TabControl", "TabControlDemoCtl", "TabPage_16x", "" ],
+      [ "SideMenu", "SideMenuDemoCtl", "MainMenuControl_16x", "" ],
+      [ "ScrollViewer", "ScrollViewerDemoCtl", "ScrollBox_16x", "" ],
+      [ "Sprite", "SpriteDemoCtl", "HandyControl", "" ],
+      [ "Notification", "NotificationDemoCtl", "Procedure_16x", "" ],
+      [ "Dialog", "DialogDemoCtl", "Dialog_16x", "" ],
+      [ "Window", "WindowDemoCtl", "WindowsForm_16x", "" ]
+    ]
+  },
+  {
+    "title": "Tools",
+    "demoItemList": [
+      [ "HatchBrushGenerator", "HatchBrushGeneratorDemoCtl", "DataGenerator_16x", "" ],
+      [ "Morphing Animation", "GeometryAnimationDemoCtl", "Animation_16x", "1" ]
+    ]
+  }
+]
@@ -0,0 +1,34 @@
+using System.Collections.Generic;
+using GalaSoft.MvvmLight;
+
+namespace HandyControlDemo.Data
+{
+    public class DemoInfoModel : ViewModelBase
+    {
+        private string _title;
+
+        public string Title
+        {
+            get => _title;
+#if netle40
+            set => Set(nameof(Title), ref _title, value);
+#else
+            set => Set(ref _title, value);
+#endif
+        }
+
+        private int _selectedIndex = -1;
+
+        public int SelectedIndex
+        {
+            get => _selectedIndex;
+#if netle40
+            set => Set(nameof(SelectedIndex), ref _selectedIndex, value);
+#else
+            set => Set(ref _selectedIndex, value);
+#endif   
+        }
+
+        public IList<DemoItemModel> DemoItemList { get; set; }
+    }
+}
@@ -0,0 +1,13 @@
+namespace HandyControlDemo.Data
+{
+    public class DemoItemModel
+    {
+        public string Name { get; set; }
+
+        public string TargetCtlName { get; set; }
+
+        public string ImageName { get; set; }
+
+        public bool IsNew { get; set; }
+    }
+}
@@ -21,6 +21,8 @@
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\AvatarModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\CoverViewDemoModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoDataModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoInfoModel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\DemoItemModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\StepBarDemoModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Data\Model\TabControlDemoModel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)MainWindow.xaml.cs">
@@ -18,7 +18,6 @@ namespace HandyControlDemo
        {
            base.OnInitialized(e);

-            Messenger.Default.Send<object>(null, MessageToken.ClearLeftSelected);
            Messenger.Default.Send(true, MessageToken.FullSwitch);
            Messenger.Default.Send(AssemblyHelper.CreateInternalInstance($"UserControl.{MessageToken.OverView}"), MessageToken.LoadShowContent);
        }
@@ -510,6 +510,15 @@ namespace HandyControlDemo.Properties.Langs {
            }
        }
        
+        /// <summary>
+        ///   查找类似 抽屉 的本地化字符串。
+        /// </summary>
+        public static string Drawer {
+            get {
+                return ResourceManager.GetString("Drawer", resourceCulture);
+            }
+        }
+        
        /// <summary>
        ///   查找类似 邮箱 的本地化字符串。
        /// </summary>
@@ -687,4 +687,7 @@
  <data name="TransitioningContentControl" xml:space="preserve">
    <value>TransitioningContentControl</value>
  </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
@@ -687,4 +687,7 @@
  <data name="TransitioningContentControl" xml:space="preserve">
    <value>TransitioningContentControl</value>
  </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
@@ -687,4 +687,7 @@
  <data name="TransitioningContentControl" xml:space="preserve">
    <value>TransitioningContentControl</value>
  </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>Drawer</value>
+  </data>
 </root>
@@ -687,4 +687,7 @@
  <data name="TransitioningContentControl" xml:space="preserve">
    <value>内容过渡控件</value>
  </data>
+  <data name="Drawer" xml:space="preserve">
+    <value>抽屉</value>
+  </data>
 </root>
@@ -2,8 +2,10 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Globalization;
+using System.IO;
 using System.Linq;
 using System.Net;
+using System.Windows;
 using HandyControl.Data;
 using HandyControlDemo.Data;
 using HandyControlDemo.Tools.Converter;
@@ -341,5 +343,56 @@ namespace HandyControlDemo.Service
                }
            };
        }
+
+        internal List<DemoInfoModel> GetDemoInfo()
+        {
+            var infoList = new List<DemoInfoModel>();
+
+            var stream = Application.GetResourceStream(new Uri("Data/DemoInfo.json", UriKind.Relative))?.Stream;
+            if (stream == null) return infoList;
+
+            string jsonStr;
+            using (var reader = new StreamReader(stream))
+            {
+                jsonStr = reader.ReadToEnd();
+            }
+
+            var jsonObj = JsonConvert.DeserializeObject<dynamic>(jsonStr);
+            foreach (var item in jsonObj)
+            {
+                var title = Properties.Langs.Lang.ResourceManager.GetString((string)item.title);
+                var list = Convert2DemoItemList(item.demoItemList);
+                infoList.Add(new DemoInfoModel
+                {
+                    Title = title,
+                    DemoItemList = list
+                });
+            }
+
+            return infoList;
+        }
+
+        private List<DemoItemModel> Convert2DemoItemList(dynamic list)
+        {
+            var resultList = new List<DemoItemModel>();
+
+            foreach (var item in list)
+            {
+                var name = Properties.Langs.Lang.ResourceManager.GetString((string)item[0]);
+                string targetCtlName = item[1];
+                string imageName = item[2];
+                var isNew = !string.IsNullOrEmpty((string)item[3]);
+
+                resultList.Add(new DemoItemModel
+                {
+                    Name = name,
+                    TargetCtlName = targetCtlName,
+                    ImageName = $"../../Resources/Img/LeftMainContent/{imageName}.png",
+                    IsNew = isNew
+                });
+            }
+
+            return resultList;
+        }
    }
 }
@@ -3,529 +3,66 @@
        xmlns:command="http://www.galasoft.ch/mvvmlight"
        x:Class="HandyControlDemo.UserControl.LeftMainContent"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-        xmlns:data="clr-namespace:HandyControlDemo.Data"
        Background="{Binding Background,RelativeSource={RelativeSource AncestorType=Window}}"
        xmlns:hc="https://handyorg.github.io/handycontrol"
        xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+    <Border.Resources>
+        <Style x:Key="DemoInfoSortButtonStyle" BasedOn="{StaticResource ToggleButtonCustom}" TargetType="ToggleButton" x:Shared="False">
+            <Setter Property="Content">
+                <Setter.Value>
+                    <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
+                        <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
+                    </Border>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="hc:StatusSwitchElement.CheckedElement">
+                <Setter.Value>
+                    <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
+                </Setter.Value>
+            </Setter>
+        </Style>
+    </Border.Resources>
    <DockPanel>
        <Button Command="{Binding OpenOverviewCmd}" DockPanel.Dock="Top" HorizontalAlignment="Stretch" Margin="4,4,4,0" Content="{x:Static langs:Lang.Overview}"/>
-        <TabControl SelectionChanged="TabControl_OnSelectionChanged" Style="{StaticResource TabControlInLine}" Background="Transparent" >
+        <TabControl SelectionChanged="TabControl_OnSelectionChanged" ItemsSource="{Binding DemoInfoList}" Style="{StaticResource TabControlInLine}" Background="Transparent" SelectedIndex="0">
+            <TabControl.ItemTemplate>
+                <DataTemplate>
+                    <TextBlock Text="{Binding Title}"/>
+                </DataTemplate>
+            </TabControl.ItemTemplate>
+            <TabControl.ContentTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+                        <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxDemo}"/>
+                        <ToggleButton Tag="{Binding ElementName=ListBoxDemo}" Name="ButtonStyleAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource DemoInfoSortButtonStyle}"/>
+                        <ListBox Name="ListBoxDemo" SelectedIndex="{Binding SelectedIndex}" ItemsSource="{Binding DemoItemList}" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
+                            <ListBox.ItemTemplate>
+                                <DataTemplate>
+                                    <StackPanel Orientation="Horizontal">
+                                        <Image Width="16" Height="16" Source="{Binding ImageName}"/>
+                                        <TextBlock Margin="6,0,0,0" Text="{Binding Name}"/>
+                                        <Path Visibility="{Binding IsNew,Converter={StaticResource Boolean2VisibilityConverter}}" VerticalAlignment="Center" Data="{StaticResource NewGeometry}" Stretch="Uniform" Margin="10,0,0,0" Width="30" Height="14" Fill="{DynamicResource DangerBrush}"/>
+                                    </StackPanel>
+                                </DataTemplate>
+                            </ListBox.ItemTemplate>
+                        </ListBox>
+                    </Grid>
+                </DataTemplate>
+            </TabControl.ContentTemplate>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <command:EventToCommand Command="{Binding SwitchDemoCmd}" PassEventArgsToCommand="True" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Styles}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxStyle}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxStyle}" Name="ButtonStyleAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxStyle" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BrushDemoCtl}" Content="{x:Static langs:Lang.Brush}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Brush_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ButtonDemoCtl}" Content="{x:Static langs:Lang.Button}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ButtonClick_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RepeatButtonDemoCtl}" Content="{x:Static langs:Lang.RepeatButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RepeatButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ToggleButtonDemoCtl}" Content="{x:Static langs:Lang.ToggleButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Toggle_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RadioButtonDemoCtl}" Content="{x:Static langs:Lang.RadioButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RadioButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CheckBoxDemoCtl}" Content="{x:Static langs:Lang.CheckBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/CheckBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SliderDemoCtl}" Content="{x:Static langs:Lang.Slider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Slider_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TextBlockDemoCtl}" Content="{x:Static langs:Lang.TextBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeTextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativePasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ExpanderDemoCtl}" Content="{x:Static langs:Lang.Expander}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Expander_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CalendarDemoCtl}" Content="{x:Static langs:Lang.Calendar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeDatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NativeTabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DataGridDemoCtl}" Content="{x:Static langs:Lang.DataGrid}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DataGrid_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TreeViewDemoCtl}" Content="{x:Static langs:Lang.TreeView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TreeView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ListBoxDemoCtl}" Content="{x:Static langs:Lang.ListBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ListBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ListViewDemoCtl}" Content="{x:Static langs:Lang.ListView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ListView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GroupBoxDemoCtl}" Content="{x:Static langs:Lang.GroupBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GroupBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.MenuDemoCtl}" Content="{x:Static langs:Lang.Menu}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ContextMenu_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RichTextBoxDemoCtl}" Content="{x:Static langs:Lang.RichTextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/RichTextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ToolBarDemoCtl}" Content="{x:Static langs:Lang.ToolBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ToolBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BorderDemoCtl}" Name="ListBoxItemBorder">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/BorderElement_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.LabelDemoCtl}" Content="{x:Static langs:Lang.Label}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Label_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-
-                    </ListBox>
-                </Grid>
-            </TabItem>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Controls}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxControl}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxControl}" Name="ButtonControlAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxControl" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.FloatingBlockDemoCtl}" Content="{x:Static langs:Lang.FloatingBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/thumbs_up.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ImageBlockDemoCtl}" Content="{x:Static langs:Lang.ImageBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ImageStack_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.MagnifierDemoCtl}" Content="{x:Static langs:Lang.Magnifier}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GravatarDemoCtl}" Content="{x:Static langs:Lang.Gravatar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/User_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.BadgeDemoCtl}" Content="{x:Static langs:Lang.Badge}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DotLarge_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GotoTopDemoCtl}" Content="{x:Static langs:Lang.GotoTop}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GoToTop_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.SplitButtonDemoCtl}" Content="{x:Static langs:Lang.SplitButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/SplitButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ButtonGroupDemoCtl}" Content="{x:Static langs:Lang.ButtonGroup}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ButtonGroup_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ProgressButtonDemoCtl}" Content="{x:Static langs:Lang.ProgressButton}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressButton_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ChatBubbleDemoCtl}" Content="{x:Static langs:Lang.ChatBubble}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Bubble_16xLG.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.PoptipDemoCtl}" Content="{x:Static langs:Lang.Poptip}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PopupCursor_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NotifyIconDemoCtl}" Content="{x:Static langs:Lang.NotifyIcon}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/NotificationHub_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NumericUpDownDemoCtl}" Content="{x:Static langs:Lang.NumericUpDown}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/NumericListBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TextBoxDemoCtl}" Content="{x:Static langs:Lang.TextBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ComboBoxDemoCtl}" Content="{x:Static langs:Lang.ComboBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ComboBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PasswordBoxDemoCtl}" Content="{x:Static langs:Lang.PasswordBox}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PasswordBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DatePickerDemoCtl}" Content="{x:Static langs:Lang.DatePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ClockDemoCtl}" Content="{x:Static langs:Lang.Clock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Time_color_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TimePickerDemoCtl}" Content="{x:Static langs:Lang.TimePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TimePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CalendarWithClockDemoCtl}" Content="{x:Static langs:Lang.CalendarWithClock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Calendar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DateTimePickerDemoCtl}" Content="{x:Static langs:Lang.DateTimePicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DatePicker_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TransferDemoCtl}" Content="{x:Static langs:Lang.Transfer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Transfer_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.FlipClockDemoCtl}" Content="{x:Static langs:Lang.FlipClock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/FlipVertical_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RateDemoCtl}" Content="{x:Static langs:Lang.Rate}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Star.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ShieldDemoCtl}" Content="{x:Static langs:Lang.Shield}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Shield_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SearchBarDemoCtl}" Content="{x:Static langs:Lang.SearchBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TagDemoCtl}" Content="{x:Static langs:Lang.Tag}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Tag_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GifImageDemoCtl}" Content="{x:Static langs:Lang.GifImage}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.OutlineTextDemoCtl}" Content="{x:Static langs:Lang.OutlineText}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RunningBlockDemoCtl}" Content="{x:Static langs:Lang.RunningBlock}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Dynamic_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CardDemoCtl}" Content="{x:Static langs:Lang.Card}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/VSO_Card_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.DividerDemoCtl}" Content="{x:Static langs:Lang.Divider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DottedSplitter_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CirclePanelDemoCtl}" Content="{x:Static langs:Lang.CirclePanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ColorWheel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GridDemoCtl}" Content="{x:Static langs:Lang.Grid}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/GridPane_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.WaterfallPanelDemoCtl}" Content="{x:Static langs:Lang.WaterfallPanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Panel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.HoneycombPanelDemoCtl}" Content="{x:Static langs:Lang.HoneycombPanel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/PolygonHexagon_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TransitioningContentControlDemoCtl}" Content="{x:Static langs:Lang.TransitioningContentControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TransitioningContentControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CoverViewDemoCtl}" Content="{x:Static langs:Lang.CoverView}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DetailDataView_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CoverFlowDemoCtl}" Content="{x:Static langs:Lang.CoverFlow}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/LinearCarousel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ProgressBarDemoCtl}" Content="{x:Static langs:Lang.ProgressBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ProgressBar_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.StepBarDemoCtl}" Content="{x:Static langs:Lang.StepBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Flow_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GrowlDemoCtl}" Content="{x:Static langs:Lang.Growl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Message_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.LoadingDemoCtl}" Content="{x:Static langs:Lang.Loading}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Loading_Blue_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ImageBrowserDemoCtl}" Content="{x:Static langs:Lang.ImageBrowser}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ImageBrowser_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ColorPickerDemoCtl}" Content="{x:Static langs:Lang.ColorPicker}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ColorPalette_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CarouselDemoCtl}" Content="{x:Static langs:Lang.Carousel}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Carousel_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.CompareSliderDemoCtl}" Content="{x:Static langs:Lang.CompareSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/SplitterControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PreviewSliderDemoCtl}" Content="{x:Static langs:Lang.PreviewSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/HoverMenu_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.RangeSliderDemoCtl}" Content="{x:Static langs:Lang.RangeSlider}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/brackets_Square_16xLG.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TimeBarDemoCtl}" Content="{x:Static langs:Lang.TimeBar}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Timeline_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.PaginationDemoCtl}" Content="{x:Static langs:Lang.Pagination}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Paginator_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.AnimationPathDemoCtl}" Content="{x:Static langs:Lang.AnimationPath}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Path_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.TabControlDemoCtl}" Content="{x:Static langs:Lang.TabControl}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SideMenuDemoCtl}" Content="{x:Static langs:Lang.SideMenu}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/MainMenuControl_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.ScrollViewerDemoCtl}" Content="{x:Static langs:Lang.ScrollViewer}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.SpriteDemoCtl}" Content="{x:Static langs:Lang.Sprite}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/HandyControl.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.NotificationDemoCtl}" Content="{x:Static langs:Lang.Notification}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Procedure_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.DialogDemoCtl}" Content="{x:Static langs:Lang.Dialog}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Dialog_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.WindowDemoCtl}" Content="{x:Static langs:Lang.Window}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/WindowsForm_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                    </ListBox>
-                </Grid>
-            </TabItem>
-            <TabItem Background="Transparent" Header="{x:Static langs:Lang.Tools}">
-                <Grid>
-                    <Grid.RowDefinitions>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition/>
-                        <ColumnDefinition Width="Auto"/>
-                    </Grid.ColumnDefinitions>
-                    <hc:SearchBar SearchStarted="SearchBar_OnSearchStarted" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterKey}" Margin="4" Tag="{Binding ElementName=ListBoxStyle}"/>
-                    <ToggleButton Tag="{Binding ElementName=ListBoxTool}" Name="ButtonToolAscending" Click="ButtonAscending_OnClick" Grid.Row="0" Grid.Column="1" Margin="0,0,4,0" Style="{StaticResource ToggleButtonCustom}">
-                        <Border CornerRadius="4" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="{DynamicResource RegionBrush}" Height="30" Width="30" >
-                            <Image Stretch="None" Source="/HandyControlDemo;component/Resources/Img/LeftMainContent/SortAscending_grey_16x.png"/>
-                        </Border>
-                        <hc:StatusSwitchElement.CheckedElement>
-                            <Border CornerRadius="4" Height="30" Width="30" BorderThickness="1" BorderBrush="{DynamicResource PrimaryBrush}"/>
-                        </hc:StatusSwitchElement.CheckedElement>
-                    </ToggleButton>
-                    <ListBox Name="ListBoxTool" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single" Style="{StaticResource ListBoxTransparent}">
-                        <ListBoxItem Tag="{x:Static data:MessageToken.HatchBrushGeneratorDemoCtl}" Content="{x:Static langs:Lang.HatchBrushGenerator}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/DataGenerator_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                        <ListBoxItem Tag="{x:Static data:MessageToken.GeometryAnimationDemoCtl}" Content="{x:Static langs:Lang.Morphing_Animation}">
-                            <hc:EdgeElement.LeftContent>
-                                <Image Source="../../Resources/Img/LeftMainContent/Animation_16x.png"/>
-                            </hc:EdgeElement.LeftContent>
-                        </ListBoxItem>
-                    </ListBox>
-                </Grid>
-            </TabItem>
        </TabControl>
    </DockPanel>
 </Border>
@@ -1,11 +1,10 @@
 using System.ComponentModel;
-using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
 using HandyControl.Data;
-using HandyControl.Tools;
 using HandyControl.Tools.Extension;
+using HandyControlDemo.Data;


 namespace HandyControlDemo.UserControl
@@ -18,27 +17,16 @@ namespace HandyControlDemo.UserControl
        public LeftMainContent()
        {
            InitializeComponent();
-
-            /*You have to ask me why I made Border special.
-             What drives me crazy is that if you don't do this, 
-             the content of ListBoxItemBorder will always be 1 ! 
-             How amazing!
-             I wish someone could tell me why. */
-            ListBoxItemBorder.Content = Properties.Langs.Lang.Border;
        }

        private void TabControl_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count == 0) return;
-            if (e.AddedItems[0] is TabItem tabItem && 
-                VisualHelper.GetChild<ListBox>(tabItem.Content as DependencyObject) is ListBox listBox)
+            if (e.AddedItems[0] is DemoInfoModel demoInfo)
            {
-                if (listBox.SelectedItem != null)
-                {
-                    var item = listBox.SelectedItem;
-                    listBox.SelectedIndex = -1;
-                    listBox.SelectedItem = item;
-                }
+                var selectedIndex = demoInfo.SelectedIndex;
+                demoInfo.SelectedIndex = -1;
+                demoInfo.SelectedIndex = selectedIndex;
            }
        }

@@ -48,7 +36,7 @@ namespace HandyControlDemo.UserControl
            {
                if (button.IsChecked == true)
                {
-                    itemsControl.Items.SortDescriptions.Add(new SortDescription("Content", ListSortDirection.Ascending));
+                    itemsControl.Items.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
                }
                else
                {
@@ -61,11 +49,12 @@ namespace HandyControlDemo.UserControl
        {
            if (e.Info == null) return;
            if (!(sender is FrameworkElement searchBar && searchBar.Tag is ListBox listBox)) return;
-            foreach (var listBoxItem in listBox.Items.OfType<ListBoxItem>())
+            foreach (DemoItemModel item in listBox.Items)
            {
-                listBoxItem.Show(listBoxItem.Content.ToString().ToLower().Contains(e.Info.ToLower()) ||
-                                 listBoxItem.Tag.ToString().Replace("DemoCtl", "").ToLower().Contains(e.Info.ToLower()));
+                var listBoxItem = listBox.ItemContainerGenerator.ContainerFromItem(item) as ListBoxItem;
+                listBoxItem?.Show(item.Name.ToLower().Contains(e.Info.ToLower()) ||
+                                  item.TargetCtlName.Replace("DemoCtl", "").ToLower().Contains(e.Info.ToLower()));
            }
        }
    }
-}
+}
@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Windows.Controls;
 #if netle40
 using GalaSoft.MvvmLight.Command;
@@ -29,9 +30,14 @@ namespace HandyControlDemo.ViewModel
        private object _subContent;

        /// <summary>
-        ///     当前选中的列表项
+        ///     demo信息
        /// </summary>
-        private ListBoxItem _listBoxItemCurrent;
+        private List<DemoInfoModel> _demoInfoList;
+
+        /// <summary>
+        ///     当前选中的demo项
+        /// </summary>
+        private DemoItemModel _demoItemCurrent;

        #endregion

@@ -45,13 +51,18 @@ namespace HandyControlDemo.ViewModel
                }
                SubContent = obj;
            });
+
            Messenger.Default.Register<object>(this, MessageToken.ClearLeftSelected, obj =>
            {
-                if (_listBoxItemCurrent == null) return;
-                _listBoxItemCurrent.IsSelected = false;
-                _listBoxItemCurrent = null;
+                _demoItemCurrent = null;
+                foreach (var item in DemoInfoList)
+                {
+                    item.SelectedIndex = -1;
+                }
            });
+
            DataList = dataService.GetDemoDataList();
+            DemoInfoList = dataService.GetDemoInfo();
        }

        #region 属性
@@ -82,6 +93,19 @@ namespace HandyControlDemo.ViewModel
 #endif
        }

+        /// <summary>
+        ///     demo信息
+        /// </summary>
+        public List<DemoInfoModel> DemoInfoList
+        {
+            get => _demoInfoList;
+#if netle40
+            set => Set(nameof(DemoInfoList), ref _demoInfoList, value);
+#else
+            set => Set(ref _demoInfoList, value);
+#endif
+        }
+
        #endregion

        #region 命令
@@ -115,24 +139,16 @@ namespace HandyControlDemo.ViewModel
        private void SwitchDemo(SelectionChangedEventArgs e)
        {
            if (e.AddedItems.Count == 0) return;
-            if (e.AddedItems[0] is ListBoxItem item)
+            if (e.AddedItems[0] is DemoItemModel item)
            {
-                if (item.Tag is string tag)
-                {
-                    if (Equals(_listBoxItemCurrent, item)) return;
-                    _listBoxItemCurrent = item;
-                    ContentTitle = item.Content;
-                    var obj = AssemblyHelper.ResolveByKey(tag);
-                    var ctl = obj ?? AssemblyHelper.CreateInternalInstance($"UserControl.{tag}");
-                    Messenger.Default.Send(ctl is IFull, MessageToken.FullSwitch);
-                    Messenger.Default.Send(ctl, MessageToken.LoadShowContent);
-                }
-                else
-                {
-                    _listBoxItemCurrent = null;
-                    ContentTitle = null;
-                    SubContent = null;
-                }
+                if (Equals(_demoItemCurrent, item)) return;
+
+                _demoItemCurrent = item;
+                ContentTitle = item.Name;
+                var obj = AssemblyHelper.ResolveByKey(item.TargetCtlName);
+                var ctl = obj ?? AssemblyHelper.CreateInternalInstance($"UserControl.{item.TargetCtlName}");
+                Messenger.Default.Send(ctl is IFull, MessageToken.FullSwitch);
+                Messenger.Default.Send(ctl, MessageToken.LoadShowContent);
            }
        }