refactor PreviewSlider

src/Shared/HandyControlDemo_Shared/UserControl/Controls/PreviewSliderDemoCtl.xaml

@@ -4,10 +4,17 @@
              xmlns:hc="https://handyorg.github.io/handycontrol"
              Background="{DynamicResource RegionBrush}">
     <hc:TransitioningContentControl>
-        <hc:PreviewSlider Name="PreviewSlider" Width="800" Value="500" Maximum="1000" VerticalAlignment="Center" Margin="32">
-            <hc:PreviewSlider.PreviewContent>
-                <Label Style="{StaticResource LabelPrimary}" Content="{Binding PreviewPosition,ElementName=PreviewSlider}" ContentStringFormat="{}{0:#0.0}"/>
-            </hc:PreviewSlider.PreviewContent>
-        </hc:PreviewSlider>
+        <StackPanel Margin="64">
+            <hc:PreviewSlider Name="PreviewSliderHorizontal" Width="300" Value="500" Maximum="1000">
+                <hc:PreviewSlider.PreviewContent>
+                    <Label Style="{StaticResource LabelPrimary}" Content="{Binding Path=(hc:PreviewSlider.PreviewPosition),RelativeSource={RelativeSource Self}}" ContentStringFormat="{}{0:#0.0}"/>
+                </hc:PreviewSlider.PreviewContent>
+            </hc:PreviewSlider>
+            <hc:PreviewSlider Name="PreviewSliderVertical" Height="300" Value="200" Maximum="1000" Orientation="Vertical" Margin="0,16,0,0" HorizontalAlignment="Center">
+                <hc:PreviewSlider.PreviewContent>
+                    <Label Style="{StaticResource LabelPrimary}" Content="{Binding Path=(hc:PreviewSlider.PreviewPosition),RelativeSource={RelativeSource Self}}" ContentStringFormat="{}{0:#0.0}"/>
+                </hc:PreviewSlider.PreviewContent>
+            </hc:PreviewSlider>
+        </StackPanel>
     </hc:TransitioningContentControl>
 </UserControl>

src/Shared/HandyControl_Shared/Controls/Input/DateTimePicker.cs

@@ -40,7 +40,7 @@ namespace HandyControl.Controls
 
         private ButtonBase _dropDownButton;
 
-        private Popup _popUp;
+        private Popup _popup;
 
         private bool _disablePopupReopen;
 
@@ -135,9 +135,9 @@ namespace HandyControl.Controls
             var dp = d as DateTimePicker;
 
             var newValue = (bool)e.NewValue;
-            if (dp?._popUp != null && dp._popUp.IsOpen != newValue)
+            if (dp?._popup != null && dp._popup.IsOpen != newValue)
             {
-                dp._popUp.IsOpen = newValue;
+                dp._popup.IsOpen = newValue;
                 if (newValue)
                 {
                     dp._originalSelectedDateTime = dp.SelectedDateTime;
@@ -275,12 +275,12 @@ namespace HandyControl.Controls
         public override void OnApplyTemplate()
         {
             if (DesignerProperties.GetIsInDesignMode(this)) return;
-            if (_popUp != null)
+            if (_popup != null)
             {
-                _popUp.PreviewMouseLeftButtonDown -= PopUp_PreviewMouseLeftButtonDown;
-                _popUp.Opened -= PopUp_Opened;
-                _popUp.Closed -= PopUp_Closed;
-                _popUp.Child = null;
+                _popup.PreviewMouseLeftButtonDown -= PopupPreviewMouseLeftButtonDown;
+                _popup.Opened -= PopupOpened;
+                _popup.Closed -= PopupClosed;
+                _popup.Child = null;
             }
 
             if (_dropDownButton != null)
@@ -298,20 +298,20 @@ namespace HandyControl.Controls
 
             base.OnApplyTemplate();
 
-            _popUp = GetTemplateChild(ElementPopup) as Popup;
+            _popup = GetTemplateChild(ElementPopup) as Popup;
             _dropDownButton = GetTemplateChild(ElementButton) as Button;
             _textBox = GetTemplateChild(ElementTextBox) as WatermarkTextBox;
 
             CheckNull();
 
-            _popUp.PreviewMouseLeftButtonDown += PopUp_PreviewMouseLeftButtonDown;
-            _popUp.Opened += PopUp_Opened;
-            _popUp.Closed += PopUp_Closed;
-            _popUp.Child = _calendarWithClock;
+            _popup.PreviewMouseLeftButtonDown += PopupPreviewMouseLeftButtonDown;
+            _popup.Opened += PopupOpened;
+            _popup.Closed += PopupClosed;
+            _popup.Child = _calendarWithClock;
 
             if (IsDropDownOpen)
             {
-                _popUp.IsOpen = true;
+                _popup.IsOpen = true;
             }
 
             _dropDownButton.Click += DropDownButton_Click;
@@ -397,7 +397,7 @@ namespace HandyControl.Controls
 
         private void CheckNull()
         {
-            if (_dropDownButton == null || _popUp == null || _textBox == null)
+            if (_dropDownButton == null || _popup == null || _textBox == null)
                 throw new Exception();
         }
 
@@ -411,7 +411,7 @@ namespace HandyControl.Controls
             _calendarWithClock.Confirmed += CalendarWithClock_Confirmed;
         }
 
-        private void CalendarWithClock_Confirmed() => TogglePopUp();
+        private void CalendarWithClock_Confirmed() => TogglePopup();
 
         private void CalendarWithClock_SelectedDateTimeChanged(object sender, FunctionEventArgs<DateTime?> e) => SelectedDateTime = e.Info;
 
@@ -468,7 +468,7 @@ namespace HandyControl.Controls
                                 {
                                     if ((Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt)
                                     {
-                                        TogglePopUp();
+                                        TogglePopup();
                                         return true;
                                     }
 
@@ -504,7 +504,7 @@ namespace HandyControl.Controls
             return _isHandlerSuspended != null && _isHandlerSuspended.ContainsKey(property);
         }
 
-        private void PopUp_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        private void PopupPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (sender is Popup popup && !popup.StaysOpen)
             {
@@ -515,7 +515,7 @@ namespace HandyControl.Controls
             }
         }
 
-        private void PopUp_Opened(object sender, EventArgs e)
+        private void PopupOpened(object sender, EventArgs e)
         {
             if (!IsDropDownOpen)
             {
@@ -527,7 +527,7 @@ namespace HandyControl.Controls
             OnPickerOpened(new RoutedEventArgs());
         }
 
-        private void PopUp_Closed(object sender, EventArgs e)
+        private void PopupClosed(object sender, EventArgs e)
         {
             if (IsDropDownOpen)
             {
@@ -542,9 +542,9 @@ namespace HandyControl.Controls
             OnPickerClosed(new RoutedEventArgs());
         }
 
-        private void DropDownButton_Click(object sender, RoutedEventArgs e) => TogglePopUp();
+        private void DropDownButton_Click(object sender, RoutedEventArgs e) => TogglePopup();
 
-        private void TogglePopUp()
+        private void TogglePopup()
         {
             if (IsDropDownOpen)
             {

src/Shared/HandyControl_Shared/Controls/Input/TimePicker.cs

@@ -38,7 +38,7 @@ namespace HandyControl.Controls
 
         private ButtonBase _dropDownButton;
 
-        private Popup _popUp;
+        private Popup _popup;
 
         private bool _disablePopupReopen;
 
@@ -147,9 +147,9 @@ namespace HandyControl.Controls
             var dp = d as TimePicker;
 
             var newValue = (bool)e.NewValue;
-            if (dp?._popUp != null && dp._popUp.IsOpen != newValue)
+            if (dp?._popup != null && dp._popup.IsOpen != newValue)
             {
-                dp._popUp.IsOpen = newValue;
+                dp._popup.IsOpen = newValue;
                 if (newValue)
                 {
                     dp._originalSelectedTime = dp.SelectedTime;
@@ -357,12 +357,12 @@ namespace HandyControl.Controls
         public override void OnApplyTemplate()
         {
             if (DesignerProperties.GetIsInDesignMode(this)) return;
-            if (_popUp != null)
+            if (_popup != null)
             {
-                _popUp.PreviewMouseLeftButtonDown -= PopUp_PreviewMouseLeftButtonDown;
-                _popUp.Opened -= PopUp_Opened;
-                _popUp.Closed -= PopUp_Closed;
-                _popUp.Child = null;
+                _popup.PreviewMouseLeftButtonDown -= PopupPreviewMouseLeftButtonDown;
+                _popup.Opened -= PopupOpened;
+                _popup.Closed -= PopupClosed;
+                _popup.Child = null;
             }
 
             if (_dropDownButton != null)
@@ -380,20 +380,20 @@ namespace HandyControl.Controls
 
             base.OnApplyTemplate();
 
-            _popUp = GetTemplateChild(ElementPopup) as Popup;
+            _popup = GetTemplateChild(ElementPopup) as Popup;
             _dropDownButton = GetTemplateChild(ElementButton) as Button;
             _textBox = GetTemplateChild(ElementTextBox) as WatermarkTextBox;
 
             CheckNull();
 
-            _popUp.PreviewMouseLeftButtonDown += PopUp_PreviewMouseLeftButtonDown;
-            _popUp.Opened += PopUp_Opened;
-            _popUp.Closed += PopUp_Closed;
-            _popUp.Child = Clock;
+            _popup.PreviewMouseLeftButtonDown += PopupPreviewMouseLeftButtonDown;
+            _popup.Opened += PopupOpened;
+            _popup.Closed += PopupClosed;
+            _popup.Child = Clock;
 
             if (IsDropDownOpen)
             {
-                _popUp.IsOpen = true;
+                _popup.IsOpen = true;
             }
 
             _dropDownButton.Click += DropDownButton_Click;
@@ -450,7 +450,7 @@ namespace HandyControl.Controls
 
         private void CheckNull()
         {
-            if (_dropDownButton == null || _popUp == null || _textBox == null)
+            if (_dropDownButton == null || _popup == null || _textBox == null)
                 throw new Exception();
         }
 
@@ -504,7 +504,7 @@ namespace HandyControl.Controls
                                 {
                                     if ((Keyboard.Modifiers & ModifierKeys.Alt) == ModifierKeys.Alt)
                                     {
-                                        TogglePopUp();
+                                        TogglePopup();
                                         return true;
                                     }
 
@@ -540,7 +540,7 @@ namespace HandyControl.Controls
             return _isHandlerSuspended != null && _isHandlerSuspended.ContainsKey(property);
         }
 
-        private void PopUp_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        private void PopupPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (sender is Popup popup && !popup.StaysOpen)
             {
@@ -553,9 +553,9 @@ namespace HandyControl.Controls
 
         private void Clock_SelectedTimeChanged(object sender, FunctionEventArgs<DateTime?> e) => SelectedTime = e.Info;
 
-        private void Clock_Confirmed() => TogglePopUp();
+        private void Clock_Confirmed() => TogglePopup();
 
-        private void PopUp_Opened(object sender, EventArgs e)
+        private void PopupOpened(object sender, EventArgs e)
         {
             if (!IsDropDownOpen)
             {
@@ -567,7 +567,7 @@ namespace HandyControl.Controls
             OnClockOpened(new RoutedEventArgs());
         }
 
-        private void PopUp_Closed(object sender, EventArgs e)
+        private void PopupClosed(object sender, EventArgs e)
         {
             if (IsDropDownOpen)
             {
@@ -582,9 +582,9 @@ namespace HandyControl.Controls
             OnClockClosed(new RoutedEventArgs());
         }
 
-        private void DropDownButton_Click(object sender, RoutedEventArgs e) => TogglePopUp();
+        private void DropDownButton_Click(object sender, RoutedEventArgs e) => TogglePopup();
 
-        private void TogglePopUp()
+        private void TogglePopup()
         {
             if (IsDropDownOpen)
             {

src/Shared/HandyControl_Shared/Controls/Slider/PreviewSlider.cs

@@ -2,22 +2,28 @@
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Controls.Primitives;
+using System.Windows.Data;
+using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using HandyControl.Data;
-
+using HandyControl.Interactivity;
 
 namespace HandyControl.Controls
 {
-    [TemplatePart(Name = PreviewContentKey, Type = typeof(ContentControl))]
-    [TemplatePart(Name = TracKKey, Type = typeof(Track))]
+    [TemplatePart(Name = TrackKey, Type = typeof(Track))]
+    [TemplatePart(Name = ThumbKey, Type = typeof(FrameworkElement))]
     public class PreviewSlider : Slider
     {
-        private const string PreviewContentKey = "PART_ContentBorder";
+        private AdornerContainer _adorner;
 
-        private const string TracKKey = "PART_Track";
+        private const string TrackKey = "PART_Track";
 
-        private ContentControl _previewContent;
+        private const string ThumbKey = "PART_Thumb";
+
+        private FrameworkElement _previewContent;
+
+        private FrameworkElement _thumb;
 
         private TranslateTransform _transform;
 
@@ -38,13 +44,28 @@ namespace HandyControl.Controls
             set => SetValue(PreviewContentProperty, value);
         }
 
-        public static readonly DependencyProperty PreviewPositionProperty = DependencyProperty.Register(
-            "PreviewPosition", typeof(double), typeof(PreviewSlider), new PropertyMetadata(ValueBoxes.Double0Box));
+        public static readonly DependencyProperty PreviewContentOffsetProperty = DependencyProperty.Register(
+            "PreviewContentOffset", typeof(double), typeof(PreviewSlider), new PropertyMetadata(9.0));
+
+        public double PreviewContentOffset
+        {
+            get => (double) GetValue(PreviewContentOffsetProperty);
+            set => SetValue(PreviewContentOffsetProperty, value);
+        }
+
+        public static readonly DependencyProperty PreviewPositionProperty = DependencyProperty.RegisterAttached(
+            "PreviewPosition", typeof(double), typeof(PreviewSlider), new FrameworkPropertyMetadata(ValueBoxes.Double0Box, FrameworkPropertyMetadataOptions.Inherits));
+
+        public static void SetPreviewPosition(DependencyObject element, double value)
+            => element.SetValue(PreviewPositionProperty, value);
+
+        public static double GetPreviewPosition(DependencyObject element)
+            => (double) element.GetValue(PreviewPositionProperty);
 
         public double PreviewPosition
         {
-            get => (double) GetValue(PreviewPositionProperty);
-            set => SetValue(PreviewPositionProperty, value);
+            get => GetPreviewPosition(_previewContent);
+            set => SetPreviewPosition(_previewContent, value);
         }
 
         /// <summary>
@@ -67,26 +88,97 @@ namespace HandyControl.Controls
         {
             base.OnMouseMove(e);
 
-            var p = e.GetPosition(_track);
-            _transform.X = p.X - _previewContent.ActualWidth/2;
+            if (_previewContent == null) return;
+            var p = e.GetPosition(_adorner);
+
+            if (Orientation == Orientation.Horizontal)
+            {
+                var pos = (e.GetPosition(this).X - _thumb.ActualWidth / 2) / _track.ActualWidth * Maximum;
+                if (pos > Maximum || pos < 0)
+                {
+                    if (_thumb.IsMouseCaptureWithin)
+                    {
+                        PreviewPosition = Value;
+                    } 
+                    return;
+                }
+
+                _transform.X = p.X - _previewContent.ActualWidth / 2;
+                _transform.Y = TranslatePoint(new Point(), _adorner).Y - _previewContent.ActualHeight - PreviewContentOffset;
+
+                PreviewPosition = _thumb.IsMouseCaptureWithin ? Value : pos;
+            }
+            else
+            {
+                var pos = Maximum - (e.GetPosition(this).Y - _thumb.ActualHeight / 2) / _track.ActualHeight * Maximum;
+                if (pos > Maximum || pos < 0)
+                {
+                    if (_thumb.IsMouseCaptureWithin)
+                    {
+                        PreviewPosition = Value;
+                    }
+                    return;
+                }
+
+                _transform.X = TranslatePoint(new Point(), _adorner).X - _previewContent.ActualWidth - PreviewContentOffset;
+                _transform.Y = p.Y - _previewContent.ActualHeight / 2;
+
+                PreviewPosition = _thumb.IsMouseCaptureWithin ? Value : pos;
+            }
 
-            PreviewPosition = p.X / _track.ActualWidth * Maximum;
             RaiseEvent(new FunctionEventArgs<double>(PreviewPositionChangedEvent, this)
             {
                 Info = PreviewPosition
             });
         }
 
+        protected override void OnMouseEnter(MouseEventArgs e)
+        {
+            base.OnMouseEnter(e);
+
+            if (_adorner == null)
+            {
+                var layer = AdornerLayer.GetAdornerLayer(this);
+                if (layer == null) return;
+                _adorner = new AdornerContainer(layer)
+                {
+                    Child = _previewContent
+                };
+                layer.Add(_adorner);
+            }
+        }
+
+        protected override void OnMouseLeave(MouseEventArgs e)
+        {
+            base.OnMouseLeave(e);
+
+            var layer = AdornerLayer.GetAdornerLayer(this);
+            if (layer == null) return;
+            layer.Remove(_adorner);
+            _adorner.Child = null;
+            _adorner = null;
+        }
+
         public override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
-            _previewContent = Template.FindName(PreviewContentKey, this) as ContentControl;
-            _track = Template.FindName(TracKKey, this) as Track;
+
+            var contentControl = new ContentControl
+            {
+                DataContext = this
+            };
+            contentControl.SetBinding(ContentControl.ContentProperty, new Binding(PreviewContentProperty.Name) { Source = this });
+            _previewContent = contentControl;
+
+            _track = Template.FindName(TrackKey, this) as Track;
+            _thumb = Template.FindName(ThumbKey, this) as FrameworkElement;
 
             if (_previewContent != null)
             {
                 _transform = new TranslateTransform();
                 _previewContent.RenderTransform = _transform;
+                _previewContent.HorizontalAlignment = HorizontalAlignment.Left;
+                _previewContent.VerticalAlignment = VerticalAlignment.Top;
             }
         }
     }

src/Shared/HandyControl_Shared/Themes/Basic/Colors/Colors.xaml

@@ -2,20 +2,20 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:system="clr-namespace:System;assembly=mscorlib">
 
-    <Color x:Key="PrimaryColor">#73a5ff</Color>
-    <Color x:Key="DarkPrimaryColor">#5477f5</Color>
+    <Color x:Key="PrimaryColor">#326cf3</Color>
+    <Color x:Key="DarkPrimaryColor">#326cf3</Color>
 
-    <Color x:Key="DangerColor">#ff8792</Color>
-    <Color x:Key="DarkDangerColor">#ff4c9f</Color>
+    <Color x:Key="DangerColor">#db3340</Color>
+    <Color x:Key="DarkDangerColor">#db3340</Color>
 
-    <Color x:Key="WarningColor">#ffd180</Color>
-    <Color x:Key="DarkWarningColor">#ff9100</Color>
+    <Color x:Key="WarningColor">#e9af20</Color>
+    <Color x:Key="DarkWarningColor">#e9af20</Color>
 
-    <Color x:Key="InfoColor">#4dd0e1</Color>
+    <Color x:Key="InfoColor">#00bcd4</Color>
     <Color x:Key="DarkInfoColor">#00bcd4</Color>
 
-    <Color x:Key="SuccessColor">#A5D6A7</Color>
-    <Color x:Key="DarkSuccessColor">#4CAF50</Color>
+    <Color x:Key="SuccessColor">#2db84d</Color>
+    <Color x:Key="DarkSuccessColor">#2db84d</Color>
 
     <Color x:Key="PrimaryTextColor">#212121</Color>
     <Color x:Key="SecondaryTextColor">#757575</Color>
@@ -29,14 +29,14 @@
     <Color x:Key="RegionColor">#ffffff</Color>
     <Color x:Key="SecondaryRegionColor">#eeeeee</Color>
     <Color x:Key="ThirdlyRegionColor">White</Color>
-    <Color x:Key="TitleColor">#73a5ff</Color>
-    <Color x:Key="SecondaryTitleColor">#5477f5</Color>
+    <Color x:Key="TitleColor">#326cf3</Color>
+    <Color x:Key="SecondaryTitleColor">#326cf3</Color>
 
     <Color x:Key="DefaultColor">White</Color>
     <Color x:Key="DarkDefaultColor">#f5f5f5</Color>
 
-    <Color x:Key="AccentColor">#ff5722</Color>
-    <Color x:Key="DarkAccentColor">#d43f3a</Color>
+    <Color x:Key="AccentColor">#f8491e</Color>
+    <Color x:Key="DarkAccentColor">#f8491e</Color>
 
     <Color x:Key="DarkMaskColor">#20000000</Color>
     <Color x:Key="DarkOpacityColor">#40000000</Color>

src/Shared/HandyControl_Shared/Themes/Styles/Base/SliderBaseStyle.xaml

@@ -9,322 +9,8 @@
         <ResourceDictionary Source="../Label.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
-    <!--CompareSlider-->
-    <Style x:Key="CompareSliderRepeatButtonTransparent" 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">
-                    <ContentPresenter Content="{TemplateBinding Content}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
+    <!--region Common-->
 
-    <ControlTemplate x:Key="CompareSliderThumbHorizontal" TargetType="Thumb">
-        <ControlTemplate.Resources>
-            <Storyboard x:Key="Storyboard1">
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathLeft">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="-2"/>
-                </DoubleAnimationUsingKeyFrames>
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathRight">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
-                </DoubleAnimationUsingKeyFrames>
-            </Storyboard>
-            <Storyboard x:Key="Storyboard2">
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathLeft">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
-                </DoubleAnimationUsingKeyFrames>
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathRight">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
-                </DoubleAnimationUsingKeyFrames>
-            </Storyboard>
-        </ControlTemplate.Resources>
-        <controls:SimplePanel>
-            <Border Width="1" HorizontalAlignment="Center">
-                <Border.Background>
-                    <DrawingBrush RenderOptions.CachingHint="Cache" Viewport="0,0,1,8" ViewportUnits="Absolute" Stretch="None" TileMode="Tile">
-                        <DrawingBrush.Drawing>
-                            <DrawingGroup>
-                                <GeometryDrawing Brush="{DynamicResource BorderBrush}">
-                                    <GeometryDrawing.Geometry>
-                                        <GeometryGroup>
-                                            <RectangleGeometry Rect="0,0,1,4" />
-                                        </GeometryGroup>
-                                    </GeometryDrawing.Geometry>
-                                </GeometryDrawing>
-                            </DrawingGroup>
-                        </DrawingBrush.Drawing>
-                    </DrawingBrush>
-                </Border.Background>
-            </Border>
-            <Border x:Name="grip" Width="30" Height="30" CornerRadius="15" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="White">
-                <controls:SimplePanel Width="30" Height="30" Margin="-1,-1,0,0">
-                    <Path x:Name="PathLeft" Data="{StaticResource LeftGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="6,8" HorizontalAlignment="Left" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
-                        <Path.RenderTransform>
-                            <TransformGroup>
-                                <TranslateTransform/>
-                            </TransformGroup>
-                        </Path.RenderTransform>
-                    </Path>
-                    <Path x:Name="PathRight" Data="{StaticResource RightGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="6,8" HorizontalAlignment="Right" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
-                        <Path.RenderTransform>
-                            <TransformGroup>
-                                <TranslateTransform/>
-                            </TransformGroup>
-                        </Path.RenderTransform>
-                    </Path>
-                </controls:SimplePanel>
-            </Border>
-        </controls:SimplePanel>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true">
-                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
-                <Setter Property="Stroke" TargetName="PathLeft" Value="White"/>
-                <Setter Property="Stroke" TargetName="PathRight" Value="White"/>
-            </Trigger>
-            <Trigger Property="IsDragging" Value="true">
-                <Trigger.EnterActions>
-                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
-                </Trigger.EnterActions>
-                <Trigger.ExitActions>
-                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
-                </Trigger.ExitActions>
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-
-    <ControlTemplate x:Key="CompareSliderHorizontal" TargetType="controls:CompareSlider">
-        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
-            <controls:CompareTrack Margin="-14,0,-15,0" x:Name="PART_Track">
-                <Track.DecreaseRepeatButton>
-                    <RepeatButton Margin="14,0,-15,0" Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
-                        <RepeatButton.Content>
-                            <Border HorizontalAlignment="Left" Width="{TemplateBinding Width}">
-                                <ContentPresenter Content="{TemplateBinding TargetContent}"/>
-                            </Border>
-                        </RepeatButton.Content>
-                    </RepeatButton>
-                </Track.DecreaseRepeatButton>
-                <Track.IncreaseRepeatButton>
-                    <RepeatButton Margin="-15,0,15,0" Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
-                        <RepeatButton.Content>
-                            <Border HorizontalAlignment="Right" Width="{TemplateBinding ActualWidth}">
-                                <ContentPresenter Content="{TemplateBinding SourceContent}"/>
-                            </Border>
-                        </RepeatButton.Content>
-                    </RepeatButton>
-                </Track.IncreaseRepeatButton>
-                <Track.Thumb>
-                    <Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource CompareSliderThumbHorizontal}" Width="30" Margin="0,0,0,0"/>
-                </Track.Thumb>
-            </controls:CompareTrack>
-        </Border>
-    </ControlTemplate>
-
-    <ControlTemplate x:Key="CompareSliderThumbVertical" TargetType="Thumb">
-        <ControlTemplate.Resources>
-            <Storyboard x:Key="Storyboard1">
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathUp">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="-2"/>
-                </DoubleAnimationUsingKeyFrames>
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathDown">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
-                </DoubleAnimationUsingKeyFrames>
-            </Storyboard>
-            <Storyboard x:Key="Storyboard2">
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathUp">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
-                </DoubleAnimationUsingKeyFrames>
-                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathDown">
-                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
-                </DoubleAnimationUsingKeyFrames>
-            </Storyboard>
-        </ControlTemplate.Resources>
-        <controls:SimplePanel>
-            <Border Height="1" VerticalAlignment="Center">
-                <Border.Background>
-                    <DrawingBrush RenderOptions.CachingHint="Cache" Viewport="0,0,8,1" ViewportUnits="Absolute" Stretch="None" TileMode="Tile">
-                        <DrawingBrush.Drawing>
-                            <DrawingGroup>
-                                <GeometryDrawing Brush="{DynamicResource BorderBrush}">
-                                    <GeometryDrawing.Geometry>
-                                        <GeometryGroup>
-                                            <RectangleGeometry Rect="0,0,4,1" />
-                                        </GeometryGroup>
-                                    </GeometryDrawing.Geometry>
-                                </GeometryDrawing>
-                            </DrawingGroup>
-                        </DrawingBrush.Drawing>
-                    </DrawingBrush>
-                </Border.Background>
-            </Border>
-            <Border x:Name="grip" Width="30" Height="30" CornerRadius="15" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="White">
-                <controls:SimplePanel Width="30" Height="30" Margin="-1,-1,0,0">
-                    <Path x:Name="PathUp" Data="{StaticResource UpGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="9,6" VerticalAlignment="Top" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
-                        <Path.RenderTransform>
-                            <TransformGroup>
-                                <TranslateTransform/>
-                            </TransformGroup>
-                        </Path.RenderTransform>
-                    </Path>
-                    <Path x:Name="PathDown" Data="{StaticResource DownGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="9,6" VerticalAlignment="Bottom" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
-                        <Path.RenderTransform>
-                            <TransformGroup>
-                                <TranslateTransform/>
-                            </TransformGroup>
-                        </Path.RenderTransform>
-                    </Path>
-                </controls:SimplePanel>
-            </Border>
-        </controls:SimplePanel>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true" SourceName="grip">
-                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
-                <Setter Property="Stroke" TargetName="PathUp" Value="White"/>
-                <Setter Property="Stroke" TargetName="PathDown" Value="White"/>
-            </Trigger>
-            <Trigger Property="IsDragging" Value="true">
-                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
-                <Setter Property="Stroke" TargetName="PathUp" Value="White"/>
-                <Setter Property="Stroke" TargetName="PathDown" Value="White"/>
-                <Trigger.EnterActions>
-                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
-                </Trigger.EnterActions>
-                <Trigger.ExitActions>
-                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
-                </Trigger.ExitActions>
-            </Trigger>
-        </ControlTemplate.Triggers>
-    </ControlTemplate>
-
-    <ControlTemplate x:Key="CompareSliderVertical" TargetType="controls:CompareSlider">
-        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
-            <controls:CompareTrack Margin="0,-14,0,-15" x:Name="PART_Track">
-                <Track.DecreaseRepeatButton>
-                    <RepeatButton Margin="0,-15,0,15" Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
-                        <RepeatButton.Content>
-                            <Border VerticalAlignment="Bottom" Height="{TemplateBinding Height}">
-                                <ContentPresenter Content="{TemplateBinding TargetContent}"/>
-                            </Border>
-                        </RepeatButton.Content>
-                    </RepeatButton>
-                </Track.DecreaseRepeatButton>
-                <Track.IncreaseRepeatButton>
-                    <RepeatButton Margin="0,14,0,-15" Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
-                        <RepeatButton.Content>
-                            <Border VerticalAlignment="Top" Height="{TemplateBinding Height}">
-                                <ContentPresenter Content="{TemplateBinding SourceContent}"/>
-                            </Border>
-                        </RepeatButton.Content>
-                    </RepeatButton>
-                </Track.IncreaseRepeatButton>
-                <Track.Thumb>
-                    <Thumb x:Name="Thumb" Focusable="False" Height="30" OverridesDefaultStyle="True" Template="{StaticResource CompareSliderThumbVertical}" VerticalAlignment="Top"/>
-                </Track.Thumb>
-            </controls:CompareTrack>
-        </Border>
-    </ControlTemplate>
-
-    <Style x:Key="CompareSliderBaseStyle" TargetType="controls:CompareSlider">
-        <Setter Property="Focusable" Value="False"/>
-        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
-        <Setter Property="Background" Value="Transparent"/>
-        <Setter Property="BorderThickness" Value="1"/>
-        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
-        <Setter Property="MinWidth" Value="30"/>
-        <Setter Property="MinHeight" Value="30"/>
-        <Setter Property="Template" Value="{StaticResource CompareSliderHorizontal}"/>
-        <Style.Triggers>
-            <Trigger Property="Orientation" Value="Vertical">
-                <Setter Property="Template" Value="{StaticResource CompareSliderVertical}"/>
-            </Trigger>
-        </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}" 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">
-        <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="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>
-                <Track.IncreaseRepeatButton>
-                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource PreviewSliderRepeatButtonStyle}"/>
-                </Track.IncreaseRepeatButton>
-                <Track.Thumb>
-                    <Thumb Margin="-9,0" x:Name="Thumb" 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 x:Key="PreviewSliderBaseStyle" 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>
-
-    <!--Common-->
     <Style x:Key="SliderRepeatButtonHorizontalStyle" TargetType="RepeatButton">
         <Setter Property="OverridesDefaultStyle" Value="true"/>
         <Setter Property="Background" Value="Transparent"/>
@@ -638,7 +324,362 @@
         </Style.Triggers>
     </Style>
 
-    <!--RangeSlider-->
+    <!--endregion-->
+
+    <!--region CompareSlider-->
+
+    <Style x:Key="CompareSliderRepeatButtonTransparent" 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">
+                    <ContentPresenter Content="{TemplateBinding Content}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <ControlTemplate x:Key="CompareSliderThumbHorizontal" TargetType="Thumb">
+        <ControlTemplate.Resources>
+            <Storyboard x:Key="Storyboard1">
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathLeft">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="-2"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathRight">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+            <Storyboard x:Key="Storyboard2">
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathLeft">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="PathRight">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+        </ControlTemplate.Resources>
+        <controls:SimplePanel>
+            <Border Width="1" HorizontalAlignment="Center">
+                <Border.Background>
+                    <DrawingBrush RenderOptions.CachingHint="Cache" Viewport="0,0,1,8" ViewportUnits="Absolute" Stretch="None" TileMode="Tile">
+                        <DrawingBrush.Drawing>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="{DynamicResource BorderBrush}">
+                                    <GeometryDrawing.Geometry>
+                                        <GeometryGroup>
+                                            <RectangleGeometry Rect="0,0,1,4" />
+                                        </GeometryGroup>
+                                    </GeometryDrawing.Geometry>
+                                </GeometryDrawing>
+                            </DrawingGroup>
+                        </DrawingBrush.Drawing>
+                    </DrawingBrush>
+                </Border.Background>
+            </Border>
+            <Border x:Name="grip" Width="30" Height="30" CornerRadius="15" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="White">
+                <controls:SimplePanel Width="30" Height="30" Margin="-1,-1,0,0">
+                    <Path x:Name="PathLeft" Data="{StaticResource LeftGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="6,8" HorizontalAlignment="Left" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
+                        <Path.RenderTransform>
+                            <TransformGroup>
+                                <TranslateTransform/>
+                            </TransformGroup>
+                        </Path.RenderTransform>
+                    </Path>
+                    <Path x:Name="PathRight" Data="{StaticResource RightGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="6,8" HorizontalAlignment="Right" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
+                        <Path.RenderTransform>
+                            <TransformGroup>
+                                <TranslateTransform/>
+                            </TransformGroup>
+                        </Path.RenderTransform>
+                    </Path>
+                </controls:SimplePanel>
+            </Border>
+        </controls:SimplePanel>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="true">
+                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
+                <Setter Property="Stroke" TargetName="PathLeft" Value="White"/>
+                <Setter Property="Stroke" TargetName="PathRight" Value="White"/>
+            </Trigger>
+            <Trigger Property="IsDragging" Value="true">
+                <Trigger.EnterActions>
+                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
+                </Trigger.EnterActions>
+                <Trigger.ExitActions>
+                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
+                </Trigger.ExitActions>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="CompareSliderHorizontal" TargetType="controls:CompareSlider">
+        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
+            <controls:CompareTrack Margin="-14,0,-15,0" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Margin="14,0,-15,0" Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
+                        <RepeatButton.Content>
+                            <Border HorizontalAlignment="Left" Width="{TemplateBinding Width}">
+                                <ContentPresenter Content="{TemplateBinding TargetContent}"/>
+                            </Border>
+                        </RepeatButton.Content>
+                    </RepeatButton>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Margin="-15,0,15,0" Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
+                        <RepeatButton.Content>
+                            <Border HorizontalAlignment="Right" Width="{TemplateBinding ActualWidth}">
+                                <ContentPresenter Content="{TemplateBinding SourceContent}"/>
+                            </Border>
+                        </RepeatButton.Content>
+                    </RepeatButton>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource CompareSliderThumbHorizontal}" Width="30" Margin="0,0,0,0"/>
+                </Track.Thumb>
+            </controls:CompareTrack>
+        </Border>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="CompareSliderThumbVertical" TargetType="Thumb">
+        <ControlTemplate.Resources>
+            <Storyboard x:Key="Storyboard1">
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathUp">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="-2"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathDown">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="2"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+            <Storyboard x:Key="Storyboard2">
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathUp">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                </DoubleAnimationUsingKeyFrames>
+                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)" Storyboard.TargetName="PathDown">
+                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
+                </DoubleAnimationUsingKeyFrames>
+            </Storyboard>
+        </ControlTemplate.Resources>
+        <controls:SimplePanel>
+            <Border Height="1" VerticalAlignment="Center">
+                <Border.Background>
+                    <DrawingBrush RenderOptions.CachingHint="Cache" Viewport="0,0,8,1" ViewportUnits="Absolute" Stretch="None" TileMode="Tile">
+                        <DrawingBrush.Drawing>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="{DynamicResource BorderBrush}">
+                                    <GeometryDrawing.Geometry>
+                                        <GeometryGroup>
+                                            <RectangleGeometry Rect="0,0,4,1" />
+                                        </GeometryGroup>
+                                    </GeometryDrawing.Geometry>
+                                </GeometryDrawing>
+                            </DrawingGroup>
+                        </DrawingBrush.Drawing>
+                    </DrawingBrush>
+                </Border.Background>
+            </Border>
+            <Border x:Name="grip" Width="30" Height="30" CornerRadius="15" BorderThickness="1" BorderBrush="{DynamicResource BorderBrush}" Background="White">
+                <controls:SimplePanel Width="30" Height="30" Margin="-1,-1,0,0">
+                    <Path x:Name="PathUp" Data="{StaticResource UpGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="9,6" VerticalAlignment="Top" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
+                        <Path.RenderTransform>
+                            <TransformGroup>
+                                <TranslateTransform/>
+                            </TransformGroup>
+                        </Path.RenderTransform>
+                    </Path>
+                    <Path x:Name="PathDown" Data="{StaticResource DownGeometry}" StrokeThickness="1" Stroke="{DynamicResource PrimaryBrush}" Margin="9,6" VerticalAlignment="Bottom" Stretch="Uniform" Width="12" Height="12" RenderTransformOrigin="0.5,0.5">
+                        <Path.RenderTransform>
+                            <TransformGroup>
+                                <TranslateTransform/>
+                            </TransformGroup>
+                        </Path.RenderTransform>
+                    </Path>
+                </controls:SimplePanel>
+            </Border>
+        </controls:SimplePanel>
+        <ControlTemplate.Triggers>
+            <Trigger Property="IsMouseOver" Value="true" SourceName="grip">
+                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
+                <Setter Property="Stroke" TargetName="PathUp" Value="White"/>
+                <Setter Property="Stroke" TargetName="PathDown" Value="White"/>
+            </Trigger>
+            <Trigger Property="IsDragging" Value="true">
+                <Setter Property="Background" TargetName="grip" Value="{DynamicResource PrimaryBrush}"/>
+                <Setter Property="Stroke" TargetName="PathUp" Value="White"/>
+                <Setter Property="Stroke" TargetName="PathDown" Value="White"/>
+                <Trigger.EnterActions>
+                    <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
+                </Trigger.EnterActions>
+                <Trigger.ExitActions>
+                    <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>
+                </Trigger.ExitActions>
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="CompareSliderVertical" TargetType="controls:CompareSlider">
+        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
+            <controls:CompareTrack Margin="0,-14,0,-15" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Margin="0,-15,0,15" Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
+                        <RepeatButton.Content>
+                            <Border VerticalAlignment="Bottom" Height="{TemplateBinding Height}">
+                                <ContentPresenter Content="{TemplateBinding TargetContent}"/>
+                            </Border>
+                        </RepeatButton.Content>
+                    </RepeatButton>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Margin="0,14,0,-15" Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource CompareSliderRepeatButtonTransparent}">
+                        <RepeatButton.Content>
+                            <Border VerticalAlignment="Top" Height="{TemplateBinding Height}">
+                                <ContentPresenter Content="{TemplateBinding SourceContent}"/>
+                            </Border>
+                        </RepeatButton.Content>
+                    </RepeatButton>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb x:Name="Thumb" Focusable="False" Height="30" OverridesDefaultStyle="True" Template="{StaticResource CompareSliderThumbVertical}" VerticalAlignment="Top"/>
+                </Track.Thumb>
+            </controls:CompareTrack>
+        </Border>
+    </ControlTemplate>
+
+    <Style x:Key="CompareSliderBaseStyle" TargetType="controls:CompareSlider">
+        <Setter Property="Focusable" Value="False"/>
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="MinWidth" Value="30"/>
+        <Setter Property="MinHeight" Value="30"/>
+        <Setter Property="Template" Value="{StaticResource CompareSliderHorizontal}"/>
+        <Style.Triggers>
+            <Trigger Property="Orientation" Value="Vertical">
+                <Setter Property="Template" Value="{StaticResource CompareSliderVertical}"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <!--endregion-->
+
+    <!--region PreviewSlider-->
+
+    <Style x:Key="PreviewSliderRepeatButtonHorizontalStyle" 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="PreviewSliderRepeatButtonVerticalStyle" 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="PreviewSliderThumb" 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="PreviewSliderHorizontal" TargetType="controls:PreviewSlider">
+        <controls:SimplePanel>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Height="2" VerticalAlignment="center" Margin="9,0"/>
+            <Track Margin="9,0" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource PreviewSliderRepeatButtonHorizontalStyle}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource PreviewSliderRepeatButtonHorizontalStyle}"/>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Margin="-9,0" x:Name="PART_Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource PreviewSliderThumb}" VerticalAlignment="Center" Width="18"/>
+                </Track.Thumb>
+            </Track>
+        </controls:SimplePanel>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="PreviewSliderVertical" TargetType="controls:PreviewSlider">
+        <controls:SimplePanel>
+            <Border x:Name="TrackBackground" Background="{TemplateBinding Background}" Width="2" HorizontalAlignment="center" Margin="0,9"/>
+            <Track Margin="0,9" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Background="{DynamicResource PrimaryBrush}" Style="{StaticResource PreviewSliderRepeatButtonVerticalStyle}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource PreviewSliderRepeatButtonVerticalStyle}"/>
+                </Track.IncreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Margin="0,-9" x:Name="PART_Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource PreviewSliderThumb}" HorizontalAlignment="Center" Width="18"/>
+                </Track.Thumb>
+            </Track>
+        </controls:SimplePanel>
+    </ControlTemplate>
+
+    <Style x:Key="PreviewSliderBaseStyle" 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.Triggers>
+            <Trigger Property="Orientation" Value="Vertical">
+                <Setter Property="Template" Value="{StaticResource PreviewSliderVertical}"/>
+            </Trigger>
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Opacity" Value=".4"/>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <!--endregion-->
+
+    <!--region RangeSlider-->
+
     <ControlTemplate x:Key="RangeSliderThumb" TargetType="controls:RangeThumb">
         <Border Effect="{StaticResource EffectShadow1}" Name="BorderDot"  BorderThickness="0" BorderBrush="{DynamicResource PrimaryBrush}" Width="18" Height="18" Background="White" CornerRadius="9"/>
         <ControlTemplate.Triggers>
@@ -922,4 +963,6 @@
         </Style.Triggers>
     </Style>
 
+    <!--endregion-->  
+
 </ResourceDictionary>