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

fluent 2 - fixup toggleswitch

pull/21771/head
Emmanuel Hansen 3 weeks ago
parent
508826181b
commit
451d899134
1 changed files with 70 additions and 64 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. 134
      src/Avalonia.Themes.Fluent2/Controls/ToggleSwitch.xaml

134
src/Avalonia.Themes.Fluent2/Controls/ToggleSwitch.xaml
View File

@ -1,7 +1,7 @@
<ResourceDictionary <ResourceDictionary
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:ClassModifier="internal"> x:ClassModifier="internal">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24"> <StackPanel Margin="20" Width="250" Spacing="24">
<StackPanel Spacing="12" > <StackPanel Spacing="12" >
@ -19,72 +19,77 @@
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,4</Thickness> <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,4</Thickness>
<GridLength x:Key="ToggleSwitchPreContentMargin">10</GridLength> <GridLength x:Key="ToggleSwitchPreContentMargin">10</GridLength>
<GridLength x:Key="ToggleSwitchPostContentMargin">10</GridLength> <GridLength x:Key="ToggleSwitchPostContentMargin">10</GridLength>
<x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
<x:Double x:Key="ToggleSwitchKnobSize">12</x:Double> <x:Double x:Key="ToggleSwitchKnobSize">12</x:Double>
<x:Double x:Key="ToggleSwitchKnobPointerOverSize">14</x:Double> <x:Double x:Key="ToggleSwitchKnobPointerOverSize">14</x:Double>
<x:Double x:Key="ToggleSwitchKnobPressedLength">17</x:Double> <x:Double x:Key="ToggleSwitchKnobPressedLength">17</x:Double>
<x:Double x:Key="ToggleSwitchKnobPressedSize">14</x:Double> <x:Double x:Key="ToggleSwitchKnobPressedSize">14</x:Double>
<!-- WinUI ControlFastOutSlowInKeySpline --> <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
<Easing x:Key="ToggleSwitchKnobEasing">0,0,0,1</Easing> <Easing x:Key="ToggleSwitchKnobEasing">0,0,0,1</Easing>
<!-- WinUI reference: ToggleSwitch_themeresources.xaml (DefaultToggleSwitchStyle), tag winui3/release/1.5.2. <!-- WinUI reference: ToggleSwitch_themeresources.xaml (DefaultToggleSwitchStyle), tag winui3/release/1.5.2.
Track is 40x20 with a 10px corner radius; off = 1px strong stroke over a subtle alt fill, Track is 40x20 with a 10px corner radius; off = 1px strong stroke over a subtle alt fill,
on = accent fill with zero stroke. The 12px knob grows to 14px on hover and stretches to a on = accent fill with zero stroke. The 12px knob grows to 14px on hover and stretches to a
17x14 pill anchored to the near track edge while pressed; knob size and slide changes use a 17x14 pill anchored to the near track edge while pressed; knob size and slide changes use a
167ms fast-out-slow-in spline. --> 167ms fast-out-slow-in spline. -->
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch"> <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" /> <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" /> <Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
<Setter Property="KnobTransitions"> <Setter Property="KnobTransitions">
<Transitions> <Transitions>
<DoubleTransition <DoubleTransition
Easing="{StaticResource ToggleSwitchKnobEasing}" Easing="{StaticResource ToggleSwitchKnobEasing}"
Property="Canvas.Left" Property="Canvas.Left"
Duration="{StaticResource ControlFastAnimationDuration}" /> Duration="{StaticResource ControlFastAnimationDuration}" />
</Transitions> </Transitions>
</Setter> </Setter>
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*"> <Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
<ContentPresenter BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<Grid RowDefinitions="Auto,*">
<ContentPresenter
x:Name="PART_ContentPresenter" x:Name="PART_ContentPresenter"
Grid.Row="0" Grid.Row="0"
IsHitTestVisible="False"
VerticalAlignment="Top" VerticalAlignment="Top"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}" /> Margin="{DynamicResource ToggleSwitchTopHeaderMargin}" />
<Grid <Grid
Grid.Row="1" Grid.Row="1"
MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}" MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Top"> VerticalAlignment="Top">
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" /> <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" /> <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
</Grid.RowDefinitions> </Grid.RowDefinitions>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="12" MaxWidth="12" /> <ColumnDefinition Width="12" MaxWidth="12" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<Grid <Border
x:Name="SwitchAreaGrid" x:Name="SwitchAreaBorder"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.ColumnSpan="3" Grid.ColumnSpan="3"
Background="{DynamicResource ToggleSwitchContainerBackground}" Background="{DynamicResource ToggleSwitchContainerBackground}"
CornerRadius="{TemplateBinding CornerRadius}"
Margin="0,5" Margin="0,5"
TemplatedControl.IsTemplateFocusTarget="True" /> TemplatedControl.IsTemplateFocusTarget="True" />
<ContentPresenter <ContentPresenter
x:Name="PART_OffContentPresenter" x:Name="PART_OffContentPresenter"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="2" Grid.Column="2"
@ -93,7 +98,7 @@
Content="{TemplateBinding OffContent}" Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" /> ContentTemplate="{TemplateBinding OffContentTemplate}" />
<ContentPresenter <ContentPresenter
x:Name="PART_OnContentPresenter" x:Name="PART_OnContentPresenter"
Grid.RowSpan="3" Grid.RowSpan="3"
Grid.Column="2" Grid.Column="2"
@ -102,7 +107,7 @@
Content="{TemplateBinding OnContent}" Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" /> ContentTemplate="{TemplateBinding OnContentTemplate}" />
<Border <Border
x:Name="OuterBorder" x:Name="OuterBorder"
Grid.Row="1" Grid.Row="1"
Width="40" Width="40"
@ -112,7 +117,7 @@
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}"
CornerRadius="10" /> CornerRadius="10" />
<Border <Border
x:Name="SwitchKnobBounds" x:Name="SwitchKnobBounds"
Grid.Row="1" Grid.Row="1"
Width="40" Width="40"
@ -122,42 +127,43 @@
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}" BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
CornerRadius="10" /> CornerRadius="10" />
<Canvas <Canvas
x:Name="PART_SwitchKnob" x:Name="PART_SwitchKnob"
Grid.Row="1" Grid.Row="1"
Width="20" Width="20"
Height="20" Height="20"
HorizontalAlignment="Left"> HorizontalAlignment="Left">
<Grid x:Name="PART_MovingKnobs" Width="20" Height="20"> <Grid x:Name="PART_MovingKnobs" Width="20" Height="20">
<Ellipse <Ellipse
x:Name="SwitchKnobOn" x:Name="SwitchKnobOn"
Fill="{DynamicResource ToggleSwitchKnobFillOn}" Fill="{DynamicResource ToggleSwitchKnobFillOn}"
Width="{DynamicResource ToggleSwitchKnobSize}" Width="{DynamicResource ToggleSwitchKnobSize}"
Height="{DynamicResource ToggleSwitchKnobSize}"> Height="{DynamicResource ToggleSwitchKnobSize}">
<Ellipse.Transitions> <Ellipse.Transitions>
<Transitions> <Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" /> <DoubleTransition Property="Width" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" />
<DoubleTransition Property="Height" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" /> <DoubleTransition Property="Height" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" />
</Transitions> </Transitions>
</Ellipse.Transitions> </Ellipse.Transitions>
</Ellipse> </Ellipse>
<Ellipse <Ellipse
x:Name="SwitchKnobOff" x:Name="SwitchKnobOff"
Fill="{DynamicResource ToggleSwitchKnobFillOff}" Fill="{DynamicResource ToggleSwitchKnobFillOff}"
Width="{DynamicResource ToggleSwitchKnobSize}" Width="{DynamicResource ToggleSwitchKnobSize}"
Height="{DynamicResource ToggleSwitchKnobSize}"> Height="{DynamicResource ToggleSwitchKnobSize}">
<Ellipse.Transitions> <Ellipse.Transitions>
<Transitions> <Transitions>
<DoubleTransition Property="Width" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" /> <DoubleTransition Property="Width" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" />
<DoubleTransition Property="Height" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" /> <DoubleTransition Property="Height" Duration="{StaticResource ControlFastAnimationDuration}" Easing="{StaticResource ToggleSwitchKnobEasing}" />
</Transitions> </Transitions>
</Ellipse.Transitions> </Ellipse.Transitions>
</Ellipse> </Ellipse>
</Grid> </Grid>
</Canvas> </Canvas>
</Grid>
</Grid> </Grid>
</Grid> </Border>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
@ -208,7 +214,7 @@
</Style> </Style>
<!-- While held, the knob stretches into a 17x14 pill anchored to the near edge of the <!-- While held, the knob stretches into a 17x14 pill anchored to the near edge of the
track (WinUI Pressed state setters). Each knob is only visible in its own state. --> track (WinUI Pressed state setters). Each knob is only visible in its own state. -->
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff"> <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" /> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
<Setter Property="Width" Value="{DynamicResource ToggleSwitchKnobPressedLength}" /> <Setter Property="Width" Value="{DynamicResource ToggleSwitchKnobPressedLength}" />

Write Preview
Loading…
Cancel
Save