add slider style

HandyControl/Controls/Attach/TipElement.cs

@@ -0,0 +1,23 @@
+using System.Windows;
+using HandyControl.Data.Enum;
+
+// ReSharper disable once CheckNamespace
+namespace HandyControl.Controls
+{
+    public class TipElement : DependencyObject
+    {
+        public static readonly DependencyProperty VisibilityProperty = DependencyProperty.RegisterAttached(
+            "Visibility", typeof(Visibility), typeof(TipElement), new PropertyMetadata(Visibility.Collapsed));
+
+        public static void SetVisibility(DependencyObject element, Visibility value) => element.SetValue(VisibilityProperty, value);
+
+        public static Visibility GetVisibility(DependencyObject element) => (Visibility) element.GetValue(VisibilityProperty);
+
+        public static readonly DependencyProperty PlacementProperty = DependencyProperty.RegisterAttached(
+            "Placement", typeof(TipPlacement), typeof(TipElement), new PropertyMetadata(default(TipPlacement)));
+
+        public static void SetPlacement(DependencyObject element, TipPlacement value) => element.SetValue(PlacementProperty, value);
+
+        public static TipPlacement GetPlacement(DependencyObject element) => (TipPlacement) element.GetValue(PlacementProperty);
+    }
+}

HandyControl/Controls/Slider/PreviewSlider.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Windows;
 using System.Windows.Controls;
+using System.Windows.Controls.Primitives;
 using System.Windows.Input;
 using System.Windows.Media;
 using HandyControl.Data;
@@ -9,14 +10,19 @@ using HandyControl.Data;
 namespace HandyControl.Controls
 {
     [TemplatePart(Name = PreviewContentKey, Type = typeof(ContentControl))]
+    [TemplatePart(Name = TracKKey, Type = typeof(Track))]
     public class PreviewSlider : Slider
     {
         private const string PreviewContentKey = "PART_ContentBorder";
 
+        private const string TracKKey = "PART_Track";
+
         private ContentControl _previewContent;
 
         private TranslateTransform _transform;
 
+        private Track _track;
+
         /// <summary>
         ///     预览内容
         /// </summary>
@@ -61,10 +67,10 @@ namespace HandyControl.Controls
         {
             base.OnMouseMove(e);
 
-            var p = e.GetPosition(this);
+            var p = e.GetPosition(_track);
             _transform.X = p.X - _previewContent.ActualWidth/2;
 
-            PreviewPosition = p.X / ActualWidth * Maximum;
+            PreviewPosition = p.X / _track.ActualWidth * Maximum;
             RaiseEvent(new FunctionEventArgs<double>(PreviewPositionChangedEvent, this)
             {
                 Info = PreviewPosition
@@ -75,6 +81,7 @@ namespace HandyControl.Controls
         {
             base.OnApplyTemplate();
             _previewContent = Template.FindName(PreviewContentKey, this) as ContentControl;
+            _track = Template.FindName(TracKKey, this) as Track;
 
             if (_previewContent != null)
             {

HandyControl/Controls/Slider/SliderCanvas.cs

@@ -0,0 +1,66 @@
+using System;
+using System.Windows;
+using System.Windows.Controls;
+
+// ReSharper disable once CheckNamespace
+namespace HandyControl.Controls
+{
+    internal class SliderCanvas : Canvas
+    {
+        internal static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
+            "Orientation", typeof(Orientation), typeof(SliderCanvas), new PropertyMetadata(default(Orientation)));
+
+        internal Orientation Orientation
+        {
+            get => (Orientation) GetValue(OrientationProperty);
+            set => SetValue(OrientationProperty, value);
+        }
+
+        protected override Size ArrangeOverride(Size arrangeSize)
+        {
+            foreach (UIElement internalChild in InternalChildren)
+            {
+                if (internalChild == null) continue;
+
+                var x = 0.0;
+                var y = 0.0;
+
+                if (Orientation == Orientation.Horizontal)
+                {
+                    x = (arrangeSize.Width - internalChild.DesiredSize.Width) / 2;
+
+                    var top = GetTop(internalChild);
+                    if (!double.IsNaN(top))
+                    {
+                        y = top;
+                    }
+                    else
+                    {
+                        var bottom = GetBottom(internalChild);
+                        if (!double.IsNaN(bottom))
+                            y = arrangeSize.Height - internalChild.DesiredSize.Height - bottom;
+                    }
+                }
+                else
+                {
+                    y = (arrangeSize.Height - internalChild.DesiredSize.Height) / 2;
+
+                    var left = GetLeft(internalChild);
+                    if (!double.IsNaN(left))
+                    {
+                        x = left;
+                    }
+                    else
+                    {
+                        var right = GetRight(internalChild);
+                        if (!double.IsNaN(right))
+                            x = arrangeSize.Width - internalChild.DesiredSize.Width - right;
+                    }
+                }
+
+                internalChild.Arrange(new Rect(new Point(x, y), internalChild.DesiredSize));
+            }
+            return arrangeSize;
+        }
+    }
+}

HandyControl/Data/Enum/TipPlacement.cs

@@ -0,0 +1,8 @@
+namespace HandyControl.Data.Enum
+{
+    public enum TipPlacement
+    {
+        TopLeft,
+        BottomRight,
+    }
+}

HandyControl/HandyControl.csproj

@@ -42,6 +42,7 @@
     <Compile Include="Controls\Attach\InfoElement.cs" />
     <Compile Include="Controls\Attach\PasswordBoxMonitor.cs" />
     <Compile Include="Controls\Attach\StatusSwitchElement.cs" />
+    <Compile Include="Controls\Attach\TipElement.cs" />
     <Compile Include="Controls\Button\ContextMenuButton.cs" />
     <Compile Include="Controls\Button\ContextMenuToggleButton.cs" />
     <Compile Include="Controls\Carousel.cs" />
@@ -60,8 +61,10 @@
     <Compile Include="Controls\Loading\LoadingBase.cs" />
     <Compile Include="Controls\Loading\LoadingCircle.cs" />
     <Compile Include="Controls\Loading\LoadingLine.cs" />
+    <Compile Include="Controls\Slider\SliderCanvas.cs" />
     <Compile Include="Data\Enum\InfoType.cs" />
     <Compile Include="Data\Enum\SkinType.cs" />
+    <Compile Include="Data\Enum\TipPlacement.cs" />
     <Compile Include="Data\GrowlInfo.cs" />
     <Compile Include="Data\ResourceToken.cs">
       <AutoGen>True</AutoGen>

HandyControl/Themes/Styles/Slider.xaml

@@ -5,9 +5,11 @@
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="../Basic/Geometries.xaml"/>
         <ResourceDictionary Source="../Basic/Effects.xaml"/>
+        <ResourceDictionary Source="Label.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
-    <Style x:Key="SliderRepeatButtonBaseStyle" TargetType="RepeatButton">
+    <!--ColorPicker-->
+    <Style x:Key="ColorPickerSliderRepeatButtonBaseStyle" TargetType="RepeatButton">
         <Setter Property="OverridesDefaultStyle" Value="true"/>
         <Setter Property="Background" Value="Transparent"/>
         <Setter Property="Focusable" Value="false"/>
@@ -38,10 +40,10 @@
             </Border>
             <Track x:Name="PART_Track">
                 <Track.DecreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ColorPickerSliderRepeatButtonBaseStyle}"/>
                 </Track.DecreaseRepeatButton>
                 <Track.IncreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ColorPickerSliderRepeatButtonBaseStyle}"/>
                 </Track.IncreaseRepeatButton>
                 <Track.Thumb>
                     <Thumb x:Name="Thumb" Focusable="False" Height="13" Width="13" OverridesDefaultStyle="True" Template="{StaticResource ColorPickerSliderThumbTemplate}" VerticalAlignment="Center">
@@ -67,10 +69,10 @@
             </Border>
             <Track x:Name="PART_Track">
                 <Track.DecreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ColorPickerSliderRepeatButtonBaseStyle}"/>
                 </Track.DecreaseRepeatButton>
                 <Track.IncreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonBaseStyle}"/>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ColorPickerSliderRepeatButtonBaseStyle}"/>
                 </Track.IncreaseRepeatButton>
                 <Track.Thumb>
                     <Thumb x:Name="Thumb" Focusable="False" Height="13" OverridesDefaultStyle="True" Template="{StaticResource ColorPickerSliderThumbTemplate}" VerticalAlignment="Top" Width="13">
@@ -379,7 +381,30 @@
     </Style>
     
     <ControlTemplate x:Key="PreviewSliderThumbHorizontal" TargetType="Thumb">
-        <Border Effect="{StaticResource EffectShadow1}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        <Border Effect="{StaticResource EffectShadow1}" Name="BorderDot"  BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
     </ControlTemplate>
     
     <ControlTemplate x:Key="PreviewSliderHorizontal" TargetType="controls:PreviewSlider">
@@ -388,9 +413,9 @@
                 <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">
+            <ContentControl x:Name="PART_ContentBorder" HorizontalAlignment="Left" VerticalAlignment="Bottom" Visibility="Hidden" Content="{TemplateBinding PreviewContent}" Margin="9,0,9,6"/>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Height="2" Grid.Row="1" VerticalAlignment="center" Margin="9,0"/>
+            <Track Margin="9,0" x:Name="PART_Track" Grid.Row="1">
                 <Track.DecreaseRepeatButton>
                     <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource PreviewSliderRepeatButtonStyle}"/>
                 </Track.DecreaseRepeatButton>
@@ -398,7 +423,7 @@
                     <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"/>
+                    <Thumb Margin="-9,0" x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource PreviewSliderThumbHorizontal}" VerticalAlignment="Center" Width="18"/>
                 </Track.Thumb>
             </Track>
         </Grid>
@@ -416,4 +441,319 @@
         <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
         <Setter Property="Template" Value="{StaticResource PreviewSliderHorizontal}"/>
     </Style>
+
+    <!--Common-->
+    <Style x:Key="SliderRepeatButtonHorizontalStyle" 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>
+
+    <Style x:Key="SliderRepeatButtonVerticalStyle" 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}" Width="2"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <ControlTemplate x:Key="SliderThumb" TargetType="Thumb">
+        <Border Effect="{StaticResource EffectShadow1}" Name="BorderDot"  BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="TipSliderThumbHorizontalTop" TargetType="Thumb">
+        <controls:SliderCanvas>
+            <Label Name="LabelValue" Opacity="0" Canvas.Bottom="28" Style="{StaticResource LabelPrimary}" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor,AncestorType=Slider}}"/>
+            <Border Canvas.Bottom="0" Effect="{StaticResource EffectShadow1}" Name="BorderDot" BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        </controls:SliderCanvas>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}" TargetName="BorderDot"/>
+                <Setter Property="Opacity" Value="1" TargetName="LabelValue"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="TipSliderThumbHorizontalBottom" TargetType="Thumb">
+        <controls:SliderCanvas>
+            <Label Name="LabelValue" Opacity="0" Canvas.Top="28" Style="{StaticResource LabelPrimary}" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor,AncestorType=Slider}}"/>
+            <Border Canvas.Bottom="0" Effect="{StaticResource EffectShadow1}" Name="BorderDot" BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        </controls:SliderCanvas>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}" TargetName="BorderDot"/>
+                <Setter Property="Opacity" Value="1" TargetName="LabelValue"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="TipSliderThumbVerticalLeft" TargetType="Thumb">
+        <controls:SliderCanvas Orientation="Vertical">
+            <Label Name="LabelValue" Opacity="0" Canvas.Right="28" Style="{StaticResource LabelPrimary}" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor,AncestorType=Slider}}"/>
+            <Border Canvas.Right="0" Effect="{StaticResource EffectShadow1}" Name="BorderDot" BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        </controls:SliderCanvas>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}" TargetName="BorderDot"/>
+                <Setter Property="Opacity" Value="1" TargetName="LabelValue"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="TipSliderThumbVerticalRight" TargetType="Thumb">
+        <controls:SliderCanvas Orientation="Vertical">
+            <Label Name="LabelValue" Opacity="0" Canvas.Left="28" Style="{StaticResource LabelPrimary}" Content="{Binding Value,RelativeSource={RelativeSource FindAncestor,AncestorType=Slider}}"/>
+            <Border Canvas.Right="0" Effect="{StaticResource EffectShadow1}" Name="BorderDot" BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
+        </controls:SliderCanvas>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="Effect" Value="{StaticResource EffectShadow2}" TargetName="BorderDot"/>
+                <Setter Property="Opacity" Value="1" TargetName="LabelValue"/>
+            </Trigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="2" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
+                <EventTrigger.Actions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <ThicknessAnimation To="0" Duration="0:0:.1" Storyboard.TargetName="BorderDot" Storyboard.TargetProperty="BorderThickness"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </EventTrigger.Actions>
+            </EventTrigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="SliderHorizontal" TargetType="Slider">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+            <TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
+            <TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Grid.Row="1" Height="2" VerticalAlignment="center" Margin="9,0">
+                <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource AccentBrush}" Height="2" Visibility="Hidden"/>
+            </Border>
+            <Track Margin="9,0" x:Name="PART_Track" Grid.Row="1">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource SliderRepeatButtonHorizontalStyle}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonHorizontalStyle}"/>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb ClipToBounds="False" Width="18" Margin="-9,0,-9,0" Height="18" x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource SliderThumb}" VerticalAlignment="Center"/>
+                </Track.Thumb>
+            </Track>
+        </Grid>
+        <ControlTemplate.Triggers>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="controls:TipElement.Placement" Value="TopLeft"/>
+                    <Condition Property="controls:TipElement.Visibility" Value="Visible"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource TipSliderThumbHorizontalTop}"/>
+            </MultiTrigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="controls:TipElement.Placement" Value="BottomRight"/>
+                    <Condition Property="controls:TipElement.Visibility" Value="Visible"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource TipSliderThumbHorizontalBottom}"/>
+            </MultiTrigger>
+            <Trigger Property="TickPlacement" Value="TopLeft">
+                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="BottomRight">
+                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="Both">
+                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
+                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
+            </Trigger>
+            <Trigger Property="IsSelectionRangeEnabled" Value="true">
+                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="SliderVertical" TargetType="Slider">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto"/>
+                <ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
+                <ColumnDefinition Width="Auto"/>
+            </Grid.ColumnDefinitions>
+            <TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
+            <TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Grid.Column="1" HorizontalAlignment="center" Margin="0,9" Width="2">
+                <Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource AccentBrush}" Width="2" Visibility="Hidden"/>
+            </Border>
+            <Track Margin="0,9" x:Name="PART_Track" Grid.Column="1">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource SliderRepeatButtonVerticalStyle}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonVerticalStyle}"/>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Margin="0,-9" x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumb}" VerticalAlignment="Top" Width="18"/>
+                </Track.Thumb>
+            </Track>
+        </Grid>
+        <ControlTemplate.Triggers>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="controls:TipElement.Placement" Value="TopLeft"/>
+                    <Condition Property="controls:TipElement.Visibility" Value="Visible"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource TipSliderThumbVerticalLeft}"/>
+            </MultiTrigger>
+            <MultiTrigger>
+                <MultiTrigger.Conditions>
+                    <Condition Property="controls:TipElement.Placement" Value="BottomRight"/>
+                    <Condition Property="controls:TipElement.Visibility" Value="Visible"/>
+                </MultiTrigger.Conditions>
+                <Setter Property="Template" TargetName="Thumb" Value="{StaticResource TipSliderThumbVerticalRight}"/>
+            </MultiTrigger>
+            <Trigger Property="TickPlacement" Value="TopLeft">
+                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
+                <Setter Property="Margin" TargetName="TrackBackground" Value="2,5,0,5"/>
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="BottomRight">
+                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
+                <Setter Property="Margin" TargetName="TrackBackground" Value="0,5,2,5"/>
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="Both">
+                <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/>
+                <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/>
+            </Trigger>
+            <Trigger Property="IsSelectionRangeEnabled" Value="true">
+                <Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <Style x:Key="SliderBaseStyle" TargetType="Slider">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
+        <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="Foreground" Value="{DynamicResource DarkPrimaryBrush}"/>
+        <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
+        <Style.Triggers>
+            <Trigger Property="Orientation" Value="Vertical">
+                <Setter Property="Template" Value="{StaticResource SliderVertical}"/>
+            </Trigger>
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Opacity" Value=".4"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style BasedOn="{StaticResource SliderBaseStyle}" TargetType="Slider"/>
+
 </ResourceDictionary>

HandyControlDemo/Data/MessageToken.cs

@@ -3,39 +3,39 @@
 	public class MessageToken
     {
         public static readonly string GrowlDemoCtl = nameof(GrowlDemoCtl);
-
+	
         public static readonly string LoadingDemoCtl = nameof(LoadingDemoCtl);
-
+	
         public static readonly string ImageBrowserDemoCtl = nameof(ImageBrowserDemoCtl);
-
+	
         public static readonly string ColorPickerDemoCtl = nameof(ColorPickerDemoCtl);
-
+	
         public static readonly string CarouselDemoCtl = nameof(CarouselDemoCtl);
-
+	
         public static readonly string CompareSliderDemoCtl = nameof(CompareSliderDemoCtl);
-
+	
         public static readonly string TimeBarDemoCtl = nameof(TimeBarDemoCtl);
-
+	
         public static readonly string PaginationDemoCtl = nameof(PaginationDemoCtl);
-
+	
         public static readonly string AnimationPathDemoCtl = nameof(AnimationPathDemoCtl);
-
+	
         public static readonly string StepBarDemoCtl = nameof(StepBarDemoCtl);
-
+	
         public static readonly string ClockDemoCtl = nameof(ClockDemoCtl);
-
+	
         public static readonly string TimePickerDemoCtl = nameof(TimePickerDemoCtl);
-
+	
         public static readonly string CirclePanelDemoCtl = nameof(CirclePanelDemoCtl);
-
+	
         public static readonly string NumericUpDownDemoCtl = nameof(NumericUpDownDemoCtl);
-
+	
         public static readonly string WindowDemoCtl = nameof(WindowDemoCtl);
-
+	
         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);
@@ -78,16 +78,18 @@
 
         public static readonly string BrushDemoCtl = nameof(BrushDemoCtl);
 
+        public static readonly string SliderDemoCtl = nameof(SliderDemoCtl);
+
         public static readonly string CommonWindow = nameof(CommonWindow);
 
         public static readonly string CustomNonClientAreaWindow = nameof(CustomNonClientAreaWindow);
 
     	public static readonly string LoadShowContent = nameof(LoadShowContent);
 
-	public static readonly string FullSwitch = nameof(FullSwitch);
+		public static readonly string FullSwitch = nameof(FullSwitch);
 
-	public static readonly string ContributorsView = nameof(ContributorsView);
+		public static readonly string ContributorsView = nameof(ContributorsView);
 
-	public static readonly string ClearLeftSelected = nameof(ClearLeftSelected);
+		public static readonly string ClearLeftSelected = nameof(ClearLeftSelected);
 	}
 }

HandyControlDemo/Data/MessageToken.tt

@@ -44,7 +44,8 @@ var styleList = new List<string>
 	"BorderDemoCtl",
 	"RadioButtonDemoCtl",
 	"NaiveScrollViewerDemoCtl",
-	"BrushDemoCtl"
+	"BrushDemoCtl",
+	"SliderDemoCtl"
 };
 var windowList = new List<string>
 {
@@ -58,7 +59,7 @@ namespace HandyControlDemo.Data
     {
     <#foreach(var item in controlList){#>
     public static readonly string <#=item#> = nameof(<#=item#>);
-
+	
     <#}#>
 <#foreach(var item in styleList){#>
     public static readonly string <#=item#> = nameof(<#=item#>);
@@ -70,10 +71,10 @@ namespace HandyControlDemo.Data
     <#}#>
 	public static readonly string LoadShowContent = nameof(LoadShowContent);
 
-	public static readonly string FullSwitch = nameof(FullSwitch);
+		public static readonly string FullSwitch = nameof(FullSwitch);
 
-	public static readonly string ContributorsView = nameof(ContributorsView);
+		public static readonly string ContributorsView = nameof(ContributorsView);
 
-	public static readonly string ClearLeftSelected = nameof(ClearLeftSelected);
+		public static readonly string ClearLeftSelected = nameof(ClearLeftSelected);
 	}
 }

HandyControlDemo/HandyControlDemo.csproj

@@ -209,6 +209,9 @@
     <Compile Include="UserControl\Styles\RadioButtonDemoCtl.xaml.cs">
       <DependentUpon>RadioButtonDemoCtl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="UserControl\Styles\SliderDemoCtl.xaml.cs">
+      <DependentUpon>SliderDemoCtl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="UserControl\Styles\TextBlockDemoCtl.xaml.cs">
       <DependentUpon>TextBlockDemoCtl.xaml</DependentUpon>
     </Compile>
@@ -446,6 +449,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="UserControl\Styles\SliderDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="UserControl\Styles\TextBlockDemoCtl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -498,6 +505,7 @@
       <Generator>TextTemplatingFileGenerator</Generator>
       <LastGenOutput>MessageToken.cs</LastGenOutput>
     </Content>
+    <Resource Include="Resources\Img\LeftMainContent\Slider_16x.png" />
     <Resource Include="Resources\Img\LeftMainContent\HoverMenu_16x.png" />
     <Resource Include="Resources\Img\icon.ico" />
     <Resource Include="Resources\Img\LeftMainContent\Brush_16x.png" />

HandyControlDemo/Properties/Langs/Lang.Designer.cs

@@ -681,6 +681,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 滑块 的本地化字符串。
+        /// </summary>
+        public static string Slider {
+            get {
+                return ResourceManager.GetString("Slider", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 步骤条 的本地化字符串。
         /// </summary>

HandyControlDemo/Properties/Langs/Lang.en.resx

@@ -384,4 +384,7 @@
   <data name="Contributors" xml:space="preserve">
     <value>Contributors</value>
   </data>
+  <data name="Slider" xml:space="preserve">
+    <value>Slider</value>
+  </data>
 </root>

HandyControlDemo/Properties/Langs/Lang.resx

@@ -364,4 +364,7 @@
   <data name="Contributors" xml:space="preserve">
     <value>贡献者</value>
   </data>
+  <data name="Slider" xml:space="preserve">
+    <value>滑块</value>
+  </data>
 </root>

HandyControlDemo/UserControl/Main/LeftMainContent.xaml

@@ -45,6 +45,11 @@
                         <Image Source="../../Resources/Img/LeftMainContent/ScrollBox_16x.png"/>
                     </controls:EdgeElement.LeftContent>
                 </ListBoxItem>
+                <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.SliderDemoCtl}" Content="{x:Static langs:Lang.Slider}">
+                    <controls:EdgeElement.LeftContent>
+                        <Image Source="../../Resources/Img/LeftMainContent/Slider_16x.png"/>
+                    </controls:EdgeElement.LeftContent>
+                </ListBoxItem>
                 <ListBoxItem Tag="{x:Static data:MessageToken.TextBlockDemoCtl}" Content="{x:Static langs:Lang.TextBlock}">
                     <controls:EdgeElement.LeftContent>
                         <Image Source="../../Resources/Img/LeftMainContent/TextBlock_16x.png"/>

HandyControlDemo/UserControl/Main/NoUserContent.xaml

@@ -2,7 +2,6 @@
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:interactivity="clr-namespace:HandyControl.Interactivity;assembly=HandyControl"
-      DataContext="{Binding NoUserContent,Source={StaticResource Locator}}"
       xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
       Height="28"
       xmlns:controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"

HandyControlDemo/UserControl/Styles/SliderDemoCtl.xaml

@@ -0,0 +1,24 @@
+<UserControl x:Class="HandyControlDemo.UserControl.SliderDemoCtl"
+             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>
+        <StackPanel Margin="32" Orientation="Horizontal">
+            <StackPanel>
+                <Slider Width="400" IsSnapToTickEnabled="True" Value="8"/>
+                <Slider Width="400" IsSnapToTickEnabled="True" Value="3" Margin="0,32,0,0" IsEnabled="False"/>
+                <Slider Width="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="20" SelectionEnd="80" Margin="0,32,0,0"/>
+                <Slider Width="400" controls:TipElement.Visibility="Visible" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight" Margin="0,32,0,0"/>
+                <Slider Width="400" controls:TipElement.Visibility="Visible" controls:TipElement.Placement="BottomRight" IsSnapToTickEnabled="True" Value="5" TickPlacement="Both" Margin="0,32,0,0"/>
+            </StackPanel>
+            <StackPanel Margin="32,0,0,0" Orientation="Horizontal">
+                <Slider Height="400" IsSnapToTickEnabled="True" Value="8" Orientation="Vertical"/>
+                <Slider Height="400" IsSnapToTickEnabled="True" Value="3" Margin="32,0,0,0" IsEnabled="False" Orientation="Vertical"/>
+                <Slider Height="400" IsSnapToTickEnabled="True" TickFrequency="5" Maximum="100" TickPlacement="TopLeft" Value="10" IsSelectionRangeEnabled="True" SelectionStart="20" SelectionEnd="80" Margin="32,0,0,0" Orientation="Vertical"/>
+                <Slider Height="400" controls:TipElement.Visibility="Visible" IsSnapToTickEnabled="True" Maximum="100" Value="60" TickFrequency="10" TickPlacement="BottomRight" Margin="32,0,0,0" Orientation="Vertical"/>
+                <Slider Height="400" controls:TipElement.Visibility="Visible" controls:TipElement.Placement="BottomRight" IsSnapToTickEnabled="True" Value="5" TickPlacement="Both" Margin="32,0" Orientation="Vertical"/>
+            </StackPanel>
+        </StackPanel>
+    </controls:TransitioningContentControl>
+</UserControl>

HandyControlDemo/UserControl/Styles/SliderDemoCtl.xaml.cs

@@ -0,0 +1,11 @@
+// ReSharper disable once CheckNamespace
+namespace HandyControlDemo.UserControl
+{
+    public partial class SliderDemoCtl
+    {
+        public SliderDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}