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

make fluent and default templates match.

pull/4069/head
Dan Walmsley 6 years ago
parent
bfdb55f819
commit
960780e670
1 changed files with 212 additions and 192 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. 404
      src/Avalonia.Themes.Default/ToggleSwitch.xaml

404
src/Avalonia.Themes.Default/ToggleSwitch.xaml
View File

@ -1,21 +1,28 @@
<!--Version wo 10-6-2020 17:30 -->
<Styles xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard">
<Styles.Resources>
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<x:Double x:Key="ToggleSwitchPreContentMargin">6</x:Double>
<x:Double x:Key="ToggleSwitchPostContentMargin">6</x:Double>
<x:Double x:Key="ToggleSwitchThemeMinWidth">154</x:Double>
<x:Double x:Key="KnobOnPosition">20</x:Double>
<x:Double x:Key="KnobOffPosition">0</x:Double>
</Styles.Resources>
<Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24">
<StackPanel Spacing="12">
<StackPanel Margin="20" Width="250" Spacing="24" >
<StackPanel Spacing="12" >
<TextBlock
Text="Automatic updates"
Classes="h1"/>
<TextBlock
Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting"
TextWrapping="Wrap"/>
<ToggleSwitch Content="Enable automatic Updates?"
FontWeight="Medium"
VerticalAlignment="Bottom" />
<ToggleSwitch HorizontalContentAlignment="Left"
Content="Enable automatic Updates?"
OffContent="Uit"
OnContent="Aan"
VerticalAlignment="Bottom"/>
</StackPanel>
<StackPanel Spacing="12">
@ -27,247 +34,260 @@
TextWrapping="Wrap"/>
<ToggleSwitch
Content="Previewer"
IsChecked="True"
FontWeight="Medium"/>
IsChecked="True" />
</StackPanel>
</StackPanel>
</Design.PreviewWith>
<Style Selector=":is(ToggleSwitch)">
<Style Selector="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
<Setter Property="MinWidth" Value="72"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Template">
<ControlTemplate>
<Grid
ColumnDefinitions="Auto,*"
RowDefinitions="22,auto">
<Grid Background="{TemplateBinding Background}"
RowDefinitions="Auto,*">
<ContentPresenter x:Name="PART_ContentPresenter"
Grid.Row="0"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
VerticalAlignment="Top"/>
<Grid Grid.Row="1"
MinWidth="{StaticResource ToggleSwitchThemeMinWidth}"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="12" MaxWidth="12" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid x:Name="SwitchAreaGrid"
Grid.RowSpan="3"
Grid.ColumnSpan="3"
Margin="0,5" />
<ContentPresenter x:Name="PART_OffContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Canvas
Height="24"
Grid.Row="1"
Grid.Column="0">
<Border
Name="PART_BorderBackground"
Height="20" Width="44"
Canvas.Top="2"
Canvas.Left="0"
BorderThickness="1.5"
CornerRadius="100"/>
<Ellipse
Name="PART_CircleThumb"
Height="10" Width="10"
Canvas.Top="7"/>
<ContentControl
Name="PART_TextBooleanValue"
Canvas.Left="54"
VerticalContentAlignment="Bottom"
Height="20"/>
</Canvas>
<ContentPresenter
Name="PART_ContentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
<ContentPresenter x:Name="PART_OnContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Background="Transparent"
IsVisible="{TemplateBinding Content, Converter={x:Static ObjectConverters.IsNotNull}}"
Grid.Row="0" Grid.Column="0"/>
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="OuterBorder"
Grid.Row="1"
Height="20"
Width="40"
CornerRadius="10"
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
<Border x:Name="SwitchKnobBounds"
Grid.Row="1"
Height="20"
Width="40"
CornerRadius="10"
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"/>
<Canvas x:Name="SwitchKnob" Grid.Row="1"
HorizontalAlignment="Left"
Width="20" Height="20">
<Grid x:Name="MovingKnobs"
Width="20" Height="20">
<Ellipse x:Name="SwitchKnobOn"
Width="10" Height="10" />
<Ellipse x:Name="SwitchKnobOff"
Width="10" Height="10" />
</Grid>
</Canvas>
</Grid>
</Grid>
</ControlTemplate>
</Setter>
</Style>
<!-- NormalState -->
<Style Selector="ToggleSwitch /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}"/>
</Style>
<!--Position Transition Thump-->
<Style Selector="ToggleSwitch /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
<Setter Property="Fill" Value="White" />
<Style Selector="ToggleSwitch /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}"/>
<Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOn}"/>
</Style>
<Style Selector="ToggleSwitch /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}"/>
<Setter Property="Stroke" Value="{DynamicResource ToggleSwitchKnobStrokeOff}"/>
</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.4" Easing="CubicEaseOut"/>
<DoubleTransition Property="Canvas.Left" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>
<!--Color thumbAnimation Off-->
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbLeft}"/>
<!--psition animation is handled by transition-->
<Style.Animations>
<Animation Duration="0:0:0.35" FillMode="Forward" Easing="CubicEaseOut" >
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="White"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="Royalblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!--color thumbAnimation Onn-->
<Style Selector="ToggleSwitch:checked /template/ Ellipse#PART_CircleThumb">
<Setter Property="Canvas.Left" Value="{DynamicResource ThumbRight}"/>
<!--psition animation is handled by transition-->
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Fill" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Fill" Value="White"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>
<!--color BackGround Animation Off-->
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}"/>
<!-- PointerOverState -->
<Style Selector="ToggleSwitch:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.5" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="White"/>
</KeyFrame>
</Animation>
</Style.Animations>
<!--<Setter Property="BorderBrush" Value="Royalblue"/>-->
<Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}"/>
</Style>
<!--color BackGrounf Animation On-->
<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.4" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="0%">
<Setter Property="Background" Value="white"/>
</KeyFrame>
<KeyFrame Cue="100%">
<Setter Property="Background" Value="Royalblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
<!--<Setter Property="BorderBrush" Value="Royalblue"/>-->
<Style Selector="ToggleSwitch:pointerover /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}"/>
</Style>
<Style Selector="ToggleSwitch:pointerover /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
</Style>
<!--<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground">
<Setter Property="Opacity" Value="100" />
<Setter Property="Transitions">
<Transitions>
<DoubleTransition Property="Opacity" Duration="0:0:0.2" Easing="CubicEaseOut"/>
</Transitions>
</Setter>
</Style>-->
<Style Selector="ToggleSwitch:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}"/>
</Style>
<!--Setting the On/Of Text. This might be changed in the near future -->
<Style Selector="ToggleSwitch:checked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="On"/>
<!-- PressedState -->
<Style Selector="ToggleSwitch:pressed /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Off"/>
<Style Selector="ToggleSwitch:pressed /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}"/>
</Style>
<!--border BackGround MouseOver-->
<Style Selector="ToggleSwitch /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="cornflowerblue"/>
<Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}"/>
</Style>
<!--BackGround Mouseover and checked-->
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="Opacity" Value="50"/>
</Style>-->
<Style Selector="ToggleSwitch:pressed /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}"/>
</Style>
<!--Border -BackGround Focus and checkred-->
<Style Selector="ToggleSwitch:focus:checked /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}"/>
<Style Selector="ToggleSwitch:pressed /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}"/>
</Style>
<!--Border -BackGround Focus and uncheckred-->
<Style Selector="ToggleSwitch:focus:unchecked /template/ Border#PART_BorderBackground">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchFillOn}"/>
<!-- DisabledState -->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}"/>
</Style>
<Style Selector="ToggleSwitch:disabled /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}"/>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}"/>
</Style>
<!--BackGround Focus + Mouseover-->
<Style Selector="ToggleSwitch:focus /template/ Border#PART_BorderBackground:pointerover">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}"/>
<Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}"/>
</Style>
<!--Control disabled-->
<Style Selector="ToggleSwitch:disabled">
<Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}"/>
<Style Selector="ToggleSwitch:disabled /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}"/>
</Style>
<Style Selector="ToggleSwitch:disabled /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}"/>
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}"/>
</Style>
<!--****** PRESSED ******-->
<!--Because of a bug in color animation flikkering apears -->
<!--Implement later-->
<!-- CheckedState -->
<Style Selector="ToggleSwitch:checked /template/ Grid#MovingKnobs">
<Setter Property="Canvas.Left" Value="{DynamicResource KnobOnPosition}"/>
</Style>
<!--<Style Selector="ToggleSwitch:pressed /template/ Border#PART_BorderBackground">
<Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="100%">
<Setter Property="Background" Value="Gray"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>-->
<Style Selector="ToggleSwitch:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="0"/>
</Style>
<!--****** iNDETERMINATE ******-->
<!--What should i do here?-->
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="0"/>
</Style>
<!--<Style Selector="ToggleSwitch:indeterminate /template/ ContentControl#PART_TextBooleanValue">
<Setter Property="Content" Value="Not set"/>
</Style>-->
<Style Selector="ToggleSwitch:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="ToggleSwitch:indeterminate /template/ Border#PART_BorderBackground">
<Setter Property="Background" Value="White"/>
<Style Selector="ToggleSwitch:checked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="0"/>
</Style>
<!--******** Mouse over of checked state *********-->
<!--Because of a bug in color animation flikkering apears -->
<!--Implement later-->
<Style Selector="ToggleSwitch:checked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="1"/>
</Style>
<!--<Style Selector="ToggleSwitch:checked /template/ Border#PART_BorderBackground:pointerover">
<Style.Animations>
<Animation Duration="0:0:0.1" FillMode="Forward" Easing="CubicEaseOut">
<KeyFrame Cue="100%">
<Setter Property="Background" Value="cornflowerblue"/>
</KeyFrame>
</Animation>
</Style.Animations>
</Style>-->
<!--UncheckedState -->
<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"/>
</Style>
<Styles.Resources>
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1"/>
</Style>
<sys:Double x:Key="ThumbLeft">5</sys:Double>
<sys:Double x:Key="ThumbRight">28</sys:Double>
<Color x:Key="ColorFILLOn">RoyalBlue</Color>
<!--Animating a color via a resource does not work!-->
<Color x:Key="ColorFILLOff">White</Color>
<!-- "" -->
<Style Selector="ToggleSwitch:unchecked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="0"/>
</Style>
</Styles.Resources>
<Style Selector="ToggleSwitch:unchecked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="0"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="1"/>
</Style>
<Style Selector="ToggleSwitch:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="0"/>
</Style>
</Styles>

Write Preview
Loading…
Cancel
Save