From 969f58e50199e3ac3f7c15bdad2461f5ad51c011 Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Tue, 30 Oct 2018 00:16:04 +0800
Subject: [PATCH] add PreviewSlider

---
 HandyControl/Controls/Slider/PreviewSlider.cs |  80 +++++++++++++++++-
 HandyControl/Controls/TabControl/TabItem.cs   |   2 +-
 .../Themes/Styles/Base/LoadingBaseStyle.xaml  |   2 +-
 .../Styles/Base/LoadingCircleBaseStyle.xaml   |   2 +-
 .../Styles/Base/LoadingLineBaseStyle.xaml     |   2 +-
 .../Styles/Base/ScrollViewerBaseStyle.xaml    |   4 +-
 HandyControl/Themes/Styles/Loading.xaml       |  16 ++--
 HandyControl/Themes/Styles/ScrollViewer.xaml  |   2 +-
 HandyControl/Themes/Styles/Slider.xaml        |  72 ++++++++++++++--
 HandyControl/Themes/Styles/TabControl.xaml    |   8 +-
 HandyControlDemo/Data/MessageToken.cs         |   2 +
 HandyControlDemo/Data/MessageToken.tt         |   3 +-
 HandyControlDemo/HandyControlDemo.csproj      |   8 ++
 .../Properties/Langs/Lang.Designer.cs         |   9 ++
 .../Properties/Langs/Lang.en.resx             |   3 +
 HandyControlDemo/Properties/Langs/Lang.resx   |   3 +
 .../Img/LeftMainContent/HoverMenu_16x.png     | Bin 0 -> 240 bytes
 .../Controls/PreviewSliderDemoCtl.xaml        |  13 +++
 .../Controls/PreviewSliderDemoCtl.xaml.cs     |  11 +++
 .../UserControl/Main/LeftMainContent.xaml     |   7 +-
 20 files changed, 218 insertions(+), 31 deletions(-)
 create mode 100644 HandyControlDemo/Resources/Img/LeftMainContent/HoverMenu_16x.png
 create mode 100644 HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml
 create mode 100644 HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml.cs

diff --git a/HandyControl/Controls/Slider/PreviewSlider.cs b/HandyControl/Controls/Slider/PreviewSlider.cs
index 86c97120..9d4490d5 100644
--- a/HandyControl/Controls/Slider/PreviewSlider.cs
+++ b/HandyControl/Controls/Slider/PreviewSlider.cs
@@ -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;
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/HandyControl/Controls/TabControl/TabItem.cs b/HandyControl/Controls/TabControl/TabItem.cs
index 284a815f..f93e22b4 100644
--- a/HandyControl/Controls/TabControl/TabItem.cs
+++ b/HandyControl/Controls/TabControl/TabItem.cs
@@ -19,7 +19,7 @@ namespace HandyControl.Controls
         private Button _buttonClose;
 
         /// <summary>
-        /// 动画速度
+        ///     动画速度
         /// </summary>
         private const int AnimationSpeed = 150;
 
diff --git a/HandyControl/Themes/Styles/Base/LoadingBaseStyle.xaml b/HandyControl/Themes/Styles/Base/LoadingBaseStyle.xaml
index d671eaab..d59fd341 100644
--- a/HandyControl/Themes/Styles/Base/LoadingBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/LoadingBaseStyle.xaml
@@ -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>
diff --git a/HandyControl/Themes/Styles/Base/LoadingCircleBaseStyle.xaml b/HandyControl/Themes/Styles/Base/LoadingCircleBaseStyle.xaml
index 4026123f..e19f3d84 100644
--- a/HandyControl/Themes/Styles/Base/LoadingCircleBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/LoadingCircleBaseStyle.xaml
@@ -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"/>
diff --git a/HandyControl/Themes/Styles/Base/LoadingLineBaseStyle.xaml b/HandyControl/Themes/Styles/Base/LoadingLineBaseStyle.xaml
index 22737120..d751390c 100644
--- a/HandyControl/Themes/Styles/Base/LoadingLineBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/LoadingLineBaseStyle.xaml
@@ -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>
 
diff --git a/HandyControl/Themes/Styles/Base/ScrollViewerBaseStyle.xaml b/HandyControl/Themes/Styles/Base/ScrollViewerBaseStyle.xaml
index f8d233a7..9cb9868f 100644
--- a/HandyControl/Themes/Styles/Base/ScrollViewerBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/ScrollViewerBaseStyle.xaml
@@ -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}"/>
diff --git a/HandyControl/Themes/Styles/Loading.xaml b/HandyControl/Themes/Styles/Loading.xaml
index acddbe0a..06632505 100644
--- a/HandyControl/Themes/Styles/Loading.xaml
+++ b/HandyControl/Themes/Styles/Loading.xaml
@@ -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>
 
diff --git a/HandyControl/Themes/Styles/ScrollViewer.xaml b/HandyControl/Themes/Styles/ScrollViewer.xaml
index 1f8a4cd7..cb14a780 100644
--- a/HandyControl/Themes/Styles/ScrollViewer.xaml
+++ b/HandyControl/Themes/Styles/ScrollViewer.xaml
@@ -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>
\ No newline at end of file
diff --git a/HandyControl/Themes/Styles/Slider.xaml b/HandyControl/Themes/Styles/Slider.xaml
index d7582b22..ead6f251 100644
--- a/HandyControl/Themes/Styles/Slider.xaml
+++ b/HandyControl/Themes/Styles/Slider.xaml
@@ -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>
\ No newline at end of file
diff --git a/HandyControl/Themes/Styles/TabControl.xaml b/HandyControl/Themes/Styles/TabControl.xaml
index 2786f569..bd1ad7a7 100644
--- a/HandyControl/Themes/Styles/TabControl.xaml
+++ b/HandyControl/Themes/Styles/TabControl.xaml
@@ -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>
diff --git a/HandyControlDemo/Data/MessageToken.cs b/HandyControlDemo/Data/MessageToken.cs
index 75a5dc4a..e9048280 100644
--- a/HandyControlDemo/Data/MessageToken.cs
+++ b/HandyControlDemo/Data/MessageToken.cs
@@ -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);
diff --git a/HandyControlDemo/Data/MessageToken.tt b/HandyControlDemo/Data/MessageToken.tt
index d5e3e8f6..0726a29c 100644
--- a/HandyControlDemo/Data/MessageToken.tt
+++ b/HandyControlDemo/Data/MessageToken.tt
@@ -19,7 +19,8 @@ var controlList = new List<string>
 	"CirclePanelDemoCtl",
 	"NumericUpDownDemoCtl",
 	"WindowDemoCtl",
-	"ScrollViewerDemoCtl"
+	"ScrollViewerDemoCtl",
+	"PreviewSliderDemoCtl"
 };
 var styleList = new List<string>
 {
diff --git a/HandyControlDemo/HandyControlDemo.csproj b/HandyControlDemo/HandyControlDemo.csproj
index 8cf607b6..6100f302 100644
--- a/HandyControlDemo/HandyControlDemo.csproj
+++ b/HandyControlDemo/HandyControlDemo.csproj
@@ -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" />
diff --git a/HandyControlDemo/Properties/Langs/Lang.Designer.cs b/HandyControlDemo/Properties/Langs/Lang.Designer.cs
index 4a2ac7fa..889f7a4d 100644
--- a/HandyControlDemo/Properties/Langs/Lang.Designer.cs
+++ b/HandyControlDemo/Properties/Langs/Lang.Designer.cs
@@ -582,6 +582,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 预览滑块 的本地化字符串。
+        /// </summary>
+        public static string PreviewSlider {
+            get {
+                return ResourceManager.GetString("PreviewSlider", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 主要 的本地化字符串。
         /// </summary>
diff --git a/HandyControlDemo/Properties/Langs/Lang.en.resx b/HandyControlDemo/Properties/Langs/Lang.en.resx
index f90716fe..d1f753fc 100644
--- a/HandyControlDemo/Properties/Langs/Lang.en.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.en.resx
@@ -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>
\ No newline at end of file
diff --git a/HandyControlDemo/Properties/Langs/Lang.resx b/HandyControlDemo/Properties/Langs/Lang.resx
index 13670a58..01f76e2c 100644
--- a/HandyControlDemo/Properties/Langs/Lang.resx
+++ b/HandyControlDemo/Properties/Langs/Lang.resx
@@ -358,4 +358,7 @@
   <data name="Brush" xml:space="preserve">
     <value>画刷</value>
   </data>
+  <data name="PreviewSlider" xml:space="preserve">
+    <value>预览滑块</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/HandyControlDemo/Resources/Img/LeftMainContent/HoverMenu_16x.png b/HandyControlDemo/Resources/Img/LeftMainContent/HoverMenu_16x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2c276ea29fd6fe99c31599c0ca2d13899485ae
GIT binary patch
literal 240
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9F5he4R}c>anMpx`1;
z7srr_xTBZ$@*Y+YU`=rQpfR&?9^(rm_Nm&}JP(TaJQO@9R-d}ad0VNV9c#Ce`d+pr
z{pt>X>Wj|3pBUocRVi7wewlnkV)iFigM|kgKQ$ERt!dmUCdjwogKC44(w4e-<~gzp
zIF3ljpOM|*(0nKNg3=%1?G4v{?QwZu``v%ZeMu*dZo_95e^sm0mzppi2=S^+;$9kZ
kwb1vDq)Ub^OFg6fCOf+?bE~7+fv#onboFyt=akR{07hb10{{R3

literal 0
HcmV?d00001

diff --git a/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml b/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml
new file mode 100644
index 00000000..f18f784e
--- /dev/null
+++ b/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml
@@ -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>
diff --git a/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml.cs b/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml.cs
new file mode 100644
index 00000000..734758b1
--- /dev/null
+++ b/HandyControlDemo/UserControl/Controls/PreviewSliderDemoCtl.xaml.cs
@@ -0,0 +1,11 @@
+// ReSharper disable once CheckNamespace
+namespace HandyControlDemo.UserControl
+{
+    public partial class PreviewSliderDemoCtl
+    {
+        public PreviewSliderDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
diff --git a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
index 52939c7d..569a1e22 100644
--- a/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
+++ b/HandyControlDemo/UserControl/Main/LeftMainContent.xaml
@@ -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"/>