Skip to content

Commit

Permalink
Color Picker slider updates (#4583)
Browse files Browse the repository at this point in the history 
* round the slider

* make slider and thumb look nice

* weird pressed state, update cr

* oops
  • Loading branch information
@leonMSFT
leonMSFT authored Mar 25, 2021
1 parent d67e625 commit 79294bb
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 13 deletions.
30 changes: 20 additions & 10 deletions dev/ColorPicker/ColorPicker.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,22 @@
<Grid Margin="0,5,0,0">
<Grid.Resources>
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Background" Value="{ThemeResource ColorPickerSliderThumbBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{ThemeResource SliderThumbCornerRadius}" />
<Border BorderBrush="{ThemeResource SliderThumbBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{ThemeResource SliderOuterThumbBackground}"
CornerRadius="{ThemeResource SliderThumbCornerRadius}">
<Ellipse
x:Name="SliderInnerThumb"
Fill="{TemplateBinding Background}"
Width="{ThemeResource ColorPickerSliderInnerThumbWidth}"
Height="{ThemeResource ColorPickerSliderInnerThumbHeight}">
</Ellipse>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
Expand Down Expand Up @@ -296,10 +306,10 @@
</Grid>
<Grid Margin="0,12,0,0" x:Name="ThirdDimensionSliderGrid">
<Rectangle Height="11" VerticalAlignment="Center"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
contract7Present:RadiusX="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
<Rectangle.Fill>
<LinearGradientBrush x:Name="ThirdDimensionSliderGradientBrush" />
</Rectangle.Fill>
Expand All @@ -317,10 +327,10 @@
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="AlphaSliderBackgroundRectangle" Height="11" VerticalAlignment="Center"
contract7Present:RadiusX="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ControlCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
contract7Present:RadiusX="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7Present:RadiusY="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusX="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, Converter={StaticResource TopLeftCornerRadiusDoubleValueConverter}}"
contract7NotPresent:RadiusY="{Binding Source={ThemeResource ColorPickerSliderCornerRadius}, Converter={StaticResource BottomRightCornerRadiusDoubleValueConverter}}">
<Rectangle.Fill>
<LinearGradientBrush x:Name="AlphaSliderGradientBrush" />
</Rectangle.Fill>
Expand Down
9 changes: 6 additions & 3 deletions dev/ColorPicker/ColorPicker_themeresources.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<ResourceDictionary x:Key="Default">
<StaticResource x:Key="ColorPickerSliderThumbBackground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPointerOver" ResourceKey="SystemControlHighlightChromeAltLowBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="SurfaceStrokeColorDefaultBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="ColorPickerSliderTrackFillDisabled" ResourceKey="AccentAAFillColorDisabledBrush" />
<StaticResource x:Key="ColorPickerHeaderContentDisabled" ResourceKey="TextFillColorDisabledBrush" />
Expand All @@ -16,7 +16,7 @@
<ResourceDictionary x:Key="Light">
<StaticResource x:Key="ColorPickerSliderThumbBackground" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPointerOver" ResourceKey="SystemControlHighlightChromeAltLowBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="SurfaceStrokeColorDefaultBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="TextFillColorPrimaryBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundDisabled" ResourceKey="ControlAAFillColorDisabledBrush" />
<StaticResource x:Key="ColorPickerSliderTrackFillDisabled" ResourceKey="AccentAAFillColorDisabledBrush" />
<StaticResource x:Key="ColorPickerHeaderContentDisabled" ResourceKey="TextFillColorDisabledBrush" />
Expand All @@ -25,13 +25,16 @@
<ResourceDictionary x:Key="HighContrast">
<StaticResource x:Key="ColorPickerSliderThumbBackground" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPointerOver" ResourceKey="SystemControlHighlightChromeAltLowBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="SystemControlForegroundChromeHighBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundPressed" ResourceKey="SystemControlForegroundBaseHighBrush" />
<StaticResource x:Key="ColorPickerSliderThumbBackgroundDisabled" ResourceKey="SystemControlDisabledChromeDisabledHighBrush" />
<StaticResource x:Key="ColorPickerSliderTrackFillDisabled" ResourceKey="SystemControlDisabledBaseLowBrush" />
<StaticResource x:Key="ColorPickerHeaderContentDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
<StaticResource x:Key="ColorPickerBorderBrush" ResourceKey="SystemControlForegroundListLowBrush" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<CornerRadius x:Key="ColorPickerSliderCornerRadius">5,5,5,5</CornerRadius>
<x:Double x:Key="ColorPickerSliderInnerThumbWidth">10</x:Double>
<x:Double x:Key="ColorPickerSliderInnerThumbHeight">10</x:Double>
<Style x:Key="ColorPickerBorderStyle" TargetType="Shape">
<Setter Property="Stroke" Value="{ThemeResource ColorPickerBorderBrush}" />
<Setter Property="StrokeThickness" Value="2" />
Expand Down

0 comments on commit 79294bb

Please sign in to comment.