You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
226 lines
17 KiB
226 lines
17 KiB
<UserControl x:Class="W10SS_GUI.Controls.ToggleSwitch"
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
xmlns:local="clr-namespace:W10SS_GUI.Controls"
|
|
mc:Ignorable="d"
|
|
d:DesignHeight="{StaticResource toggleSwitchHeight}" d:DesignWidth="{StaticResource toggleSwitchMinWidth}">
|
|
<UserControl.Resources>
|
|
<!--#region Brushes -->
|
|
|
|
<SolidColorBrush x:Key="RadioButton.Static.Background" Color="#FFFFFFFF"/>
|
|
<SolidColorBrush x:Key="RadioButton.Static.Border" Color="#FF333333"/>
|
|
<SolidColorBrush x:Key="RadioButton.Static.Glyph" Color="#FF333333"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.Background" Color="#FFFFFFFF"/>
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.Border" Color="#FF000000"/>
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.Glyph" Color="#FF000000"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.On.Background" Color="#3F51B5"/>
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.On.Border" Color="#3F51B5"/>
|
|
<SolidColorBrush x:Key="RadioButton.MouseOver.On.Glyph" Color="#FFFFFFFF"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.Background" Color="#FFFFFFFF"/>
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.Border" Color="#FF999999"/>
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.Glyph" Color="#FF999999"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.On.Background" Color="#FFCCCCCC"/>
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.On.Border" Color="#FFCCCCCC"/>
|
|
<SolidColorBrush x:Key="RadioButton.Disabled.On.Glyph" Color="#FFA3A3A3"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.Pressed.Background" Color="#FF999999"/>
|
|
<SolidColorBrush x:Key="RadioButton.Pressed.Border" Color="#FF999999"/>
|
|
<SolidColorBrush x:Key="RadioButton.Pressed.Glyph" Color="#FFFFFFFF"/>
|
|
|
|
<SolidColorBrush x:Key="RadioButton.Checked.Background" Color="#3F51B5"/>
|
|
<SolidColorBrush x:Key="RadioButton.Checked.Border" Color="#3F51B5"/>
|
|
<SolidColorBrush x:Key="RadioButton.Checked.Glyph" Color="#FFFFFFFF"/>
|
|
|
|
<!--#endregion-->
|
|
|
|
<!--#region Toggle Switch Style-->
|
|
<Style TargetType="{x:Type ToggleButton}">
|
|
<Setter Property="HorizontalAlignment" Value="Left"/>
|
|
<Setter Property="Margin" Value="10 0 10 0" />
|
|
<Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/>
|
|
<Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/>
|
|
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
|
|
<Setter Property="HorizontalContentAlignment" Value="Left"/>
|
|
<Setter Property="BorderThickness" Value="1"/>
|
|
<Setter Property="SnapsToDevicePixels" Value="True"/>
|
|
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
|
|
<Setter Property="Template">
|
|
<Setter.Value>
|
|
<ControlTemplate TargetType="{x:Type ToggleButton}">
|
|
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
|
|
Width="44" Height="20"
|
|
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
|
|
|
|
<Border x:Name="normalBorder" Opacity="1" BorderThickness="2" CornerRadius="10"
|
|
BorderBrush="{TemplateBinding BorderBrush}" Background="{StaticResource RadioButton.Static.Background}"/>
|
|
<Border x:Name="checkedBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
|
|
BorderBrush="{StaticResource RadioButton.Checked.Border}" Background="{StaticResource RadioButton.Checked.Background}"/>
|
|
<Border x:Name="hoverBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
|
|
BorderBrush="{StaticResource RadioButton.MouseOver.Border}" Background="{StaticResource RadioButton.MouseOver.Background}"/>
|
|
<Border x:Name="pressedBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
|
|
BorderBrush="{StaticResource RadioButton.Pressed.Border}" Background="{StaticResource RadioButton.Pressed.Background}"/>
|
|
<Border x:Name="disabledBorder" Opacity="0" BorderThickness="2" CornerRadius="10"
|
|
BorderBrush="{StaticResource RadioButton.Disabled.Border}" Background="{StaticResource RadioButton.Disabled.Background}"/>
|
|
<Ellipse x:Name="optionMark"
|
|
Height="10" Width="10" Fill="{StaticResource RadioButton.Static.Glyph}" StrokeThickness="0"
|
|
VerticalAlignment="Center" Margin="5,0" RenderTransformOrigin="0.5,0.5">
|
|
<Ellipse.RenderTransform>
|
|
<TransformGroup>
|
|
<ScaleTransform/>
|
|
<SkewTransform/>
|
|
<RotateTransform/>
|
|
<TranslateTransform X="-12"/>
|
|
</TransformGroup>
|
|
</Ellipse.RenderTransform>
|
|
</Ellipse>
|
|
<Ellipse x:Name="optionMarkOn" Opacity="0"
|
|
Height="10" Width="10" Fill="{StaticResource RadioButton.Checked.Glyph}" StrokeThickness="0"
|
|
VerticalAlignment="Center" Margin="5,0" RenderTransformOrigin="0.5,0.5">
|
|
<Ellipse.RenderTransform>
|
|
<TransformGroup>
|
|
<ScaleTransform/>
|
|
<SkewTransform/>
|
|
<RotateTransform/>
|
|
<TranslateTransform X="12"/>
|
|
</TransformGroup>
|
|
</Ellipse.RenderTransform>
|
|
</Ellipse>
|
|
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal"/>
|
|
<VisualState x:Name="MouseOver">
|
|
<Storyboard>
|
|
<DoubleAnimation To="0" Duration="0:0:0.2" Storyboard.TargetName="normalBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0:0:0.2">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="Fill" Duration="0:0:0.2">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Pressed">
|
|
<Storyboard>
|
|
<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="pressedBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Pressed.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Disabled">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="BorderBrush">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Border}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Background}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="Fill" Duration="0">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
<VisualStateGroup x:Name="CheckStates">
|
|
<VisualState x:Name="Unchecked"/>
|
|
<VisualState x:Name="Checked">
|
|
<Storyboard>
|
|
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill" Duration="0">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Static.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<DoubleAnimationUsingKeyFrames Duration="0:0:0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="optionMark">
|
|
<EasingDoubleKeyFrame KeyTime="0" Value="12"/>
|
|
</DoubleAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="optionMark" Storyboard.TargetProperty="Fill">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Checked.Glyph}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="BorderBrush">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Border}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="hoverBorder" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.MouseOver.On.Background}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="optionMarkOn" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<DoubleAnimation To="1" Duration="0" Storyboard.TargetName="checkedBorder" Storyboard.TargetProperty="(UIElement.Opacity)"/>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="BorderBrush">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Border}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="disabledBorder" Storyboard.TargetProperty="Background">
|
|
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButton.Disabled.On.Background}"/>
|
|
</ObjectAnimationUsingKeyFrames>
|
|
</Storyboard>
|
|
</VisualState>
|
|
<VisualState x:Name="Indeterminate"/>
|
|
</VisualStateGroup>
|
|
<VisualStateGroup x:Name="FocusStates">
|
|
<VisualState x:Name="Unfocused"/>
|
|
<VisualState x:Name="Focused"/>
|
|
</VisualStateGroup>
|
|
</VisualStateManager.VisualStateGroups>
|
|
</Grid>
|
|
</ControlTemplate>
|
|
</Setter.Value>
|
|
</Setter>
|
|
</Style>
|
|
<!--#endregion Toggle Switch Style-->
|
|
|
|
</UserControl.Resources>
|
|
|
|
<Grid Name="gridToggleSwitch"
|
|
MinWidth="{StaticResource toggleSwitchMinWidth}"
|
|
Height="{StaticResource toggleSwitchHeight}"
|
|
Margin="10 0 10 0"
|
|
MouseEnter="GridToggleSwitch_MouseEnter" MouseLeave="GridToggleSwitch_MouseLeave"
|
|
>
|
|
|
|
<!--<TextBlock Name="iconToggleSwitch"
|
|
FontFamily="{StaticResource fontToggleIcon}"
|
|
Width="{StaticResource toggleSwitchIconsWidth}"
|
|
FontSize="{DynamicResource toggleSwitchIconsFontSize}"
|
|
Margin="10 0 5 0"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Left"
|
|
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=Icon}"/>-->
|
|
|
|
<StackPanel VerticalAlignment="Center"
|
|
HorizontalAlignment="Left"
|
|
Margin="10 5 60 5">
|
|
<!--Margin="45 5 60 5">-->
|
|
|
|
<TextBlock Name="textToggleSwitchHeader"
|
|
FontFamily="{StaticResource fontToggleSwitchHeader}"
|
|
FontSize="{StaticResource fontSizeToggleSwitchHeader}"
|
|
TextWrapping="Wrap"
|
|
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=Header}"
|
|
MaxHeight="{StaticResource toggleSwitchHeaderMaxHeight}"/>
|
|
|
|
<TextBlock Name="textToggleSwitchDescription"
|
|
FontFamily="{StaticResource fontToggleSwitchDescription}"
|
|
FontSize="{StaticResource fontSizeToggleSwitchDescription}"
|
|
Foreground="{DynamicResource colorToggleDescription}"
|
|
Padding="0 3 0 3"
|
|
MaxHeight="{StaticResource toggleSwitchDescriptionMaxHeight}"
|
|
TextWrapping="Wrap"
|
|
Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=Description}" />
|
|
</StackPanel>
|
|
|
|
<ToggleButton Name="toggleSwitch"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Right"
|
|
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Path=IsChecked}"
|
|
Click="ToggleSwitch_Click" />
|
|
|
|
</Grid>
|
|
</UserControl>
|
|
|