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
Unified 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> </Design.PreviewWith>
<!-- WinUI reference: Slider_themeresources.xaml (DefaultSliderStyle), tag winui3/release/1.5.2. <!-- 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 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 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 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, 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). --> grows to 14px on thumb hover and shrinks to 10px while pressed/dragged (167ms). -->
<Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness> <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
<GridLength x:Key="SliderPreContentMargin">14</GridLength> <GridLength x:Key="SliderPreContentMargin">14</GridLength>
<GridLength x:Key="SliderPostContentMargin">14</GridLength> <GridLength x:Key="SliderPostContentMargin">14</GridLength>
@ -84,32 +84,28 @@
</Setter> </Setter>
</ControlTheme> </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"> <ControlTheme x:Key="FluentSliderThumbTheme" TargetType="Thumb">
<Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{DynamicResource CircleElevationBorderBrush}" /> <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Border x:Name="ThumbBorder" <Border x:Name="ThumbBorder"
Background="{DynamicResource ControlSolidFillColorDefaultBrush}" Background="{DynamicResource SliderOuterThumbBackground}"
BackgroundSizing="InnerBorderEdge" BorderBrush="{DynamicResource SliderThumbBorderBrush}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}">
CornerRadius="{DynamicResource SliderThumbCornerRadius}">
<Ellipse x:Name="SliderInnerThumb" <Ellipse x:Name="SliderInnerThumb"
Fill="{TemplateBinding Background}" Fill="{TemplateBinding Background}"
Width="{DynamicResource SliderInnerThumbWidth}" Width="{DynamicResource SliderInnerThumbWidth}"
Height="{DynamicResource SliderInnerThumbHeight}" Height="{DynamicResource SliderInnerThumbHeight}"
HorizontalAlignment="Center" HorizontalAlignment="Center"
RenderTransform="scale(0.86)"
VerticalAlignment="Center"> VerticalAlignment="Center">
<Ellipse.Transitions> <Ellipse.Transitions>
<Transitions> <Transitions>
<DoubleTransition Property="Width" Duration="0:0:0.167" Easing="0,0 0,1" /> <TransformOperationsTransition Property="RenderTransform"
<DoubleTransition Property="Height" Duration="0:0:0.167" Easing="0,0 0,1" /> Duration="{StaticResource ControlFastAnimationDuration}"
Easing="{StaticResource ControlFastOutSlowInKeySpline}"/>
</Transitions> </Transitions>
</Ellipse.Transitions> </Ellipse.Transitions>
</Ellipse> </Ellipse>
@ -117,15 +113,12 @@
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<!-- WinUI Thumb CommonStates: inner ellipse 12px at rest, 14px on hover, 10px pressed. --> <Style Selector="^:pointerover /template/ Ellipse#SliderInnerThumb, ^:disabled /template/ Ellipse#SliderInnerThumb">
<Style Selector="^:pointerover /template/ Ellipse#SliderInnerThumb"> <Setter Property="RenderTransform" Value="scale(1.167)"/>
<Setter Property="Width" Value="14" />
<Setter Property="Height" Value="14" />
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#SliderInnerThumb"> <Style Selector="^:pressed /template/ Ellipse#SliderInnerThumb">
<Setter Property="Width" Value="10" /> <Setter Property="RenderTransform" Value="scale(0.71)"/>
<Setter Property="Height" Value="10" />
</Style> </Style>
</ControlTheme> </ControlTheme>
@ -133,97 +126,98 @@
<Setter Property="Background" Value="{DynamicResource SliderTrackFill}" /> <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
<Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" /> <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
<Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" /> <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
<Setter Property="BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
<Style Selector="^:horizontal"> <Style Selector="^:horizontal">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<DataValidationErrors> <DataValidationErrors>
<Border <Border
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer" <Grid x:Name="SliderContainer"
Margin="{TemplateBinding Padding}" Margin="{TemplateBinding Padding}"
Background="{DynamicResource SliderContainerBackground}"> Background="{DynamicResource SliderContainerBackground}">
<Grid.Styles> <Grid.Styles>
<Style Selector="TickBar"> <Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" /> <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style> </Style>
</Grid.Styles> </Grid.Styles>
<Grid <Grid
x:Name="HorizontalTemplate" x:Name="HorizontalTemplate"
MinHeight="{DynamicResource SliderHorizontalHeight}" MinHeight="{DynamicResource SliderHorizontalHeight}"
ColumnDefinitions="Auto,Auto,*"> ColumnDefinitions="Auto,Auto,*">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource SliderPreContentMargin}" /> <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource SliderPostContentMargin}" /> <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<TickBar <TickBar
Name="TopTickBar" Name="TopTickBar"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}" Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}" Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}" Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}" Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,0,4" Margin="0,0,0,4"
VerticalAlignment="Bottom" VerticalAlignment="Bottom"
Placement="Top" Placement="Top"
IsVisible="False" IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/> Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar <TickBar
Name="BottomTickBar" Name="BottomTickBar"
Grid.Row="2" Grid.Row="2"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Ticks="{TemplateBinding Ticks}" Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}" Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}" Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}" Maximum="{TemplateBinding Slider.Maximum}"
Height="{DynamicResource SliderOutsideTickBarThemeHeight}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,4,0,0" Margin="0,4,0,0"
VerticalAlignment="Top" VerticalAlignment="Top"
Placement="Bottom" Placement="Bottom"
IsVisible="False" IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}" /> Fill="{DynamicResource SliderTickBarFill}" />
<Track <Track
Name="PART_Track" Name="PART_Track"
Grid.Row="1" Grid.Row="1"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}" Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}" Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Horizontal"> Orientation="Horizontal">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_DecreaseButton" Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}" Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Foreground}" Background="{TemplateBinding Foreground}"
Focusable="False"/> Focusable="False"/>
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
Name="PART_IncreaseButton" Name="PART_IncreaseButton"
Theme="{StaticResource FluentSliderHorizontalRepeatButton}" Theme="{StaticResource FluentSliderHorizontalRepeatButton}"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Focusable="False"/> Focusable="False"/>
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb <Thumb
Name="thumb" Name="thumb"
Width="{DynamicResource SliderHorizontalThumbWidth}" Width="{DynamicResource SliderHorizontalThumbWidth}"
Height="{DynamicResource SliderHorizontalThumbHeight}" Height="{DynamicResource SliderHorizontalThumbHeight}"
Margin="0" Margin="0"
Padding="0" Padding="0"
Background="{DynamicResource SliderThumbBackground}" Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}" Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}"/> DataContext="{TemplateBinding Value}"/>
</Track> </Track>
</Grid>
</Grid> </Grid>
</Grid>
</Border> </Border>
</DataValidationErrors> </DataValidationErrors>
</ControlTemplate> </ControlTemplate>
@ -234,94 +228,94 @@
<ControlTemplate> <ControlTemplate>
<DataValidationErrors> <DataValidationErrors>
<Border <Border
BorderBrush="{TemplateBinding BorderBrush}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"> CornerRadius="{TemplateBinding CornerRadius}">
<Grid x:Name="SliderContainer" <Grid x:Name="SliderContainer"
Grid.Row="1" Grid.Row="1"
Background="{DynamicResource SliderContainerBackground}" Background="{DynamicResource SliderContainerBackground}"
Margin="{TemplateBinding Padding}"> Margin="{TemplateBinding Padding}">
<Grid.Styles> <Grid.Styles>
<Style Selector="TickBar"> <Style Selector="TickBar">
<Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" /> <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
</Style> </Style>
</Grid.Styles> </Grid.Styles>
<Grid <Grid
x:Name="VerticalTemplate" x:Name="VerticalTemplate"
MinWidth="{DynamicResource SliderVerticalWidth}" MinWidth="{DynamicResource SliderVerticalWidth}"
RowDefinitions="*,Auto,Auto"> RowDefinitions="*,Auto,Auto">
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" /> <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" /> <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<TickBar <TickBar
Name="LeftTickBar" Name="LeftTickBar"
Grid.RowSpan="3" Grid.RowSpan="3"
Ticks="{TemplateBinding Ticks}" Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}" Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}" Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}" Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="0,0,4,0" Margin="0,0,4,0"
HorizontalAlignment="Right" HorizontalAlignment="Right"
Placement="Left" Placement="Left"
IsVisible="False" IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/> Fill="{DynamicResource SliderTickBarFill}"/>
<TickBar <TickBar
Name="RightTickBar" Name="RightTickBar"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="2" Grid.Column="2"
Ticks="{TemplateBinding Ticks}" Ticks="{TemplateBinding Ticks}"
TickFrequency="{TemplateBinding Slider.TickFrequency}" TickFrequency="{TemplateBinding Slider.TickFrequency}"
Orientation="{TemplateBinding Slider.Orientation}" Orientation="{TemplateBinding Slider.Orientation}"
Minimum="{TemplateBinding Slider.Minimum}" Minimum="{TemplateBinding Slider.Minimum}"
Maximum="{TemplateBinding Slider.Maximum}" Maximum="{TemplateBinding Slider.Maximum}"
Width="{DynamicResource SliderOutsideTickBarThemeHeight}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
Margin="4,0,0,0" Margin="4,0,0,0"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Placement="Right" Placement="Right"
IsVisible="False" IsVisible="False"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Fill="{DynamicResource SliderTickBarFill}"/> Fill="{DynamicResource SliderTickBarFill}"/>
<Track <Track
Name="PART_Track" Name="PART_Track"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="1" Grid.Column="1"
Grid.ColumnSpan="1" Grid.ColumnSpan="1"
Minimum="{TemplateBinding Minimum}" Minimum="{TemplateBinding Minimum}"
Maximum="{TemplateBinding Maximum}" Maximum="{TemplateBinding Maximum}"
Value="{TemplateBinding Value, Mode=TwoWay}" Value="{TemplateBinding Value, Mode=TwoWay}"
IsDirectionReversed="{TemplateBinding IsDirectionReversed}" IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
Orientation="Vertical"> Orientation="Vertical">
<Track.DecreaseButton> <Track.DecreaseButton>
<RepeatButton <RepeatButton
Name="PART_DecreaseButton" Name="PART_DecreaseButton"
Theme="{StaticResource FluentSliderVerticalRepeatButton}" Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Background="{TemplateBinding Foreground}" Background="{TemplateBinding Foreground}"
Focusable="False"/> Focusable="False"/>
</Track.DecreaseButton> </Track.DecreaseButton>
<Track.IncreaseButton> <Track.IncreaseButton>
<RepeatButton <RepeatButton
Name="PART_IncreaseButton" Name="PART_IncreaseButton"
Background="{TemplateBinding Background}" Background="{TemplateBinding Background}"
Theme="{StaticResource FluentSliderVerticalRepeatButton}" Theme="{StaticResource FluentSliderVerticalRepeatButton}"
Focusable="False"/> Focusable="False"/>
</Track.IncreaseButton> </Track.IncreaseButton>
<Thumb <Thumb
Name="SliderThumb" Name="SliderThumb"
Width="{DynamicResource SliderVerticalThumbWidth}" Width="{DynamicResource SliderVerticalThumbWidth}"
Height="{DynamicResource SliderVerticalThumbHeight}" Height="{DynamicResource SliderVerticalThumbHeight}"
Margin="0" Margin="0"
Padding="0" Padding="0"
Background="{DynamicResource SliderThumbBackground}" Background="{DynamicResource SliderThumbBackground}"
Theme="{StaticResource FluentSliderThumbTheme}" Theme="{StaticResource FluentSliderThumbTheme}"
DataContext="{TemplateBinding Value}" /> DataContext="{TemplateBinding Value}" />
</Track> </Track>
</Grid>
</Grid> </Grid>
</Grid>
</Border> </Border>
</DataValidationErrors> </DataValidationErrors>
</ControlTemplate> </ControlTemplate>

Write Preview
Loading…
Cancel
Save