289 lines
18 KiB
XML
289 lines
18 KiB
XML
<ResourceDictionary
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:controls="clr-namespace:WPFluent.Controls"
|
|
xmlns:system="clr-namespace:System;assembly=mscorlib"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
|
|
|
<!-- TODO: Increase size on mouse over -->
|
|
|
|
<system:Double x:Key="RadioButtonBorderThemeThickness">1</system:Double>
|
|
<system:Double x:Key="ToggleButtonWidth">40</system:Double>
|
|
<system:Double x:Key="ToggleButtonHeight">20</system:Double>
|
|
<Thickness x:Key="ToggleSwitchPadding">8,6,0,0</Thickness>
|
|
<Thickness x:Key="ToggleSwitchBorderThemeThickness">1</Thickness>
|
|
<Thickness x:Key="ToggleSwitchContentMargin">8,0,0,0</Thickness>
|
|
|
|
<Style TargetType="{x:Type controls:ToggleSwitch}" x:Key="DefaultUiToggleSwitchStyle">
|
|
<!-- Universal WPF UI focus -->
|
|
<Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
|
|
<!-- Universal WPF UI focus -->
|
|
<Setter Property="Background" Value="{DynamicResource SystemFillColorAttentionBrush}" />
|
|
<Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />
|
|
<Setter Property="BorderBrush" Value="Transparent" />
|
|
<Setter Property="BorderThickness" Value="{StaticResource ToggleSwitchBorderThemeThickness}" />
|
|
<Setter Property="Padding" Value="{StaticResource ToggleSwitchPadding}" />
|
|
<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="FontWeight" Value="Normal" />
|
|
<Setter Property="SnapsToDevicePixels" Value="True" />
|
|
<Setter Property="OverridesDefaultStyle" Value="True" />
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type controls:ToggleSwitch}">
|
|
<Grid Background="Transparent">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="*" />
|
|
</Grid.ColumnDefinitions>
|
|
<Grid
|
|
Grid.Column="0"
|
|
Height="{StaticResource ToggleButtonHeight}"
|
|
Width="{StaticResource ToggleButtonWidth}">
|
|
<Rectangle
|
|
Fill="{DynamicResource ControlAltFillColorSecondaryBrush}"
|
|
Height="{StaticResource ToggleButtonHeight}"
|
|
HorizontalAlignment="Center"
|
|
RadiusX="10"
|
|
RadiusY="10"
|
|
Stroke="{DynamicResource ControlStrongStrokeColorDefaultBrush}"
|
|
StrokeThickness="1"
|
|
VerticalAlignment="Center"
|
|
Width="{StaticResource ToggleButtonWidth}"
|
|
x:Name="ToggleRectangle" />
|
|
<Rectangle
|
|
Fill="{TemplateBinding Background}"
|
|
Height="{StaticResource ToggleButtonHeight}"
|
|
HorizontalAlignment="Center"
|
|
Opacity="0.0"
|
|
RadiusX="10"
|
|
RadiusY="10"
|
|
StrokeThickness="0"
|
|
VerticalAlignment="Center"
|
|
Width="{StaticResource ToggleButtonWidth}"
|
|
x:Name="ActiveToggleRectangle" />
|
|
<Ellipse
|
|
Fill="{DynamicResource TextFillColorSecondaryBrush}"
|
|
Height="12"
|
|
HorizontalAlignment="Center"
|
|
Margin="0"
|
|
RenderTransformOrigin="0.5, 0.5"
|
|
VerticalAlignment="Center"
|
|
Width="12"
|
|
x:Name="ToggleEllipse">
|
|
<Ellipse.RenderTransform>
|
|
<TranslateTransform X="-9" />
|
|
</Ellipse.RenderTransform>
|
|
</Ellipse>
|
|
<Ellipse
|
|
Fill="{DynamicResource TextOnAccentFillColorPrimaryBrush}"
|
|
Height="12"
|
|
HorizontalAlignment="Center"
|
|
Margin="0"
|
|
Opacity="0.0"
|
|
RenderTransformOrigin="0.5, 0.5"
|
|
VerticalAlignment="Center"
|
|
Width="12"
|
|
x:Name="ActiveToggleEllipse">
|
|
<Ellipse.RenderTransform>
|
|
<TranslateTransform X="-9" />
|
|
</Ellipse.RenderTransform>
|
|
</Ellipse>
|
|
</Grid>
|
|
<ContentPresenter
|
|
Content="{TemplateBinding Content}"
|
|
Grid.Column="1"
|
|
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
|
|
Margin="{StaticResource ToggleSwitchContentMargin}"
|
|
TextElement.Foreground="{TemplateBinding Foreground}"
|
|
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
|
x:Name="ContentPresenter" />
|
|
</Grid>
|
|
<ControlTemplate.Triggers>
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="{x:Null}" />
|
|
<Condition Property="OnContent" Value="{x:Null}" />
|
|
<Condition Property="OffContent" Value="{x:Null}" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Margin" TargetName="ContentPresenter" Value="0" />
|
|
</MultiTrigger>
|
|
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="" />
|
|
<Condition Property="OnContent" Value="" />
|
|
<Condition Property="OffContent" Value="" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Margin" TargetName="ContentPresenter" Value="0" />
|
|
</MultiTrigger>
|
|
|
|
<Trigger Property="IsChecked" Value="True">
|
|
<Trigger.EnterActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="1.0"
|
|
Storyboard.TargetName="ToggleRectangle"
|
|
Storyboard.TargetProperty="(Rectangle.Opacity)"
|
|
To="0.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="0.0"
|
|
Storyboard.TargetName="ActiveToggleRectangle"
|
|
Storyboard.TargetProperty="(Rectangle.Opacity)"
|
|
To="1.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="1.0"
|
|
Storyboard.TargetName="ToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.Opacity)"
|
|
To="0.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="0.0"
|
|
Storyboard.TargetName="ActiveToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.Opacity)"
|
|
To="1.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="-9"
|
|
Storyboard.TargetName="ToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
|
|
To="9" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="-9"
|
|
Storyboard.TargetName="ActiveToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
|
|
To="9" />
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.EnterActions>
|
|
<Trigger.ExitActions>
|
|
<BeginStoryboard>
|
|
<Storyboard>
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="0.0"
|
|
Storyboard.TargetName="ToggleRectangle"
|
|
Storyboard.TargetProperty="(Rectangle.Opacity)"
|
|
To="1.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="1.0"
|
|
Storyboard.TargetName="ActiveToggleRectangle"
|
|
Storyboard.TargetProperty="(Rectangle.Opacity)"
|
|
To="0.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="0.0"
|
|
Storyboard.TargetName="ToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.Opacity)"
|
|
To="1.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="1.0"
|
|
Storyboard.TargetName="ActiveToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.Opacity)"
|
|
To="0.0" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="9"
|
|
Storyboard.TargetName="ToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
|
|
To="-9" />
|
|
<DoubleAnimation
|
|
Duration="00:00:00.167"
|
|
From="9"
|
|
Storyboard.TargetName="ActiveToggleEllipse"
|
|
Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)"
|
|
To="-9" />
|
|
</Storyboard>
|
|
</BeginStoryboard>
|
|
</Trigger.ExitActions>
|
|
</Trigger>
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="{x:Null}" />
|
|
<Condition Property="IsChecked" Value="True" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Content" TargetName="ContentPresenter" Value="{Binding OnContent, RelativeSource={RelativeSource TemplatedParent}}" />
|
|
</MultiTrigger>
|
|
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="{x:Null}" />
|
|
<Condition Property="IsChecked" Value="False" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Content" TargetName="ContentPresenter" Value="{Binding OffContent, RelativeSource={RelativeSource TemplatedParent}}" />
|
|
</MultiTrigger>
|
|
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="" />
|
|
<Condition Property="IsChecked" Value="True" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Content" TargetName="ContentPresenter" Value="{Binding OnContent, RelativeSource={RelativeSource TemplatedParent}}" />
|
|
</MultiTrigger>
|
|
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="Content" Value="" />
|
|
<Condition Property="IsChecked" Value="False" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Content" TargetName="ContentPresenter" Value="{Binding OffContent, RelativeSource={RelativeSource TemplatedParent}}" />
|
|
</MultiTrigger>
|
|
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="IsMouseOver" Value="True" />
|
|
<Condition Property="IsChecked" Value="False" />
|
|
<Condition Property="IsEnabled" Value="True" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Fill" TargetName="ToggleRectangle" Value="{DynamicResource ControlAltFillColorTertiaryBrush}" />
|
|
<Setter Property="Stroke" TargetName="ToggleRectangle" Value="{DynamicResource ControlStrongStrokeColorDefaultBrush}" />
|
|
<Setter Property="Fill" TargetName="ToggleEllipse" Value="{DynamicResource TextFillColorSecondaryBrush}" />
|
|
</MultiTrigger>
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="IsMouseOver" Value="True" />
|
|
<Condition Property="IsChecked" Value="True" />
|
|
<Condition Property="IsEnabled" Value="True" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Background" Value="{DynamicResource SystemFillColorAttentionBrush}" />
|
|
<Setter Property="Stroke" TargetName="ToggleRectangle" Value="{DynamicResource SystemFillColorAttentionBrush}" />
|
|
<Setter Property="Fill" TargetName="ActiveToggleEllipse" Value="{DynamicResource TextOnAccentFillColorPrimaryBrush}" />
|
|
</MultiTrigger>
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="IsChecked" Value="False" />
|
|
<Condition Property="IsEnabled" Value="False" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Stroke" TargetName="ToggleRectangle" Value="{DynamicResource ControlStrongStrokeColorDisabledBrush}" />
|
|
<Setter Property="Fill" TargetName="ToggleRectangle" Value="{DynamicResource ControlAltFillColorDisabledBrush}" />
|
|
<Setter Property="Fill" TargetName="ToggleEllipse" Value="{DynamicResource TextFillColorDisabledBrush}" />
|
|
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
|
|
</MultiTrigger>
|
|
<MultiTrigger>
|
|
<MultiTrigger.Conditions>
|
|
<Condition Property="IsChecked" Value="True" />
|
|
<Condition Property="IsEnabled" Value="False" />
|
|
</MultiTrigger.Conditions>
|
|
<Setter Property="Fill" TargetName="ActiveToggleRectangle" Value="{DynamicResource AccentFillColorDisabledBrush}" />
|
|
<Setter Property="Fill" TargetName="ActiveToggleEllipse" Value="{DynamicResource TextOnAccentFillColorDisabledBrush}" />
|
|
<Setter Property="Foreground" Value="{DynamicResource TextFillColorDisabledBrush}" />
|
|
</MultiTrigger>
|
|
</ControlTemplate.Triggers>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
|
|
<Style BasedOn="{StaticResource DefaultUiToggleSwitchStyle}" TargetType="{x:Type controls:ToggleSwitch}" />
|
|
|
|
</ResourceDictionary>
|