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

Fix animation

pull/4069/head
JamRemco 6 years ago
parent
19eac7224a
commit
551ea7711b
1 changed files with 86 additions and 65 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. 151
      src/Avalonia.Themes.Fluent/ToggleSwitch.xaml

151
src/Avalonia.Themes.Fluent/ToggleSwitch.xaml
View File

@ -111,23 +111,30 @@
CornerRadius="10" CornerRadius="10"
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/> BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
<Grid x:Name="SwitchKnob" <Canvas x:Name="SwitchKnob"
Grid.Row="1" Grid.Row="1"
HorizontalAlignment="Left" HorizontalAlignment="Left"
Width="20" Width="20"
Height="20"> Height="20">
<Grid x:Name="MovingKnobs"
Width="20"
Height="20" >
<Ellipse x:Name="SwitchKnobOn"
Width="10"
Height="10"/>
<Ellipse x:Name="SwitchKnobOn" <Ellipse x:Name="SwitchKnobOff"
Width="10" Width="10"
Height="10"/> Height="10" />
<Ellipse x:Name="SwitchKnobOff" <!--<Grid.RenderTransform>
Width="10" <TranslateTransform x:Name="KnobTranslateTransform" />
Height="10" /> </Grid.RenderTransform>-->
<Grid.RenderTransform> </Grid>
<!--<TranslateTransform x:Name="KnobTranslateTransform" />--> </Canvas>
</Grid.RenderTransform>
</Grid>
<!--<Thumb x:Name="SwitchThumb" <!--<Thumb x:Name="SwitchThumb"
Grid.RowSpan="3" Grid.RowSpan="3"
@ -147,6 +154,7 @@
<!--*********** Normal ********--> <!--*********** Normal ********-->
<!-- Initial values If hardcode values in template they'll become Imutable --> <!-- Initial values If hardcode values in template they'll become Imutable -->
<Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid"> <Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
</Style> </Style>
@ -170,32 +178,39 @@
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
<Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOff}"/> <Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOff}"/>
</Style> </Style>
<Style Selector="ToggleSwitch /template/ Grid#MovingKnobs">
<Setter Property="Canvas.Left" Value="{DynamicResource KnobOffPosition}"/>
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<!--******** POINTEROVER *******--> <!--******** POINTEROVER *******-->
<Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder"> <Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/> </Style>
</Style>
<Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn"> <Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds"> <Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/> </Style>
</Style>
<Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid"> <Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
</Style> </Style>
<!--******** PRESSED *******--> <!--******** PRESSED *******-->
@ -243,49 +258,51 @@
<Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds"> <Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
</Style> </Style>
<Style Selector="ToggleSwitch:disabled /template/ Grid#SwitchAreaGrid"> <!--<Style Selector="ToggleSwitch:disabled /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource BackgroundDisabled}"/> <Setter Property="Background" Value="20"/>
</Style> </Style>-->
<!--******** CHECKED *******--> <!--******** CHECKED *******-->
<Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="0"/> <Style Selector="ToggleSwitch:checked /template/ Grid#MovingKnobs">
</Style> <Setter Property="Canvas.Left" Value="{DynamicResource KnobOnPosition}"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="0"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0"/>
<!--<Setter Property="IsHitTestVisible" Value="false"/>--> </Style>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Border#SwitchKnobBounds"> <Style Selector="ToggleSwitch:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
<!--<Setter Property="IsHitTestVisible" Value="false"/>--> </Style>
</Style>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn"> <Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
<!--<Setter Property="IsHitTestVisible" Value="true"/>--> </Style>
</Style>
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter"> <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0"/>
<!--<Setter Property="IsHitTestVisible" Value="false"/>--> </Style>
</Style>
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter"> <Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
<!--<Setter Property="IsHitTestVisible" Value="true"/>--> </Style>
</Style>
<!--******** UNCHECKED *******--> <!--******** UNCHECKED *******-->
<Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder"> <Style Selector="ToggleSwitch:unchecked /template/ Grid#MovingKnobs">
<Setter Property="Canvas.Left" Value="{DynamicResource KnobOffPosition}"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1"/> <Setter Property="Opacity" Value="1"/>
</Style> </Style>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff"> <Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
@ -307,15 +324,19 @@
<Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter"> <Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="0"/> <Setter Property="Opacity" Value="0"/>
</Style> </Style>
<!--<Style Selector="ToggleSwitch:checked /template/Grid#MovingKnobs">
<Setter Property="Canvas.Left" Value="{StaticResource KnobOffPosition}"/>
</Style>-->
<Styles.Resources> <Styles.Resources>
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness> <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<x:Double x:Key="ToggleSwitchPreContentMargin">6</x:Double> <x:Double x:Key="ToggleSwitchPreContentMargin">6</x:Double>
<x:Double x:Key="ToggleSwitchPostContentMargin">6</x:Double> <x:Double x:Key="ToggleSwitchPostContentMargin">6</x:Double>
<x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double> <x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
<x:Double x:Key="KnobOnPosition">5</x:Double> <x:Double x:Key="KnobOnPosition">20</x:Double>
<x:Double x:Key="KnobOffPosition">28</x:Double> <x:Double x:Key="KnobOffPosition">0</x:Double>
</Styles.Resources> </Styles.Resources>

Write Preview
Loading…
Cancel
Save