tsai
/
Avalonia
mirror of https://github.com/AvaloniaUI/Avalonia.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fluent 2- fix slider animation

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
a4e533d1b2
commit
508826181b
1 changed files with 190 additions and 196 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 386
      src/Avalonia.Themes.Fluent2/Controls/Slider.xaml

386
src/Avalonia.Themes.Fluent2/Controls/Slider.xaml
View File

@ -35,11 +35,11 @@
</Design.PreviewWith>
<!-- WinUI reference: Slider_themeresources.xaml (DefaultSliderStyle), tag winui3/release/1.5.2.
Track is 4px tall with 2px rounded ends (NOTE: track thickness comes from the shared
SliderTrackThemeHeight key, which is still 2 in FluentControlResources.xaml and must be
updated to 4 there). The thumb is a 22px ControlSolidFillColorDefault circle with a 1px
CircleElevationBorderBrush ring containing an accent inner ellipse that is 12px at rest,
grows to 14px on thumb hover and shrinks to 10px while pressed/dragged (167ms). -->
Track is 4px tall with 2px rounded ends (NOTE: track thickness comes from the shared
SliderTrackThemeHeight key, which is still 2 in FluentControlResources.xaml and must be
updated to 4 there). The thumb is a 22px ControlSolidFillColorDefault circle with a 1px
CircleElevationBorderBrush ring containing an accent inner ellipse that is 12px at rest,
grows to 14px on thumb hover and shrinks to 10px while pressed/dragged (167ms). -->
<Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
<GridLength x:Key="SliderPreContentMargin">14</GridLength>
<GridLength x:Key="SliderPostContentMargin">14</GridLength>
@ -84,32 +84,28 @@
</Setter>
</ControlTheme>
<!-- WinUI SliderThumbStyle: outer circle is SliderOuterThumbBackground
(ControlSolidFillColorDefault) ringed by SliderThumbBorderBrush; the aliases are not in
the shared layer yet, so the token brushes are used. The Thumb's Background templates
into the inner accent ellipse, so all existing Slider-level state selectors that set
Thumb.Background keep recoloring the inner ellipse. -->
<ControlTheme x:Key="FluentSliderThumbTheme" TargetType="Thumb">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource CircleElevationBorderBrush}" />
<Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="Template">
<ControlTemplate>
<Border x:Name="ThumbBorder"
Background="{DynamicResource ControlSolidFillColorDefaultBrush}"
BackgroundSizing="InnerBorderEdge"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource SliderThumbCornerRadius}">
Background="{DynamicResource SliderOuterThumbBackground}"
BorderBrush="{DynamicResource SliderThumbBorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{DynamicResource SliderThumbCornerRadius}">
<Ellipse x:Name="SliderInnerThumb"
Fill="{TemplateBinding Background}"
Width="{DynamicResource SliderInnerThumbWidth}"
Height="{DynamicResource SliderInnerThumbHeight}"
HorizontalAlignment="Center"
RenderTransform="scale(0.86)"
VerticalAlignment="Center">
<Ellipse.Transitions>
<Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.167" Easing="0,0 0,1" />
<DoubleTransition Property="Height" Duration="0:0:0.167" Easing="0,0 0,1" />
<TransformOperationsTransition Property="RenderTransform"
Duration="{StaticResource ControlFastAnimationDuration}"
Easing="{StaticResource ControlFastOutSlowInKeySpline}"/>
</Transitions>
</Ellipse.Transitions>
</Ellipse>
@ -117,15 +113,12 @@
</ControlTemplate>
</Setter>
<!-- WinUI Thumb CommonStates: inner ellipse 12px at rest, 14px on hover, 10px pressed. -->
<Style Selector="^:pointerover /template/ Ellipse#SliderInnerThumb">
<Setter Property="Width" Value="14" />
<Setter Property="Height" Value="14" />
<Style Selector="^:pointerover /template/ Ellipse#SliderInnerThumb, ^:disabled /template/ Ellipse#SliderInnerThumb">
<Setter Property="RenderTransform" Value="scale(1.167)"/>
</Style>
<Style Selector="^:pressed /template/ Ellipse#SliderInnerThumb">
<Setter Property="Width" Value="10" />
<Setter Property="Height" Value="10" />
<Setter Property="RenderTransform" Value="scale(0.71)"/>
</Style>
</ControlTheme>
@ -133,97 +126,98 @@
<Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
<Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
<Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
<Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
<Style Selector="^:horizontal">
<Setter Property="Template">
<ControlTemplate>
<DataValidationErrors>
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer"
Margin="{TemplateBinding Padding}"
Background="{DynamicResource SliderContainerBackground}">
<Grid.Styles>
<Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style>
</Grid.Styles>
<Grid
x:Name="HorizontalTemplate"
MinHeight="{DynamicResource SliderHorizontalHeight}"
ColumnDefinitions="Auto,Auto,*">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
</Grid.RowDefinitions>
<TickBar
Name="TopTickBar"
Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,0,4"
VerticalAlignment="Bottom"
Placement="Top"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar
Name="BottomTickBar"
Grid.Row="2"
Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,4,0,0"
VerticalAlignment="Top"
Placement="Bottom"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}" />
<Track
Name="PART_Track"
Grid.Row="1"
Grid.ColumnSpan="3"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Horizontal">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Foreground}"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
Name="PART_IncreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Background}"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb
Name="thumb"
Width="{DynamicResource SliderHorizontalThumbWidth}"
Height="{DynamicResource SliderHorizontalThumbHeight}"
Margin="0"
Padding="0"
Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}"/>
</Track>
</Grid>
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer"
Margin="{TemplateBinding Padding}"
Background="{DynamicResource SliderContainerBackground}">
<Grid.Styles>
<Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style>
</Grid.Styles>
<Grid
x:Name="HorizontalTemplate"
MinHeight="{DynamicResource SliderHorizontalHeight}"
ColumnDefinitions="Auto,Auto,*">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
</Grid.RowDefinitions>
<TickBar
Name="TopTickBar"
Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,0,4"
VerticalAlignment="Bottom"
Placement="Top"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar
Name="BottomTickBar"
Grid.Row="2"
Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,4,0,0"
VerticalAlignment="Top"
Placement="Bottom"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}" />
<Track
Name="PART_Track"
Grid.Row="1"
Grid.ColumnSpan="3"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Horizontal">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Foreground}"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
Name="PART_IncreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Background}"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb
Name="thumb"
Width="{DynamicResource SliderHorizontalThumbWidth}"
Height="{DynamicResource SliderHorizontalThumbHeight}"
Margin="0"
Padding="0"
Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}"/>
</Track>
</Grid>
</Grid>
</Border>
</DataValidationErrors>
</ControlTemplate>
@ -234,94 +228,94 @@
<ControlTemplate>
<DataValidationErrors>
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer"
Grid.Row="1"
Background="{DynamicResource SliderContainerBackground}"
Margin="{TemplateBinding Padding}">
<Grid.Styles>
<Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style>
</Grid.Styles>
<Grid
x:Name="VerticalTemplate"
MinWidth="{DynamicResource SliderVerticalWidth}"
RowDefinitions="*,Auto,Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
</Grid.ColumnDefinitions>
<TickBar
Name="LeftTickBar"
Grid.RowSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,4,0"
HorizontalAlignment="Right"
Placement="Left"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar
Name="RightTickBar"
Grid.RowSpan="3"
Grid.Column="2"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="4,0,0,0"
HorizontalAlignment="Left"
Placement="Right"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<Track
Name="PART_Track"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Vertical">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Background="{TemplateBinding Foreground}"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
Name="PART_IncreaseButton"
Background="{TemplateBinding Background}"
Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb
Name="SliderThumb"
Width="{DynamicResource SliderVerticalThumbWidth}"
Height="{DynamicResource SliderVerticalThumbHeight}"
Margin="0"
Padding="0"
Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}" />
</Track>
</Grid>
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer"
Grid.Row="1"
Background="{DynamicResource SliderContainerBackground}"
Margin="{TemplateBinding Padding}">
<Grid.Styles>
<Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style>
</Grid.Styles>
<Grid
x:Name="VerticalTemplate"
MinWidth="{DynamicResource SliderVerticalWidth}"
RowDefinitions="*,Auto,Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
</Grid.ColumnDefinitions>
<TickBar
Name="LeftTickBar"
Grid.RowSpan="3"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,4,0"
HorizontalAlignment="Right"
Placement="Left"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar
Name="RightTickBar"
Grid.RowSpan="3"
Grid.Column="2"
Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="4,0,0,0"
HorizontalAlignment="Left"
Placement="Right"
IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/>
<Track
Name="PART_Track"
Grid.RowSpan="3"
Grid.Column="1"
Grid.ColumnSpan="1"
Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Vertical">
<Track.DecreaseButton>
<RepeatButton
Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Background="{TemplateBinding Foreground}"
Focusable="False"/>
</Track.DecreaseButton>
<Track.IncreaseButton>
<RepeatButton
Name="PART_IncreaseButton"
Background="{TemplateBinding Background}"
Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Focusable="False"/>
</Track.IncreaseButton>
<Thumb
Name="SliderThumb"
Width="{DynamicResource SliderVerticalThumbWidth}"
Height="{DynamicResource SliderVerticalThumbHeight}"
Margin="0"
Padding="0"
Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}" />
</Track>
</Grid>
</Grid>
</Border>
</DataValidationErrors>
</ControlTemplate>

Write Preview
Loading…
Cancel
Save