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
Unified 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="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=netstandard"> xmlns:sys="clr-namespace:System;assembly=netstandard">
<Design.PreviewWith> <Design.PreviewWith>
<StackPanel Margin="20" Width="250" Spacing="24" > <StackPanel Margin="20" Width="250" Spacing="24">
<StackPanel Spacing="12" > <StackPanel Spacing="12" >
<TextBlock <ToggleSwitch/>
Text="Automatic updates" <ToggleSwitch IsChecked="True" />
Classes="h1"/> <ToggleSwitch HorizontalContentAlignment="Left"
<TextBlock Content="Header"
Text="Updates will be automaticly Downloaded and installed shile the computer is shutting down or restarting" OffContent="Off"
TextWrapping="Wrap"/> OnContent="On"/>
<ToggleSwitch HorizontalContentAlignment="Left" <ToggleSwitch Background="Yellow"/>
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>
</StackPanel> </StackPanel>
</Design.PreviewWith> </StackPanel>
</Design.PreviewWith>
<Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength> <Thickness x:Key="ToggleSwitchTopHeaderMargin">0,0,0,6</Thickness>
<GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength> <GridLength x:Key="ToggleSwitchPreContentMargin">6</GridLength>
<x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double> <GridLength x:Key="ToggleSwitchPostContentMargin">6</GridLength>
<x:Double x:Key="ToggleSwitchThemeMinWidth">0</x:Double>
<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="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" /> <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate> <ControlTemplate>
<Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*"> <Grid Background="{TemplateBinding Background}" RowDefinitions="Auto,*">
<ContentPresenter <ContentPresenter
x:Name="PART_ContentPresenter" x:Name="PART_ContentPresenter"
Grid.Row="0" Grid.Row="0"
VerticalAlignment="Top" VerticalAlignment="Top"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True" /> Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
RecognizesAccessKey="True" />
<Grid
Grid.Row="1" <Grid
MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}" Grid.Row="1"
HorizontalAlignment="Left" MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}"
VerticalAlignment="Top"> HorizontalAlignment="Left"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" /> <Grid.RowDefinitions>
<RowDefinition Height="Auto" /> <RowDefinition Height="{DynamicResource ToggleSwitchPreContentMargin}" />
<RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" /> <RowDefinition Height="Auto" />
</Grid.RowDefinitions> <RowDefinition Height="{DynamicResource ToggleSwitchPostContentMargin}" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" /> <Grid.ColumnDefinitions>
<ColumnDefinition Width="12" MaxWidth="12" /> <ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="12" MaxWidth="12" />
</Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid
x:Name="SwitchAreaGrid" <Grid
Grid.RowSpan="3" x:Name="SwitchAreaGrid"
Grid.ColumnSpan="3" Grid.RowSpan="3"
Margin="0,5" Grid.ColumnSpan="3"
TemplatedControl.IsTemplateFocusTarget="True" /> Background="{DynamicResource ToggleSwitchContainerBackground}"
Margin="0,5"
<ContentPresenter TemplatedControl.IsTemplateFocusTarget="True" />
x:Name="PART_OffContentPresenter"
Grid.RowSpan="3" <ContentPresenter
Grid.Column="2" x:Name="PART_OffContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.RowSpan="3"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2"
Content="{TemplateBinding OffContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentTemplate="{TemplateBinding OffContentTemplate}" /> VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OffContent}"
<ContentPresenter ContentTemplate="{TemplateBinding OffContentTemplate}" />
x:Name="PART_OnContentPresenter"
Grid.RowSpan="3" <ContentPresenter
Grid.Column="2" x:Name="PART_OnContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Grid.RowSpan="3"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="2"
Content="{TemplateBinding OnContent}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentTemplate="{TemplateBinding OnContentTemplate}" /> VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OnContent}"
<Border ContentTemplate="{TemplateBinding OnContentTemplate}" />
x:Name="OuterBorder"
Grid.Row="1" <Border
Width="40" x:Name="OuterBorder"
Height="20" Grid.Row="1"
BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" Width="40"
CornerRadius="10" /> Height="20"
Background="{DynamicResource ToggleSwitchFillOff}"
<Border BorderBrush="{DynamicResource ToggleSwitchStrokeOff}"
x:Name="SwitchKnobBounds" BorderThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}"
Grid.Row="1" CornerRadius="10" />
Width="40"
Height="20" <Border
BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}" x:Name="SwitchKnobBounds"
CornerRadius="10" /> Grid.Row="1"
Width="40"
<Canvas Height="20"
x:Name="SwitchKnob" Background="{DynamicResource ToggleSwitchFillOn}"
Grid.Row="1" BorderBrush="{DynamicResource ToggleSwitchStrokeOn}"
Width="20" BorderThickness="{DynamicResource ToggleSwitchOnStrokeThickness}"
Height="20" CornerRadius="10" />
HorizontalAlignment="Left">
<Canvas
<Grid x:Name="SwitchKnob"
x:Name="MovingKnobs" Grid.Row="1"
Width="20" Width="20"
Height="20"> Height="20"
HorizontalAlignment="Left">
<Ellipse
x:Name="SwitchKnobOn" <Grid x:Name="MovingKnobs" Width="20" Height="20">
Width="10" <Ellipse
Height="10" /> x:Name="SwitchKnobOn"
Fill="{DynamicResource ToggleSwitchKnobFillOn}"
<Ellipse Width="10"
x:Name="SwitchKnobOff" Height="10" />
Width="10" <Ellipse
Height="10" /> x:Name="SwitchKnobOff"
</Grid> Fill="{DynamicResource ToggleSwitchKnobFillOff}"
</Canvas> Width="10"
</Grid> Height="10" />
</Grid> </Grid>
</ControlTemplate> </Canvas>
</Setter> </Grid>
</Grid>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter"> </ControlTemplate>
<Setter Property="Margin" Value="{DynamicResource ToggleSwitchTopHeaderMargin}" /> </Setter>
</Style>
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty"> <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter:empty">
<Setter Property="Margin" Value="0" /> <Setter Property="Margin" Value="0" />
</Style> </Style>
<!-- NormalState --> <!-- NormalState -->
<Style Selector="^ /template/ Grid#SwitchAreaGrid"> <Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackground}" /> <Setter Property="Transitions">
</Style> <Transitions>
<DoubleTransition
<Style Selector="^ /template/ Border#OuterBorder"> Easing="CubicEaseOut"
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOff}" /> Property="Canvas.Left"
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOff}" /> Duration="0:0:0.2" />
</Style> </Transitions>
</Setter>
<Style Selector="^ /template/ Border#SwitchKnobBounds"> </Style>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOn}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOn}" /> <!-- PointerOverState -->
</Style> <Style Selector="^:pointerover /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
<Style Selector="^ /template/ Ellipse#SwitchKnobOn"> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOn}" /> </Style>
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
<Style Selector="^ /template/ Ellipse#SwitchKnobOff"> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOff}" /> </Style>
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn">
<Style Selector="^:not(:dragging) /template/ Grid#MovingKnobs"> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
<Setter Property="Transitions"> </Style>
<Transitions>
<DoubleTransition <Style Selector="^:pointerover /template/ Border#SwitchKnobBounds">
Easing="CubicEaseOut" <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
Property="Canvas.Left" <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
Duration="0:0:0.2" /> </Style>
</Transitions>
</Setter> <Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
</Style> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
</Style>
<!-- PointerOverState -->
<Style Selector="^:pointerover /template/ Border#OuterBorder"> <!-- PressedState -->
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" /> <Style Selector="^:pressed /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" /> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
</Style> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
</Style>
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" /> <Style Selector="^:pressed /template/ Border#SwitchKnobBounds">
</Style> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
<Style Selector="^:pointerover /template/ Ellipse#SwitchKnobOn"> </Style>
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
</Style> <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
<Style Selector="^:pointerover /template/ Border#SwitchKnobBounds"> </Style>
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" /> <Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn">
</Style> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
</Style>
<Style Selector="^:pointerover /template/ Grid#SwitchAreaGrid">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" /> <Style Selector="^:pressed /template/ Grid#SwitchAreaGrid">
</Style> <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" />
</Style>
<!-- PressedState -->
<Style Selector="^:pressed /template/ Border#OuterBorder"> <!-- DisabledState -->
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" /> <Style Selector="^:disabled">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffPressed}" /> <Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Border#SwitchKnobBounds"> <Style Selector="^:disabled /template/ Border#OuterBorder">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnPressed}" /> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" /> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOff"> <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" /> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Ellipse#SwitchKnobOn"> <Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" /> <Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
</Style> </Style>
<Style Selector="^:pressed /template/ Grid#SwitchAreaGrid"> <Style Selector="^:disabled /template/ Border#SwitchKnobBounds">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" /> <Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
</Style> <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
</Style>
<!-- DisabledState -->
<Style Selector="^:disabled"> <!-- CheckedState -->
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" /> <Style Selector="^:checked /template/ Border#OuterBorder">
</Style> <Setter Property="Opacity" Value="0" />
</Style>
<Style Selector="^:disabled /template/ Border#OuterBorder">
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" /> <Style Selector="^:checked /template/ Ellipse#SwitchKnobOff">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOffDisabled}" /> <Setter Property="Opacity" Value="0" />
</Style> </Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOff"> <Style Selector="^:checked /template/ Border#SwitchKnobBounds">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" /> <Setter Property="Opacity" Value="1" />
</Style> </Style>
<Style Selector="^:disabled /template/ Ellipse#SwitchKnobOn"> <Style Selector="^:checked /template/ Ellipse#SwitchKnobOn">
<Setter Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" /> <Setter Property="Opacity" Value="1" />
</Style> </Style>
<Style Selector="^:disabled /template/ Border#SwitchKnobBounds"> <Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter">
<Setter Property="Background" Value="{DynamicResource ToggleSwitchFillOnDisabled}" /> <Setter Property="Opacity" Value="0" />
<Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" /> </Style>
</Style>
<Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter">
<!-- CheckedState --> <Setter Property="Opacity" Value="1" />
<Style Selector="^:checked /template/ Border#OuterBorder"> </Style>
<Setter Property="Opacity" Value="0" />
</Style> <!-- UncheckedState -->
<Style Selector="^:unchecked /template/ Border#OuterBorder">
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOff"> <Setter Property="Opacity" Value="1" />
<Setter Property="Opacity" Value="0" /> </Style>
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOff">
<Style Selector="^:checked /template/ Border#SwitchKnobBounds"> <Setter Property="Opacity" Value="1" />
<Setter Property="Opacity" Value="1" /> </Style>
</Style>
<Style Selector="^:unchecked /template/ Ellipse#SwitchKnobOn">
<Style Selector="^:checked /template/ Ellipse#SwitchKnobOn"> <Setter Property="Opacity" Value="0" />
<Setter Property="Opacity" Value="1" /> </Style>
</Style>
<Style Selector="^:unchecked /template/ Border#SwitchKnobBounds">
<Style Selector="^:checked /template/ ContentPresenter#PART_OffContentPresenter"> <Setter Property="Opacity" Value="0" />
<Setter Property="Opacity" Value="0" /> </Style>
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OffContentPresenter">
<Style Selector="^:checked /template/ ContentPresenter#PART_OnContentPresenter"> <Setter Property="Opacity" Value="1" />
<Setter Property="Opacity" Value="1" /> </Style>
</Style>
<Style Selector="^:unchecked /template/ ContentPresenter#PART_OnContentPresenter">
<!-- UncheckedState --> <Setter Property="Opacity" Value="0" />
<Style Selector="^:unchecked /template/ Border#OuterBorder"> </Style>
<Setter Property="Opacity" Value="1" /> </ControlTheme>
</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> </ResourceDictionary>

Write Preview
Loading…
Cancel
Save