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

Tweaked ToggleSwitch ControlTheme.

pull/8479/head
Steven Kirk 4 years ago
parent
c27f5e798e
commit
9e0e15fedf
1 changed files with 262 additions and 301 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. 563
      src/Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml

563
src/Avalonia.Themes.Fluent/Controls/ToggleSwitch.xaml
View File

@ -2,306 +2,267 @@
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard">
<Design.PreviewWith>
<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 HorizontalContentAlignment="Left"
Content="Enable automatic Updates?"
OffContent="Uit"
OnContent="Aan"
VerticalAlignment="Bottom"/>
</StackPanel>
<StackPanel Spacing="12">
<TextBlock
Text="Previewer"
Classes="h1"/>
<TextBlock
Text="The previewer Shows a preview off your code, this could slow down your system"
TextWrapping="Wrap"/>
<ToggleSwitch
Background="Green"
IsChecked="True" />
</StackPanel>
<Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24">
<StackPanel Spacing="12" >
<ToggleSwitch/>
<ToggleSwitch IsChecked="True" />
<ToggleSwitch HorizontalContentAlignment="Left"
Content="Header"
OffContent="Off"
OnContent="On"/>
<ToggleSwitch Background="Yellow"/>
</StackPanel>
</Design.PreviewWith>
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
<GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
<x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<ControlTemplate>
<Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*">
<ContentPresenter
x:Name="PART_ContentPresenter"
Grid.Row="0"
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True" />
<Grid
Grid.Row="1"
MinWidth="{DynamicResource 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"
TemplatedControl.IsTemplateFocusTarget="True" />
<ContentPresenter
x:Name="PART_OffContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
<ContentPresenter
x:Name="PART_OnContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<Border
x:Name="OuterBorder"
Grid.Row="1"
Width="40"
Height="20"
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}"
CornerRadius="10" />
<Border
x:Name="SwitchKnobBounds"
Grid.Row="1"
Width="40"
Height="20"
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
CornerRadius="10" />
<Canvas
x:Name="SwitchKnob"
Grid.Row="1"
Width="20"
Height="20"
HorizontalAlignment="Left">
<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 Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchTopHeaderMargin}" />
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
<Setter Property="Margin" Value="0" />
</Style>
<!-- NormalState -->
<Style Selector="^ /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}" />
</Style>
<Style Selector="^ /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}" />
</Style>
<Style Selector="^ /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}" />
</Style>
<Style Selector="^ /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}" />
</Style>
<Style Selector="^ /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}" />
</Style>
<Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="CubicEaseOut"
Property="Canvas.Left"
Duration="0:0:0.2" />
</Transitions>
</Setter>
</Style>
<!-- PointerOverState -->
<Style Selector="^:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
</Style>
<!-- PressedState -->
<Style Selector="^:pressed /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
</Style>
<Style Selector="^:pressed /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
</Style>
<Style Selector="^:pressed /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" />
</Style>
<!-- DisabledState -->
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
</Style>
<!-- CheckedState -->
<Style Selector="^:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="1" />
</Style>
<!-- UncheckedState -->
<Style Selector="^:unchecked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:unchecked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="0" />
</Style>
</ControlTheme>
</StackPanel>
</Design.PreviewWith>
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
<GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
<x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
<ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<ControlTemplate>
<Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*">
<ContentPresenter
x:Name="PART_ContentPresenter"
Grid.Row="0"
VerticalAlignment="Top"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
RecognizesAccessKey="True" />
<Grid
Grid.Row="1"
MinWidth="{DynamicResource 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"
Background="{DynamicResource ToggleSwitchContainerBackground}"
Margin="0,5"
TemplatedControl.IsTemplateFocusTarget="True" />
<ContentPresenter
x:Name="PART_OffContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}" />
<ContentPresenter
x:Name="PART_OnContentPresenter"
Grid.RowSpan="3"
Grid.Column="2"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}" />
<Border
x:Name="OuterBorder"
Grid.Row="1"
Width="40"
Height="20"
Background="{DynamicResource ToggleSwitchFillOff}"
BorderBrush="{DynamicResource ToggleSwitchStrokeOff}"
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}"
CornerRadius="10" />
<Border
x:Name="SwitchKnobBounds"
Grid.Row="1"
Width="40"
Height="20"
Background="{DynamicResource ToggleSwitchFillOn}"
BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
CornerRadius="10" />
<Canvas
x:Name="SwitchKnob"
Grid.Row="1"
Width="20"
Height="20"
HorizontalAlignment="Left">
<Grid x:Name="MovingKnobs" Width="20" Height="20">
<Ellipse
x:Name="SwitchKnobOn"
Fill="{DynamicResource ToggleSwitchKnobFillOn}"
Width="10"
Height="10" />
<Ellipse
x:Name="SwitchKnobOff"
Fill="{DynamicResource ToggleSwitchKnobFillOff}"
Width="10"
Height="10" />
</Grid>
</Canvas>
</Grid>
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
<Setter Property="Margin" Value="0" />
</Style>
<!-- NormalState -->
<Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs">
<Setter Property="Transitions">
<Transitions>
<DoubleTransition
Easing="CubicEaseOut"
Property="Canvas.Left"
Duration="0:0:0.2" />
</Transitions>
</Setter>
</Style>
<!-- PointerOverState -->
<Style Selector="^:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
</Style>
<Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
</Style>
<!-- PressedState -->
<Style Selector="^:pressed /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
</Style>
<Style Selector="^:pressed /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
</Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
</Style>
<Style Selector="^:pressed /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" />
</Style>
<!-- DisabledState -->
<Style Selector="^:disabled">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" />
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
</Style>
<Style Selector="^:disabled /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
</Style>
<!-- CheckedState -->
<Style Selector="^:checked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="1" />
</Style>
<!-- UncheckedState -->
<Style Selector="^:unchecked /template/ Border#OuterBorder">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:unchecked /template/ Border#SwitchKnobBounds">
<Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Opacity" Value="1" />
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<Setter Property="Opacity" Value="0" />
</Style>
</ControlTheme>
</ResourceDictionary>

Write Preview
Loading…
Cancel
Save