Skip to content

Commit

Permalink
Slider Visual Update (#3768)
Browse files Browse the repository at this point in the history 
* visual update

* re-add missing key

* add innerthumb size animation

* add colour transitions

* changes from comments

* colour transitions fix
  • Loading branch information
@karkarl
karkarl committed Jan 12, 2021
1 parent d5f0762 commit 6c2418b
Showing 1 changed file with 55 additions and 38 deletions.
93 changes: 55 additions & 38 deletions dev/Slider/Slider_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,30 @@
<Thickness x:Key="SliderBorderThemeThickness">0</Thickness>
<Thickness x:Key="SliderHeaderThemeMargin">0,0,0,4</Thickness>
<FontWeight x:Key="SliderHeaderThemeFontWeight">Normal</FontWeight>
<StaticResource x:Key="SliderContainerBackground" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="GhostFillColorTransparentBrush" />

<!-- ColorAnimation requires TargetProperty to be Color thus some resources point to the colour instead of brush-->
<StaticResource x:Key="SliderContainerBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="ControlFillColorTransparent" />
<StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="ControlFillColorTransparent" />
<StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="ControlFillColorTransparent" />
<StaticResource x:Key="SliderThumbBackground" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="AccentAAFillColorSecondaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="AccentAAFillColorTertiaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackFill" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackFillPressed" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="AccentAAFillColorSecondary" />
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="AccentAAFillColorTertiary" />
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="AccentAAFillColorDisabled" />
<StaticResource x:Key="SliderThumbBorderBrush" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="SliderOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFill" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillPressed" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackValueFill" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="AccentAAFillColorSecondaryBrush" />
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="AccentAAFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="AccentAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderHeaderForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="SliderTickBarFill" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="TextFillColorDisabled" />
<StaticResource x:Key="SliderTickBarFill" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="ControlAAFillColorDisabled" />
<StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="ControlFillColorInputActiveBrush" />

<!-- ColorAnimation requires TargetProperty to be Color thus some resources point to the colour instead of brush-->
Expand Down Expand Up @@ -143,26 +147,30 @@
<Thickness x:Key="SliderBorderThemeThickness">0</Thickness>
<Thickness x:Key="SliderHeaderThemeMargin">0,0,0,4</Thickness>
<FontWeight x:Key="SliderHeaderThemeFontWeight">Normal</FontWeight>
<StaticResource x:Key="SliderContainerBackground" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="GhostFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="GhostFillColorTransparentBrush" />

<!-- ColorAnimation requires TargetProperty to be Color thus some resources point to the colour instead of brush-->
<StaticResource x:Key="SliderContainerBackground" ResourceKey="ControlFillColorTransparentBrush" />
<StaticResource x:Key="SliderContainerBackgroundPointerOver" ResourceKey="ControlFillColorTransparent"/>
<StaticResource x:Key="SliderContainerBackgroundPressed" ResourceKey="ControlFillColorTransparent"/>
<StaticResource x:Key="SliderContainerBackgroundDisabled" ResourceKey="ControlFillColorTransparent"/>
<StaticResource x:Key="SliderThumbBackground" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="AccentAAFillColorSecondaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="AccentAAFillColorTertiaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackFill" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackFillPressed" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderThumbBackgroundPointerOver" ResourceKey="AccentAAFillColorSecondary"/>
<StaticResource x:Key="SliderThumbBackgroundPressed" ResourceKey="AccentAAFillColorTertiary"/>
<StaticResource x:Key="SliderThumbBackgroundDisabled" ResourceKey="AccentAAFillColorDisabled"/>
<StaticResource x:Key="SliderThumbBorderBrush" ResourceKey="ControlElevationBorderBrush" />
<StaticResource x:Key="SliderOuterThumbBackground" ResourceKey="ControlSolidFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFill" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillPointerOver" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillPressed" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackFillDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackValueFill" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="AccentAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderTrackValueFillPointerOver" ResourceKey="AccentAAFillColorSecondaryBrush" />
<StaticResource x:Key="SliderTrackValueFillPressed" ResourceKey="AccentAAFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTrackValueFillDisabled" ResourceKey="AccentAAFillColorDisabledBrush" />
<StaticResource x:Key="SliderHeaderForeground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="SliderTickBarFill" ResourceKey="ControlAltFillColorTertiaryBrush" />
<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="TextFillColorDisabledBrush" />
<StaticResource x:Key="SliderHeaderForegroundDisabled" ResourceKey="TextFillColorDisabled" />
<StaticResource x:Key="SliderTickBarFill" ResourceKey="ControlAAFillColorDefaultBrush" />
<StaticResource x:Key="SliderTickBarFillDisabled" ResourceKey="ControlAAFillColorDisabled" />
<StaticResource x:Key="SliderInlineTickBarFill" ResourceKey="ControlFillColorInputActiveBrush" />

<!-- ColorAnimation requires TargetProperty to be Color thus some resources point to the colour instead of brush-->
Expand Down Expand Up @@ -375,16 +383,25 @@
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalTrackRect" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalTrackRect" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPressed}" />
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackFillPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
<ColorAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="0:0:0.083" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="0:0:0.083" Value="{ThemeResource SliderThumbBackgroundPointerOver}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="0:0:0.083" Value="{ThemeResource SliderContainerBackgroundPointerOver}" />
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalDecreaseRect" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderThumbBackgroundPressed}" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalDecreaseRect" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SliderTrackValueFillPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="0:0:0.083" Value="{ThemeResource SliderContainerBackgroundPressed}" />
Expand Down

0 comments on commit 6c2418b

Please sign in to comment.