add PreviewSlider

2018-10-30 00:16:04 +08:00
1 parent 0796857ed5
commit 969f58e501
@@ -1,10 +1,86 @@
-using System.Windows.Controls;
+using System;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using System.Windows.Media;
+using HandyControl.Data;

 // ReSharper disable once CheckNamespace
 namespace HandyControl.Controls
 {
+    [TemplatePart(Name = PreviewContentKey, Type = typeof(ContentControl))]
    public class PreviewSlider : Slider
    {
-        
+        private const string PreviewContentKey = "PART_ContentBorder";
+
+        private ContentControl _previewContent;
+
+        private TranslateTransform _transform;
+
+        /// <summary>
+        ///     预览内容
+        /// </summary>
+        public static readonly DependencyProperty PreviewContentProperty = DependencyProperty.Register(
+            "PreviewContent", typeof(object), typeof(PreviewSlider), new PropertyMetadata(default(object)));
+
+        /// <summary>
+        ///     预览内容
+        /// </summary>
+        public object PreviewContent
+        {
+            get => GetValue(PreviewContentProperty);
+            set => SetValue(PreviewContentProperty, value);
+        }
+
+        public static readonly DependencyProperty PreviewPositionProperty = DependencyProperty.Register(
+            "PreviewPosition", typeof(double), typeof(PreviewSlider), new PropertyMetadata(default(double)));
+
+        public double PreviewPosition
+        {
+            get => (double) GetValue(PreviewPositionProperty);
+            set => SetValue(PreviewPositionProperty, value);
+        }
+
+        /// <summary>
+        ///     值改变事件
+        /// </summary>
+        public static readonly RoutedEvent PreviewPositionChangedEvent =
+            EventManager.RegisterRoutedEvent("PreviewPositionChanged", RoutingStrategy.Bubble,
+                typeof(EventHandler<FunctionEventArgs<double>>), typeof(PreviewSlider));
+
+        /// <summary>
+        ///     值改变事件
+        /// </summary>
+        public event EventHandler<FunctionEventArgs<double>> PreviewPositionChanged
+        {
+            add => AddHandler(PreviewPositionChangedEvent, value);
+            remove => RemoveHandler(PreviewPositionChangedEvent, value);
+        }
+
+        protected override void OnMouseMove(MouseEventArgs e)
+        {
+            base.OnMouseMove(e);
+
+            var p = e.GetPosition(this);
+            _transform.X = p.X - _previewContent.ActualWidth/2;
+
+            PreviewPosition = p.X / ActualWidth * Maximum;
+            RaiseEvent(new FunctionEventArgs<double>(PreviewPositionChangedEvent, this)
+            {
+                Info = PreviewPosition
+            });
+        }
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+            _previewContent = Template.FindName(PreviewContentKey, this) as ContentControl;
+
+            if (_previewContent != null)
+            {
+                _transform = new TranslateTransform();
+                _previewContent.RenderTransform = _transform;
+            }
+        }
    }
 }
@@ -19,7 +19,7 @@ namespace HandyControl.Controls
        private Button _buttonClose;

        /// <summary>
-        /// 动画速度
+        ///     动画速度
        /// </summary>
        private const int AnimationSpeed = 150;

@@ -2,7 +2,7 @@
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:controls="clr-namespace:HandyControl.Controls">

-    <Style x:Key="LoadingBaseStyle" TargetType="{x:Type controls:LoadingBase}">
+    <Style x:Key="LoadingBaseStyle" TargetType="controls:LoadingBase">
        <Setter Property="DotDiameter" Value="10"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
    </Style>
@@ -6,7 +6,7 @@
        <ResourceDictionary Source="LoadingBaseStyle.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    
-    <Style x:Key="LoadingCircleBaseStyle" BasedOn="{StaticResource LoadingBaseStyle}" TargetType="{x:Type controls:LoadingCircle}">
+    <Style x:Key="LoadingCircleBaseStyle" BasedOn="{StaticResource LoadingBaseStyle}" TargetType="controls:LoadingCircle">
        <Setter Property="Width" Value="40"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="DotDiameter" Value="5"/>
@@ -6,7 +6,7 @@
        <ResourceDictionary Source="LoadingBaseStyle.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    
-    <Style x:Key="LoadingLineBaseStyle" BasedOn="{StaticResource LoadingBaseStyle}" TargetType="{x:Type controls:LoadingLine}">
+    <Style x:Key="LoadingLineBaseStyle" BasedOn="{StaticResource LoadingBaseStyle}" TargetType="controls:LoadingLine">
        <Setter Property="DotDiameter" Value="5"/>
    </Style>

@@ -158,7 +158,7 @@
        </ControlTemplate.Triggers>
    </ControlTemplate>

-    <ControlTemplate x:Key="ScrollViewerBaseControlTemplate" TargetType="{x:Type controls:ScrollViewer}">
+    <ControlTemplate x:Key="ScrollViewerBaseControlTemplate" TargetType="controls:ScrollViewer">
        <ControlTemplate.Resources>
            <Storyboard x:Key="Storyboard1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_VerticalScrollBar">
@@ -206,7 +206,7 @@
        <Setter Property="Template" Value="{StaticResource ScrollViewerNativeBaseControlTemplate}"/>
    </Style>
    
-    <Style x:Key="ScrollViewerBaseStyle" TargetType="{x:Type controls:ScrollViewer}">
+    <Style x:Key="ScrollViewerBaseStyle" TargetType="controls:ScrollViewer">
        <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Template" Value="{StaticResource ScrollViewerBaseControlTemplate}"/>
@@ -8,28 +8,28 @@
    </ResourceDictionary.MergedDictionaries>

    <!--直线加载条默认样式-->
-    <Style BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="{x:Type controls:LoadingLine}"/>
+    <Style BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="controls:LoadingLine"/>

-    <Style x:Key="LoadingLineLight" BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="{x:Type controls:LoadingLine}">
+    <Style x:Key="LoadingLineLight" BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="controls:LoadingLine">
        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
    </Style>

-    <Style x:Key="LoadingLineLarge" BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="{x:Type controls:LoadingLine}">
+    <Style x:Key="LoadingLineLarge" BasedOn="{StaticResource LoadingLineBaseStyle}" TargetType="controls:LoadingLine">
        <Setter Property="DotDiameter" Value="10"/>
    </Style>

-    <Style x:Key="LoadingLineLargeLight" BasedOn="{StaticResource LoadingLineLarge}" TargetType="{x:Type controls:LoadingLine}">
+    <Style x:Key="LoadingLineLargeLight" BasedOn="{StaticResource LoadingLineLarge}" TargetType="controls:LoadingLine">
        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
    </Style>

    <!--圆形加载条默认样式-->
-    <Style BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="{x:Type controls:LoadingCircle}"/>
+    <Style BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="controls:LoadingCircle"/>

-    <Style x:Key="LoadingCircleLight" BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="{x:Type controls:LoadingCircle}">
+    <Style x:Key="LoadingCircleLight" BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="controls:LoadingCircle">
        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
    </Style>

-    <Style x:Key="LoadingCircleLarge" BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="{x:Type controls:LoadingCircle}">
+    <Style x:Key="LoadingCircleLarge" BasedOn="{StaticResource LoadingCircleBaseStyle}" TargetType="controls:LoadingCircle">
        <Setter Property="Width" Value="100"/>
        <Setter Property="Height" Value="100"/>
        <Setter Property="DotDiameter" Value="10"/>
@@ -38,7 +38,7 @@
        <Setter Property="DotDelayTime" Value="120"/>
    </Style>

-    <Style x:Key="LoadingCircleLargeLight" BasedOn="{StaticResource LoadingCircleLarge}" TargetType="{x:Type controls:LoadingCircle}">
+    <Style x:Key="LoadingCircleLargeLight" BasedOn="{StaticResource LoadingCircleLarge}" TargetType="controls:LoadingCircle">
        <Setter Property="Foreground" Value="{DynamicResource TextIconBrush}"/>
    </Style>

@@ -9,6 +9,6 @@
    <!--default style-->
    <Style BasedOn="{StaticResource ScrollViewerNativeBaseStyle}" TargetType="ScrollViewer"/>

-    <Style BasedOn="{StaticResource ScrollViewerBaseStyle}" TargetType="{x:Type controls:ScrollViewer}"/>
+    <Style BasedOn="{StaticResource ScrollViewerBaseStyle}" TargetType="controls:ScrollViewer"/>

 </ResourceDictionary>
@@ -4,9 +4,10 @@

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="../Basic/Geometries.xaml"/>
+        <ResourceDictionary Source="../Basic/Effects.xaml"/>
    </ResourceDictionary.MergedDictionaries>

-    <Style x:Key="ColorPickerRepeatButton" TargetType="RepeatButton">
+    <Style x:Key="SliderRepeatButtonBaseStyle" TargetType="RepeatButton">
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Focusable" Value="false"/>
@@ -37,10 +38,10 @@
            </Border>
            <Track x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ColorPickerRepeatButton}"/>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ColorPickerRepeatButton}"/>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb x:Name="Thumb" Focusable="False" Height="13" Width="13" OverridesDefaultStyle="True" Template="{StaticResource ColorPickerSliderThumbTemplate}" VerticalAlignment="Center">
@@ -66,10 +67,10 @@
            </Border>
            <Track x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ColorPickerRepeatButton}"/>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
                </Track.DecreaseRepeatButton>
                <Track.IncreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ColorPickerRepeatButton}"/>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
                </Track.IncreaseRepeatButton>
                <Track.Thumb>
                    <Thumb x:Name="Thumb" Focusable="False" Height="13" OverridesDefaultStyle="True" Template="{StaticResource ColorPickerSliderThumbTemplate}" VerticalAlignment="Top" Width="13">
@@ -213,7 +214,7 @@
        </ControlTemplate.Triggers>
    </ControlTemplate>

-    <ControlTemplate x:Key="CompareSliderHorizontal" TargetType="{x:Type controls:CompareSlider}">
+    <ControlTemplate x:Key="CompareSliderHorizontal" TargetType="controls:CompareSlider">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Track Margin="-14,0,-15,0" x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
@@ -317,7 +318,7 @@
        </ControlTemplate.Triggers>
    </ControlTemplate>

-    <ControlTemplate x:Key="CompareSliderVertical" TargetType="{x:Type controls:CompareSlider}">
+    <ControlTemplate x:Key="CompareSliderVertical" TargetType="controls:CompareSlider">
        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
            <Track Margin="0,-14,0,-15" x:Name="PART_Track">
                <Track.DecreaseRepeatButton>
@@ -345,7 +346,7 @@
        </Border>
    </ControlTemplate>

-    <Style TargetType="{x:Type controls:CompareSlider}">
+    <Style TargetType="controls:CompareSlider">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
@@ -360,4 +361,59 @@
        </Style.Triggers>
    </Style>

+    <!--PreviewSlider-->
+    <Style x:Key="PreviewSliderRepeatButtonStyle" TargetType="RepeatButton">
+        <Setter Property="OverridesDefaultStyle" Value="true"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="Focusable" Value="false"/>
+        <Setter Property="IsTabStop" Value="false"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="RepeatButton">
+                    <Border Background="Transparent" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
+                        <Rectangle Fill="{TemplateBinding Background}" Height="2"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    
+    <ControlTemplate x:Key="PreviewSliderThumbHorizontal" TargetType="Thumb">
+        <Border Effect="{StaticResource EffectShadow1}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+    </ControlTemplate>
+    
+    <ControlTemplate x:Key="PreviewSliderHorizontal" TargetType="controls:PreviewSlider">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
+            </Grid.RowDefinitions>
+            <ContentControl x:Name="PART_ContentBorder" HorizontalAlignment="Left" VerticalAlignment="Bottom" Visibility="Hidden" Content="{TemplateBinding PreviewContent}" Margin="0,0,0,6"/>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Height="2" Grid.Row="1" VerticalAlignment="center"/>
+            <Track x:Name="PART_Track" Grid.Row="1">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource PreviewSliderRepeatButtonStyle}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource PreviewSliderRepeatButtonStyle}"/>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb x:Name="Thumb" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource PreviewSliderThumbHorizontal}" VerticalAlignment="Center" Width="18"/>
+                </Track.Thumb>
+            </Track>
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Visibility" Value="Visible" TargetName="PART_ContentBorder"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+    
+    <Style TargetType="controls:PreviewSlider">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
+        <Setter Property="IsMoveToPointEnabled" Value="True"/>
+        <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="Template" Value="{StaticResource PreviewSliderHorizontal}"/>
+    </Style>
 </ResourceDictionary>
@@ -12,7 +12,7 @@
        <ResourceDictionary Source="Base/TabControlBaseStyle.xaml"/>
    </ResourceDictionary.MergedDictionaries>

-    <Style TargetType="{x:Type controls:TabItem}">
+    <Style TargetType="controls:TabItem">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
        <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
@@ -31,7 +31,7 @@
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type controls:TabItem}">
+                <ControlTemplate TargetType="controls:TabItem">
                    <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
@@ -70,7 +70,7 @@
        </Setter>
    </Style>

-    <Style TargetType="{x:Type controls:TabControl}">
+    <Style TargetType="controls:TabControl">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
@@ -78,7 +78,7 @@
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type controls:TabControl}">
+                <ControlTemplate TargetType="controls:TabControl">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
                            <Grid.ColumnDefinitions>
@@ -34,6 +34,8 @@

        public static readonly string ScrollViewerDemoCtl = nameof(ScrollViewerDemoCtl);

+        public static readonly string PreviewSliderDemoCtl = nameof(PreviewSliderDemoCtl);
+
        public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);

        public static readonly string ToggleButtonDemoCtl = nameof(ToggleButtonDemoCtl);
@@ -19,7 +19,8 @@ var controlList = new List<string>
 	"CirclePanelDemoCtl",
 	"NumericUpDownDemoCtl",
 	"WindowDemoCtl",
-	"ScrollViewerDemoCtl"
+	"ScrollViewerDemoCtl",
+	"PreviewSliderDemoCtl"
 };
 var styleList = new List<string>
 {
@@ -120,6 +120,9 @@
    <Compile Include="UserControl\Controls\NumericUpDownDemoCtl.xaml.cs">
      <DependentUpon>NumericUpDownDemoCtl.xaml</DependentUpon>
    </Compile>
+    <Compile Include="UserControl\Controls\PreviewSliderDemoCtl.xaml.cs">
+      <DependentUpon>PreviewSliderDemoCtl.xaml</DependentUpon>
+    </Compile>
    <Compile Include="UserControl\Controls\ScrollViewerDemoCtl.xaml.cs">
      <DependentUpon>ScrollViewerDemoCtl.xaml</DependentUpon>
    </Compile>
@@ -327,6 +330,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="UserControl\Controls\PreviewSliderDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="UserControl\Controls\ScrollViewerDemoCtl.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -483,6 +490,7 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="Resources\Img\LeftMainContent\HoverMenu_16x.png" />
    <Resource Include="Resources\Img\icon.ico" />
    <Resource Include="Resources\Img\LeftMainContent\Brush_16x.png" />
    <Resource Include="Resources\Img\Avatar\avatar1.png" />
@@ -582,6 +582,15 @@ namespace HandyControlDemo.Properties.Langs {
            }
        }
        
+        /// <summary>
+        ///   查找类似 预览滑块 的本地化字符串。
+        /// </summary>
+        public static string PreviewSlider {
+            get {
+                return ResourceManager.GetString("PreviewSlider", resourceCulture);
+            }
+        }
+        
        /// <summary>
        ///   查找类似 主要 的本地化字符串。
        /// </summary>
@@ -378,4 +378,7 @@
  <data name="Brush" xml:space="preserve">
    <value>Brush</value>
  </data>
+  <data name="PreviewSlider" xml:space="preserve">
+    <value>PreviewSlider</value>
+  </data>
 </root>
@@ -358,4 +358,7 @@
  <data name="Brush" xml:space="preserve">
    <value>画刷</value>
  </data>
+  <data name="PreviewSlider" xml:space="preserve">
+    <value>预览滑块</value>
+  </data>
 </root>
@@ -0,0 +1,13 @@
+<UserControl x:Class="HandyControlDemo.UserControl.PreviewSliderDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
+             Background="{DynamicResource RegionBrush}">
+    <controls:TransitioningContentControl>
+        <controls:PreviewSlider Name="PreviewSlider" Width="800" Value="500" Maximum="1000" VerticalAlignment="Center" Margin="32">
+            <controls:PreviewSlider.PreviewContent>
+                <Label Style="{StaticResource LabelPrimary}" Content="{Binding PreviewPosition,ElementName=PreviewSlider}" ContentStringFormat="{}{0:#0.0}"/>
+            </controls:PreviewSlider.PreviewContent>
+        </controls:PreviewSlider>
+    </controls:TransitioningContentControl>
+</UserControl>
@@ -0,0 +1,11 @@
+// ReSharper disable once CheckNamespace
+namespace HandyControlDemo.UserControl
+{
+    public partial class PreviewSliderDemoCtl
+    {
+        public PreviewSliderDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -15,7 +15,7 @@
        </i:Interaction.Triggers>
        <TabItem Header="{x:Static langs:Lang.Styles}">
            <ListBox BorderThickness="0" SelectionMode="Single">
-                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.BrushDemoCtl}" Content="{x:Static langs:Lang.Brush}">
+                <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>
@@ -174,6 +174,11 @@
                        <Image Source="../../Resources/Img/LeftMainContent/SplitterControl_16x.png"/>
                    </controls:EdgeElement.LeftContent>
                </ListBoxItem>
+                <ListBoxItem Style="{StaticResource ListBoxItemNew}" 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"/>