From a702b03f3ea7fc8959cdcffd85990669c8300ae6 Mon Sep 17 00:00:00 2001
From: Marc-Antoine-Soucy
 <90481654+Marc-Antoine-Soucy@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:19:24 -0400
Subject: [PATCH] feat(slider): adding other elements to lightweight styling
 (#1070)

* style: fix tabs

* feat(slider): adding other elements to lightweight styling
---
 .../Styles/Controls/v2/Slider.xaml            | 701 +++++++++---------
 1 file changed, 367 insertions(+), 334 deletions(-)

diff --git a/src/library/Uno.Material/Styles/Controls/v2/Slider.xaml b/src/library/Uno.Material/Styles/Controls/v2/Slider.xaml
index c69567b40..34eb6c9e0 100644
--- a/src/library/Uno.Material/Styles/Controls/v2/Slider.xaml
+++ b/src/library/Uno.Material/Styles/Controls/v2/Slider.xaml
@@ -1,336 +1,369 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-                    xmlns:not_win="http://uno.ui/not_win"
-                    mc:Ignorable="not_win">
-
-    <ResourceDictionary.ThemeDictionaries>
-        <!-- Light Theme -->
-        <ResourceDictionary x:Key="Light">
-
-            <Color x:Key="MaterialSliderThumbDisabledColor">#B8B4BC</Color>
-            <SolidColorBrush x:Key="MaterialSliderThumbDisabledBrush"
-                             Color="{ThemeResource MaterialSliderThumbDisabledColor}" />
-
-            <!-- Font resources -->
-            <StaticResource x:Key="SliderFontFamily" ResourceKey="MaterialRegularFontFamily" />
-            <StaticResource x:Key="SliderFontSize" ResourceKey="LabelMediumFontSize" />
-
-            <!-- Color of the track -->
-            <StaticResource x:Key="SliderTrackFill" ResourceKey="OnSurfaceSelectedBrush" />
-            <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="OnSurfaceSelectedBrush" />
-            <StaticResource x:Key="SliderTrackValueFill" ResourceKey="PrimaryBrush" />
-            <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
-
-            <!-- Color for the Slider Ticks. For future uses. -->
-            <StaticResource x:Key="SliderTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
-            <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
-            <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
-
-            <!-- Ressources for the SliderThumb -->
-            <StaticResource x:Key="SliderThumbBackground" ResourceKey="PrimaryBrush" />
-            <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="MaterialSliderThumbDisabledBrush" />
-        </ResourceDictionary>
-
-        <!-- Dark Theme -->
-        <ResourceDictionary x:Key="Default">
-
-            <Color x:Key="MaterialSliderThumbDisabledColor">#685C64</Color>
-            <SolidColorBrush x:Key="MaterialSliderThumbDisabledBrush"
-                             Color="{ThemeResource MaterialSliderThumbDisabledColor}" />
-
-            <!-- Font resources -->
-            <StaticResource x:Key="SliderFontFamily" ResourceKey="MaterialRegularFontFamily" />
-            <StaticResource x:Key="SliderFontSize" ResourceKey="LabelMediumFontSize" />
-
-            <!-- Color of the track -->
-            <StaticResource x:Key="SliderTrackFill" ResourceKey="OnSurfaceSelectedBrush" />
-            <StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="OnSurfaceSelectedBrush" />
-            <StaticResource x:Key="SliderTrackValueFill" ResourceKey="PrimaryBrush" />
-            <StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
-
-            <!-- Color for the Slider Ticks, For future uses. -->
-            <StaticResource x:Key="SliderTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
-            <StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
-            <StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
-
-            <!-- Resource for the SliderThumb -->
-            <StaticResource x:Key="SliderThumbBackground" ResourceKey="PrimaryBrush" />
-            <StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="MaterialSliderThumbDisabledBrush" />
-
-        </ResourceDictionary>
-    </ResourceDictionary.ThemeDictionaries>
-
-    <StaticResource x:Key="SliderTrackCornerRadius" ResourceKey="ControlCornerRadius" />
-
-    <x:Double x:Key="SliderHorizontalThumbWidth">12</x:Double>
-    <x:Double x:Key="SliderHorizontalThumbHeight">12</x:Double>
-    <x:Double x:Key="SliderVerticalThumbWidth">12</x:Double>
-    <x:Double x:Key="SliderVerticalThumbHeight">12</x:Double>
-    <x:Double x:Key="SliderThumbCornerRadius">10</x:Double>
-
-    <!-- Material Slider Thumb Style -->
-    <Style x:Key="MaterialSliderThumbStyle"
-           TargetType="Thumb">
-
-        <Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="Thumb">
-                    <Border Background="{TemplateBinding Background}"
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{ThemeResource SliderThumbCornerRadius}" />
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-
-    <!-- Material Slider Style -->
-    <Style x:Key="MaterialSliderStyle"
-           TargetType="Slider">
-
-        <Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
-        <Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
-        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="FontFamily" Value="{ThemeResource SliderFontFamily}" />
-        <Setter Property="FontSize" Value="{ThemeResource SliderFontSize}" />
-        <Setter Property="ManipulationMode" Value="None" />
-        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-        <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
-        <Setter Property="IsFocusEngagementEnabled" Value="True" />
-        <not_win:Setter Property="CornerRadius"
-                        Value="{ThemeResource SliderTrackCornerRadius}" />
-
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="Slider">
-
-                    <Grid Margin="{TemplateBinding Padding}">
-
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="CommonStates">
-                                <VisualState x:Name="Normal" />
-                                <VisualState x:Name="Pressed" />
-
-                                <VisualState x:Name="Disabled">
-                                    <VisualState.Setters>
-                                        <Setter Target="VerticalDecreaseRect.Fill" Value="{ThemeResource SliderTrackValueFillDisabled}" />
-                                        <Setter Target="HorizontalDecreaseRect.Fill" Value="{ThemeResource SliderTrackValueFillDisabled}" />
-                                        <Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource SliderTrackFillDisabled}" />
-                                        <Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource SliderTrackFillDisabled}" />
-                                        <Setter Target="HorizontalThumb.Background" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
-                                        <Setter Target="VerticalThumb.Background" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
-                                        <Setter Target="TopTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                        <Setter Target="BottomTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                        <Setter Target="LeftTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                        <Setter Target="RightTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
-                                    </VisualState.Setters>
-                                </VisualState>
-
-                                <VisualState x:Name="PointerOver" />
-
-                            </VisualStateGroup>
-
-                            <VisualStateGroup x:Name="FocusEngagementStates">
-                                <VisualState x:Name="FocusDisengaged" />
-
-                                <VisualState x:Name="FocusEngagedHorizontal">
-
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer"
-                                                                       Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="False" />
-                                        </ObjectAnimationUsingKeyFrames>
-
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
-                                                                       Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="True" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-
-                                <VisualState x:Name="FocusEngagedVertical">
-
-                                    <Storyboard>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer"
-                                                                       Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="False" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
-                                                                       Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-                                            <DiscreteObjectKeyFrame KeyTime="0"
-                                                                    Value="True" />
-                                        </ObjectAnimationUsingKeyFrames>
-                                    </Storyboard>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-
-                        <Grid.RowDefinitions>
-                            <RowDefinition Height="Auto" />
-                            <RowDefinition Height="*" />
-                        </Grid.RowDefinitions>
-
-                        <!-- SliderContainer -->
-                        <Grid x:Name="SliderContainer"
-                              Grid.Row="1"
-                              Background="Transparent"
-                              Control.IsTemplateFocusTarget="True">
-
-                            <!-- HorizontalTemplate -->
-                            <Grid x:Name="HorizontalTemplate"
-                                  MinHeight="32">
-
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="*" />
-                                </Grid.ColumnDefinitions>
-
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="15" />
-                                    <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="15" />
-                                </Grid.RowDefinitions>
-
-                                <!-- HorizontalTrackRect -->
-                                <Rectangle x:Name="HorizontalTrackRect"
-                                           Grid.Row="1"
-                                           Grid.ColumnSpan="3"
-                                           Height="2"
-                                           Fill="{TemplateBinding Background}"
-                                           RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                           RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-
-                                <!-- HorizontalDecreaseRect -->
-                                <Rectangle x:Name="HorizontalDecreaseRect"
-                                           Grid.Row="1"
-                                           Fill="{TemplateBinding Foreground}"
-                                           RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                           RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-
-                                <!-- TopTickBar -->
-                                <TickBar x:Name="TopTickBar"
-                                         Grid.ColumnSpan="3"
-                                         Height="4"
-                                         Margin="0,0,0,4"
-                                         VerticalAlignment="Bottom"
-                                         Fill="{ThemeResource SliderTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- HorizontalInlineTickBar -->
-                                <TickBar x:Name="HorizontalInlineTickBar"
-                                         Grid.Row="1"
-                                         Grid.ColumnSpan="3"
-                                         Height="2"
-                                         Fill="{ThemeResource SliderInlineTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- BottomTickBar -->
-                                <TickBar x:Name="BottomTickBar"
-                                         Grid.Row="2"
-                                         Grid.ColumnSpan="3"
-                                         Height="4"
-                                         Margin="0,4,0,0"
-                                         VerticalAlignment="Top"
-                                         Fill="{ThemeResource SliderTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- HorizontalThumb -->
-                                <Thumb x:Name="HorizontalThumb"
-                                       Grid.Row="0"
-                                       Grid.RowSpan="3"
-                                       Grid.Column="1"
-                                       Width="{ThemeResource SliderHorizontalThumbWidth}"
-                                       Height="{ThemeResource SliderHorizontalThumbHeight}"
-                                       AutomationProperties.AccessibilityView="Raw"
-                                       DataContext="{TemplateBinding Value}"
-                                       FocusVisualMargin="-14,-6,-14,-6"
-                                       Style="{StaticResource MaterialSliderThumbStyle}" />
-                            </Grid>
-
-                            <!-- VerticalTemplate -->
-                            <Grid x:Name="VerticalTemplate"
-                                  MinWidth="32"
-                                  Visibility="Collapsed">
-
-                                <Grid.RowDefinitions>
-                                    <RowDefinition Height="*" />
-                                    <RowDefinition Height="Auto" />
-                                    <RowDefinition Height="Auto" />
-                                </Grid.RowDefinitions>
-
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="15" />
-                                    <ColumnDefinition Width="Auto" />
-                                    <ColumnDefinition Width="15" />
-                                </Grid.ColumnDefinitions>
-
-                                <!-- VerticalTrackRect -->
-                                <Rectangle x:Name="VerticalTrackRect"
-                                           Grid.RowSpan="3"
-                                           Grid.Column="1"
-                                           Width="2"
-                                           Fill="{TemplateBinding Background}"
-                                           RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                           RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-
-                                <!-- VerticalDecreaseRect -->
-                                <Rectangle x:Name="VerticalDecreaseRect"
-                                           Grid.Row="2"
-                                           Grid.Column="1"
-                                           Fill="{TemplateBinding Foreground}"
-                                           RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
-                                           RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
-
-                                <!-- LeftTickBar -->
-                                <TickBar x:Name="LeftTickBar"
-                                         Grid.RowSpan="3"
-                                         Width="4"
-                                         Margin="0,0,4,0"
-                                         HorizontalAlignment="Right"
-                                         Fill="{ThemeResource SliderTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- VerticalInlineTickBar -->
-                                <TickBar x:Name="VerticalInlineTickBar"
-                                         Grid.RowSpan="3"
-                                         Grid.Column="1"
-                                         Width="2"
-                                         Fill="{ThemeResource SliderInlineTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- RightTickBar -->
-                                <TickBar x:Name="RightTickBar"
-                                         Grid.RowSpan="3"
-                                         Grid.Column="2"
-                                         Width="4"
-                                         Margin="4,0,0,0"
-                                         HorizontalAlignment="Left"
-                                         Fill="{ThemeResource SliderTickBarFill}"
-                                         Visibility="Collapsed" />
-
-                                <!-- VerticalThumb -->
-                                <Thumb x:Name="VerticalThumb"
-                                       Grid.Row="1"
-                                       Grid.Column="0"
-                                       Grid.ColumnSpan="3"
-                                       Width="{ThemeResource SliderVerticalThumbWidth}"
-                                       Height="{ThemeResource SliderVerticalThumbHeight}"
-                                       AutomationProperties.AccessibilityView="Raw"
-                                       DataContext="{TemplateBinding Value}"
-                                       FocusVisualMargin="-6,-14,-6,-14"
-                                       Style="{StaticResource MaterialSliderThumbStyle}" />
-                            </Grid>
-                        </Grid>
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+					xmlns:not_win="http://uno.ui/not_win"
+					mc:Ignorable="not_win">
+
+	<ResourceDictionary.ThemeDictionaries>
+		<!-- Light Theme -->
+		<ResourceDictionary x:Key="Light">
+
+			<Color x:Key="MaterialSliderThumbDisabledColor">#B8B4BC</Color>
+			<SolidColorBrush x:Key="MaterialSliderThumbDisabledBrush"
+							 Color="{ThemeResource MaterialSliderThumbDisabledColor}" />
+			<Thickness x:Key="SliderFocusVisualMargin">-7,0</Thickness>
+
+			<!-- Font resources -->
+			<StaticResource x:Key="SliderFontFamily" ResourceKey="MaterialRegularFontFamily" />
+			<StaticResource x:Key="SliderFontSize" ResourceKey="LabelMediumFontSize" />
+
+			<!-- Resources for the track -->
+			<StaticResource x:Key="SliderTrackFill" ResourceKey="SurfaceVariantBrush" />
+			<StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="OnSurfaceSelectedBrush" />
+			<StaticResource x:Key="SliderTrackValueFill" ResourceKey="PrimaryBrush" />
+			<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+			<CornerRadius x:Key="SliderHorizontalFillCornerRadius">4,0,0,4</CornerRadius>
+			<CornerRadius x:Key="SliderVerticalFillCornerRadius">0,0,4,4</CornerRadius>
+			<x:Double x:Key="SliderTrackThickness">4</x:Double>
+			<x:Double x:Key="SliderFillThickness">6</x:Double>
+
+			<!-- Resources for the Slider Ticks, For future uses. -->
+			<StaticResource x:Key="SliderTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
+			<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+			<StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
+			<x:Double x:Key="SliderTopTickBarHeight">4</x:Double>
+			<x:Double x:Key="SliderBottomTickBarHeight">4</x:Double>
+			<x:Double x:Key="SliderHorizontalInlineTickBarHeight">2</x:Double>
+			<x:Double x:Key="SliderLeftTickBarWidth">4</x:Double>
+			<x:Double x:Key="SliderRightTickBarWidth">4</x:Double>
+			<x:Double x:Key="SliderVerticallInlineTickBarWidth">2</x:Double>
+			<Thickness x:Key="SliderTopTickBarMargin">0,0,0,4</Thickness>
+			<Thickness x:Key="SliderBottomTickBarMargin">0,4,0,0</Thickness>
+			<Thickness x:Key="SliderLeftTickBarMargin">0,0,4,0</Thickness>
+			<Thickness x:Key="SliderRightTickBarMargin">4,0,0,0</Thickness>
+
+			<!-- Ressources for the SliderThumb -->
+			<StaticResource x:Key="SliderThumbBackground" ResourceKey="PrimaryBrush" />
+			<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="MaterialSliderThumbDisabledBrush" />
+			<x:Double x:Key="SliderThumbWidth">20</x:Double>
+			<x:Double x:Key="SliderThumbHeight">20</x:Double>
+			<x:Double x:Key="SliderThumbCornerRadius">10</x:Double>
+			<Thickness x:Key="SliderHorizontalFocusVisualMargin">-14,-6,-14,-6</Thickness>
+			<Thickness x:Key="SliderVerticalFocusVisualMargin">-6,-14,-6,-14</Thickness>
+			<StaticResource x:Key="SliderTrackCornerRadius" ResourceKey="ControlCornerRadius" />
+		</ResourceDictionary>
+
+		<!-- Dark Theme -->
+		<ResourceDictionary x:Key="Default">
+
+			<Color x:Key="MaterialSliderThumbDisabledColor">#685C64</Color>
+			<SolidColorBrush x:Key="MaterialSliderThumbDisabledBrush"
+							 Color="{ThemeResource MaterialSliderThumbDisabledColor}" />
+			<Thickness x:Key="SliderFocusVisualMargin">-7,0</Thickness>
+
+			<!-- Font resources -->
+			<StaticResource x:Key="SliderFontFamily" ResourceKey="MaterialRegularFontFamily" />
+			<StaticResource x:Key="SliderFontSize" ResourceKey="LabelMediumFontSize" />
+
+			<!-- Resources for the track -->
+			<StaticResource x:Key="SliderTrackFill" ResourceKey="SurfaceVariantBrush" />
+			<StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="OnSurfaceSelectedBrush" />
+			<StaticResource x:Key="SliderTrackValueFill" ResourceKey="PrimaryBrush" />
+			<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+			<CornerRadius x:Key="SliderHorizontalFillCornerRadius">4,0,0,4</CornerRadius>
+			<CornerRadius x:Key="SliderVerticalFillCornerRadius">0,0,4,4</CornerRadius>
+			<x:Double x:Key="SliderTrackThickness">4</x:Double>
+			<x:Double x:Key="SliderFillThickness">6</x:Double>
+
+			<!-- Resources for the Slider Ticks, For future uses. -->
+			<StaticResource x:Key="SliderTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
+			<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
+			<StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="OnSurfaceVariantBrush" />
+			<x:Double x:Key="SliderTopTickBarHeight">4</x:Double>
+			<x:Double x:Key="SliderBottomTickBarHeight">4</x:Double>
+			<x:Double x:Key="SliderHorizontalInlineTickBarHeight">2</x:Double>
+			<x:Double x:Key="SliderLeftTickBarWidth">4</x:Double>
+			<x:Double x:Key="SliderRightTickBarWidth">4</x:Double>
+			<x:Double x:Key="SliderVerticallInlineTickBarWidth">2</x:Double>
+			<Thickness x:Key="SliderTopTickBarMargin">0,0,0,4</Thickness>
+			<Thickness x:Key="SliderBottomTickBarMargin">0,4,0,0</Thickness>
+			<Thickness x:Key="SliderLeftTickBarMargin">0,0,4,0</Thickness>
+			<Thickness x:Key="SliderRightTickBarMargin">4,0,0,0</Thickness>
+
+			<!-- Resources for the SliderThumb -->
+			<StaticResource x:Key="SliderThumbBackground" ResourceKey="PrimaryBrush" />
+			<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="MaterialSliderThumbDisabledBrush" />
+			<x:Double x:Key="SliderThumbWidth">20</x:Double>
+			<x:Double x:Key="SliderThumbHeight">20</x:Double>
+			<x:Double x:Key="SliderThumbCornerRadius">10</x:Double>
+			<StaticResource x:Key="SliderTrackCornerRadius" ResourceKey="ControlCornerRadius" />
+			<Thickness x:Key="SliderHorizontalFocusVisualMargin">-14,-6,-14,-6</Thickness>
+			<Thickness x:Key="SliderVerticalFocusVisualMargin">-6,-14,-6,-14</Thickness>
+		</ResourceDictionary>
+	</ResourceDictionary.ThemeDictionaries>
+
+	<!-- Material Slider Thumb Style -->
+	<Style x:Key="MaterialSliderThumbStyle"
+		   TargetType="Thumb">
+
+		<Setter Property="Background" Value="{ThemeResource SliderThumbBackground}" />
+		<Setter Property="BorderThickness" Value="0" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="Thumb">
+					<Border Background="{TemplateBinding Background}"
+							BorderBrush="{TemplateBinding BorderBrush}"
+							BorderThickness="{TemplateBinding BorderThickness}"
+							CornerRadius="{ThemeResource SliderThumbCornerRadius}" />
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<!-- Material Slider Style -->
+	<Style x:Key="MaterialSliderStyle"
+		   TargetType="Slider">
+
+		<Setter Property="Background" Value="{ThemeResource SliderTrackFill}" />
+		<Setter Property="Foreground" Value="{ThemeResource SliderTrackValueFill}" />
+		<Setter Property="BorderThickness" Value="0" />
+		<Setter Property="FontFamily" Value="{ThemeResource SliderFontFamily}" />
+		<Setter Property="FontSize" Value="{ThemeResource SliderFontSize}" />
+		<Setter Property="ManipulationMode" Value="None" />
+		<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+		<Setter Property="FocusVisualMargin" Value="{ThemeResource SliderFocusVisualMargin}" />
+		<Setter Property="IsFocusEngagementEnabled" Value="True" />
+		<Setter Property="CornerRadius" Value="{ThemeResource SliderTrackCornerRadius}" />
+
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="Slider">
+
+					<Grid Margin="{TemplateBinding Padding}">
+
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="CommonStates">
+								<VisualState x:Name="Normal" />
+								<VisualState x:Name="Pressed" />
+
+								<VisualState x:Name="Disabled">
+									<VisualState.Setters>
+										<Setter Target="VerticalDecreaseRect.Fill" Value="{ThemeResource SliderTrackValueFillDisabled}" />
+										<Setter Target="HorizontalDecreaseRect.Fill" Value="{ThemeResource SliderTrackValueFillDisabled}" />
+										<Setter Target="VerticalTrackRect.Fill" Value="{ThemeResource SliderTrackFillDisabled}" />
+										<Setter Target="HorizontalTrackRect.Fill" Value="{ThemeResource SliderTrackFillDisabled}" />
+										<Setter Target="HorizontalThumb.Background" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
+										<Setter Target="VerticalThumb.Background" Value="{ThemeResource SliderThumbBackgroundDisabled}" />
+										<Setter Target="TopTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
+										<Setter Target="BottomTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
+										<Setter Target="LeftTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
+										<Setter Target="RightTickBar.Fill" Value="{ThemeResource SliderTickBarFillDisabled}" />
+									</VisualState.Setters>
+								</VisualState>
+
+								<VisualState x:Name="PointerOver" />
+
+							</VisualStateGroup>
+
+							<VisualStateGroup x:Name="FocusEngagementStates">
+								<VisualState x:Name="FocusDisengaged" />
+
+								<VisualState x:Name="FocusEngagedHorizontal">
+
+									<Storyboard>
+										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer"
+																	   Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
+											<DiscreteObjectKeyFrame KeyTime="0"
+																	Value="False" />
+										</ObjectAnimationUsingKeyFrames>
+
+										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb"
+																	   Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
+											<DiscreteObjectKeyFrame KeyTime="0"
+																	Value="True" />
+										</ObjectAnimationUsingKeyFrames>
+									</Storyboard>
+								</VisualState>
+
+								<VisualState x:Name="FocusEngagedVertical">
+
+									<Storyboard>
+										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer"
+																	   Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
+											<DiscreteObjectKeyFrame KeyTime="0"
+																	Value="False" />
+										</ObjectAnimationUsingKeyFrames>
+										<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb"
+																	   Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
+											<DiscreteObjectKeyFrame KeyTime="0"
+																	Value="True" />
+										</ObjectAnimationUsingKeyFrames>
+									</Storyboard>
+								</VisualState>
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
+
+						<Grid.RowDefinitions>
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="*" />
+						</Grid.RowDefinitions>
+
+						<!-- SliderContainer -->
+						<Grid x:Name="SliderContainer"
+							  Grid.Row="1"
+							  Background="Transparent"
+							  Control.IsTemplateFocusTarget="True">
+
+							<!-- HorizontalTemplate -->
+							<Grid x:Name="HorizontalTemplate"
+								  MinHeight="32">
+
+								<Grid.ColumnDefinitions>
+									<ColumnDefinition Width="Auto" />
+									<ColumnDefinition Width="Auto" />
+									<ColumnDefinition Width="*" />
+								</Grid.ColumnDefinitions>
+
+								<Grid.RowDefinitions>
+									<RowDefinition Height="15" />
+									<RowDefinition Height="Auto" />
+									<RowDefinition Height="15" />
+								</Grid.RowDefinitions>
+
+								<!-- HorizontalTrackRect -->
+								<Rectangle x:Name="HorizontalTrackRect"
+										   Grid.Row="1"
+										   Grid.ColumnSpan="3"
+										   Height="{ThemeResource SliderTrackThickness}"
+										   Fill="{TemplateBinding Background}"
+										   RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+										   RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
+								<!-- HorizontalDecreaseRect -->
+								<Border Grid.Row="1"
+										Height="{ThemeResource SliderFillThickness}"
+										CornerRadius="{ThemeResource SliderHorizontalFillCornerRadius}">
+									<Rectangle x:Name="HorizontalDecreaseRect"
+											   Fill="{TemplateBinding Foreground}" />
+								</Border>
+
+								<!-- TopTickBar -->
+								<TickBar x:Name="TopTickBar"
+										 Grid.ColumnSpan="3"
+										 Height="{ThemeResource SliderTopTickBarHeight}"
+										 Margin="{ThemeResource SliderTopTickBarMargin}"
+										 VerticalAlignment="Bottom"
+										 Fill="{ThemeResource SliderTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- HorizontalInlineTickBar -->
+								<TickBar x:Name="HorizontalInlineTickBar"
+										 Grid.Row="1"
+										 Grid.ColumnSpan="3"
+										 Height="{ThemeResource SliderHorizontalInlineTickBarHeight}"
+										 Fill="{ThemeResource SliderInlineTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- BottomTickBar -->
+								<TickBar x:Name="BottomTickBar"
+										 Grid.Row="2"
+										 Grid.ColumnSpan="3"
+										 Height="{ThemeResource SliderBottomTickBarHeight}"
+										 Margin="{ThemeResource SliderBottomTickBarMargin}"
+										 VerticalAlignment="Top"
+										 Fill="{ThemeResource SliderTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- HorizontalThumb -->
+								<Thumb x:Name="HorizontalThumb"
+									   Grid.Row="0"
+									   Grid.RowSpan="3"
+									   Grid.Column="1"
+									   Width="{ThemeResource SliderThumbWidth}"
+									   Height="{ThemeResource SliderThumbHeight}"
+									   AutomationProperties.AccessibilityView="Raw"
+									   DataContext="{TemplateBinding Value}"
+									   FocusVisualMargin="{ThemeResource SliderHorizontalFocusVisualMargin}"
+									   Style="{StaticResource MaterialSliderThumbStyle}" />
+							</Grid>
+
+							<!-- VerticalTemplate -->
+							<Grid x:Name="VerticalTemplate"
+								  MinWidth="32"
+								  Visibility="Collapsed">
+
+								<Grid.RowDefinitions>
+									<RowDefinition Height="*" />
+									<RowDefinition Height="Auto" />
+									<RowDefinition Height="Auto" />
+								</Grid.RowDefinitions>
+
+								<Grid.ColumnDefinitions>
+									<ColumnDefinition Width="15" />
+									<ColumnDefinition Width="Auto" />
+									<ColumnDefinition Width="15" />
+								</Grid.ColumnDefinitions>
+
+								<!-- VerticalTrackRect -->
+								<Rectangle x:Name="VerticalTrackRect"
+										   Width="{ThemeResource SliderTrackThickness}"
+										   Grid.RowSpan="3"
+										   Grid.Column="1"
+										   Fill="{TemplateBinding Background}"
+										   RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
+										   RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}" />
+
+								<!-- VerticalDecreaseRect -->
+								<Border Grid.Row="2"
+										Grid.Column="1"
+										CornerRadius="{ThemeResource SliderVerticalFillCornerRadius}">
+									<Rectangle x:Name="VerticalDecreaseRect"
+											   Width="{ThemeResource SliderFillThickness}"
+											   Fill="{TemplateBinding Foreground}" />
+								</Border>
+
+								<!-- LeftTickBar -->
+								<TickBar x:Name="LeftTickBar"
+										 Grid.RowSpan="3"
+										 Width="{ThemeResource SliderLeftTickBarWidth}"
+										 Margin="{ThemeResource SliderLeftTickBarMargin}"
+										 HorizontalAlignment="Right"
+										 Fill="{ThemeResource SliderTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- VerticalInlineTickBar -->
+								<TickBar x:Name="VerticalInlineTickBar"
+										 Grid.RowSpan="3"
+										 Grid.Column="1"
+										 Width="{ThemeResource SliderVerticallInlineTickBarWidth}"
+										 Fill="{ThemeResource SliderInlineTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- RightTickBar -->
+								<TickBar x:Name="RightTickBar"
+										 Grid.RowSpan="3"
+										 Grid.Column="2"
+										 Width="{ThemeResource SliderRightTickBarWidth}"
+										 Margin="{ThemeResource SliderRightTickBarMargin}"
+										 HorizontalAlignment="Left"
+										 Fill="{ThemeResource SliderTickBarFill}"
+										 Visibility="Collapsed" />
+
+								<!-- VerticalThumb -->
+								<Thumb x:Name="VerticalThumb"
+									   Grid.Row="1"
+									   Grid.Column="0"
+									   Grid.ColumnSpan="3"
+									   Width="{ThemeResource SliderThumbWidth}"
+									   Height="{ThemeResource SliderThumbHeight}"
+									   AutomationProperties.AccessibilityView="Raw"
+									   DataContext="{TemplateBinding Value}"
+									   FocusVisualMargin="{ThemeResource SliderVerticalFocusVisualMargin}"
+									   Style="{StaticResource MaterialSliderThumbStyle}" />
+							</Grid>
+						</Grid>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
 </ResourceDictionary>