Add keyboard focus visual indicator for slider v2 (#486)

Author: c3n9

Material.Styles/Resources/Themes/Slider.axaml

@@ -31,6 +31,10 @@
       </ControlTemplate>
     </Setter>
 
+    <Style Selector="^:focus-visible /template/ Border#PART_HoverEffect">
+      <Setter Property="Opacity" Value="0.20" />
+    </Style>
+
     <Style Selector="^ /template/ Panel#PART_RootPanel">
       <Setter Property="HorizontalAlignment" Value="Center" />
       <Setter Property="VerticalAlignment" Value="Center" />
@@ -120,14 +124,14 @@
                       Name="PART_Positioner">
                 <Border Name="PART_ContentContainer">
                   <!-- TODO: Fix positioner
-                      Seems like TransformedBounds property is gone, we need something else that
-                      can be refreshed at every frame and contains component position data -->
+                  Seems like TransformedBounds property is gone, we need something else that
+                  can be refreshed at every frame and contains component position data -->
                   <!--
                   <Border.RenderTransform>
-                    <MultiBinding Converter="{StaticResource AutoCorrectPositionConverter}">
-                      <Binding ElementName="PART_Positioner" Path="TransformedBounds" />
-                      <Binding Path="$parent[TopLevel].Bounds" />
-                    </MultiBinding>
+                  <MultiBinding Converter="{StaticResource AutoCorrectPositionConverter}">
+                  <Binding ElementName="PART_Positioner" Path="TransformedBounds" />
+                  <Binding Path="$parent[TopLevel].Bounds" />
+                  </MultiBinding>
                   </Border.RenderTransform>-->
 
                   <ContentPresenter Name="PART_ContentPresenter" />
@@ -292,6 +296,7 @@
   <ControlTheme x:Key="MaterialSlider" TargetType="Slider">
     <Setter Property="Background" Value="Transparent" />
     <Setter Property="BorderBrush" Value="Transparent" />
+    <Setter Property="Focusable" Value="False"/>
     <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryMidBrush}" />
     <Setter Property="ClipToBounds" Value="False" />
     <Setter Property="Template">
@@ -302,8 +307,8 @@
                 BorderThickness="{TemplateBinding BorderThickness}">
           <Panel Name="PART_RootPanel">
             <!-- I have no idea how to reorder tick bar in between track and thumb
-                             The tricky way might works by using ProgressBar as track (only visual, no hit test)
-                             and then make transparent the track (the interactable one). -->
+            The tricky way might works by using ProgressBar as track (only visual, no hit test)
+            and then make transparent the track (the interactable one). -->
             <ProgressBar Name="PART_ProgressLayer"
                          Minimum="{TemplateBinding Minimum}"
                          Maximum="{TemplateBinding Maximum}"
@@ -324,13 +329,16 @@
                    Minimum="{TemplateBinding Minimum}"
                    Value="{TemplateBinding Value}">
               <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}" />
+                <RepeatButton Name="PART_DecreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}"
+                              Focusable="False"/>
               </Track.DecreaseButton>
               <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}" />
+                <RepeatButton Name="PART_IncreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}"
+                              Focusable="False"/>
               </Track.IncreaseButton>
               <Track.Thumb>
-                <Thumb Name="PART_SliderThumb" />
+                <Thumb Name="PART_SliderThumb"
+                       Focusable="True"/>
               </Track.Thumb>
             </Track>
           </Panel>
@@ -420,7 +428,7 @@
       <Setter Property="ActiveBrush" Value="{DynamicResource MaterialCardBackgroundBrush}" />
     </Style>
   </ControlTheme>
-  
+
   <ControlTheme x:Key="{x:Type Slider}" TargetType="Slider"
                 BasedOn="{StaticResource MaterialSlider}" />
 
@@ -471,6 +479,10 @@
       </Setter>
     </Style>
 
+    <Style Selector="^:focus /template/ Ellipse#PART_HoverEffect">
+      <Setter Property="Opacity" Value="0.20" />
+    </Style>
+
     <Style Selector="^:pointerover /template/ Ellipse#PART_HoverEffect">
       <Setter Property="Opacity" Value="0.24" />
     </Style>
@@ -507,6 +519,7 @@
   <!-- Legacy slider theme (material v1, refer link: https://material.io/archive/guidelines/components/sliders.html) -->
   <ControlTheme x:Key="MaterialSliderV1"
                 TargetType="Slider">
+    <Setter Property="Focusable" Value="False"/>
     <Setter Property="Template">
       <ControlTemplate>
         <Border Name="PART_RootBorder"
@@ -521,13 +534,13 @@
                    Maximum="{TemplateBinding Maximum}"
                    Value="{TemplateBinding Value}">
               <Track.DecreaseButton>
-                <RepeatButton Name="PART_DecreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}" />
+                <RepeatButton Name="PART_DecreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}"/>
               </Track.DecreaseButton>
               <Track.IncreaseButton>
-                <RepeatButton Name="PART_IncreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}" />
+                <RepeatButton Name="PART_IncreaseButton" Theme="{StaticResource MaterialEmptyRepeatButton}"/>
               </Track.IncreaseButton>
               <Track.Thumb>
-                <Thumb Name="PART_SliderThumb" />
+                <Thumb Name="PART_SliderThumb"/>
               </Track.Thumb>
             </Track>
           </Panel>