Change Toggle Switch Width to responsive

This commit is contained in:
DB p 2021-12-12 06:17:25 +09:00
parent b2184c3946
commit 261fdd05ed
2 changed files with 393 additions and 19 deletions

View file

@ -1452,7 +1452,384 @@
<!-- - Custom Toggle Switch from modern wpf for left label -->
<system:TimeSpan x:Key="RepositionDelay">0:0:0.033</system:TimeSpan>
<KeyTime x:Key="RepositionDuration">0:0:0.367</KeyTime>
<KeySpline x:Key="RepositionKeySpline">0.1,0.9 0.2,1.0</KeySpline>
<Style x:Key="DefaultToggleSwitch" TargetType="ui:ToggleSwitch">
<Setter Property="Foreground" Value="{DynamicResource ToggleSwitchContentForeground}" />
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource {x:Static SystemParameters.FocusVisualStyleKey}}" />
<Setter Property="ui:FocusVisualHelper.FocusVisualMargin" Value="-7,-3,-7,-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ui:ToggleSwitch">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
SnapsToDevicePixels="True">
<VisualStateManager.CustomVisualStateManager>
<ui:SimpleVisualStateManager />
</VisualStateManager.CustomVisualStateManager>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ui:ContentPresenterEx
x:Name="HeaderContentPresenter"
Grid.Row="1"
Margin="{DynamicResource ToggleSwitchTopHeaderMargin}"
VerticalAlignment="Top"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
IsHitTestVisible="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.Foreground="{DynamicResource ToggleSwitchHeaderForeground}"
TextWrapping="Wrap"
Visibility="Collapsed" />
<Grid
Grid.Row="0"
Width="100"
MinWidth="{DynamicResource ToggleSwitchThemeMinWidth}"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition ui:RowDefinitionHelper.PixelHeight="{DynamicResource ToggleSwitchPreContentMargin}" />
<RowDefinition Height="Auto" />
<RowDefinition ui:RowDefinitionHelper.PixelHeight="{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"
ui:FocusVisualHelper.IsTemplateFocusTarget="True"
Background="{DynamicResource ToggleSwitchContainerBackground}" />
<ContentPresenter
x:Name="OffContentPresenter"
Grid.RowSpan="3"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OffContent}"
ContentTemplate="{TemplateBinding OffContentTemplate}"
IsHitTestVisible="False"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<ContentPresenter
x:Name="OnContentPresenter"
Grid.RowSpan="3"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding OnContent}"
ContentTemplate="{TemplateBinding OnContentTemplate}"
IsHitTestVisible="False"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
TextElement.Foreground="{TemplateBinding Foreground}" />
<Rectangle
x:Name="OuterBorder"
Grid.Row="1"
Grid.Column="2"
Width="40"
Height="20"
Fill="{DynamicResource ToggleSwitchFillOff}"
RadiusX="10"
RadiusY="10"
Stroke="{DynamicResource ToggleSwitchStrokeOff}"
StrokeThickness="{DynamicResource ToggleSwitchOuterBorderStrokeThickness}" />
<Rectangle
x:Name="SwitchKnobBounds"
Grid.Row="1"
Grid.Column="2"
Width="40"
Height="20"
Fill="{DynamicResource ToggleSwitchFillOn}"
Opacity="0"
RadiusX="10"
RadiusY="10"
Stroke="{DynamicResource ToggleSwitchStrokeOn}"
StrokeThickness="{DynamicResource ToggleSwitchOnStrokeThickness}" />
<Grid
x:Name="SwitchKnob"
Grid.Row="1"
Grid.Column="2"
Width="20"
Height="20"
HorizontalAlignment="Left">
<Ellipse
x:Name="SwitchKnobOn"
Width="10"
Height="10"
Fill="{DynamicResource ToggleSwitchKnobFillOn}"
Opacity="0" />
<Ellipse
x:Name="SwitchKnobOff"
Width="10"
Height="10"
Fill="{DynamicResource ToggleSwitchKnobFillOff}" />
<Grid.RenderTransform>
<TranslateTransform x:Name="KnobTranslateTransform" />
</Grid.RenderTransform>
</Grid>
<Thumb
x:Name="SwitchThumb"
Grid.RowSpan="3"
Grid.ColumnSpan="3">
<Thumb.Template>
<ControlTemplate TargetType="Thumb">
<Rectangle Fill="Transparent" />
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Grid>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ToggleStates">
<VisualStateGroup.Transitions>
<VisualTransition
x:Name="DraggingToOnTransition"
GeneratedDuration="0"
From="Dragging"
To="On">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="{StaticResource RepositionDelay}"
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame
KeySpline="{StaticResource RepositionKeySpline}"
KeyTime="{StaticResource RepositionDuration}"
Value="20" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition
x:Name="OnToDraggingTransition"
GeneratedDuration="0"
From="On"
To="Dragging">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition
x:Name="DraggingToOffTransition"
GeneratedDuration="0"
From="Dragging"
To="Off">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="{StaticResource RepositionDelay}"
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame
KeySpline="{StaticResource RepositionKeySpline}"
KeyTime="{StaticResource RepositionDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition
x:Name="OnToOffTransition"
GeneratedDuration="0"
From="On"
To="Off">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="{StaticResource RepositionDelay}"
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame
KeySpline="{StaticResource RepositionKeySpline}"
KeyTime="{StaticResource RepositionDuration}"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
<VisualTransition
x:Name="OffToOnTransition"
GeneratedDuration="0"
From="Off"
To="On">
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="{StaticResource RepositionDelay}"
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X">
<SplineDoubleKeyFrame
KeySpline="{StaticResource RepositionKeySpline}"
KeyTime="{StaticResource RepositionDuration}"
Value="20" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Dragging" />
<VisualState x:Name="Off">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X"
To="0"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="On">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="KnobTranslateTransform"
Storyboard.TargetProperty="X"
To="20"
Duration="0" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobBounds" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="OuterBorder" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOn" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SwitchKnobOff" Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="OffContent">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="OffContentPresenter"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="OffContentPresenter" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="OnContent">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="OnContentPresenter"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="OnContentPresenter" Storyboard.TargetProperty="IsHitTestVisible">
<DiscreteBooleanKeyFrame KeyTime="0" Value="True" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
<ControlTemplate.Triggers>
<!-- PointerOver -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="true" />
<Condition SourceName="SwitchThumb" Property="IsDragging" Value="false" />
</MultiTrigger.Conditions>
<Setter TargetName="OuterBorder" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOffPointerOver}" />
<Setter TargetName="OuterBorder" Property="Fill" Value="{DynamicResource ToggleSwitchFillOffPointerOver}" />
<Setter TargetName="SwitchKnobOff" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPointerOver}" />
<Setter TargetName="SwitchKnobOn" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPointerOver}" />
<Setter TargetName="SwitchKnobBounds" Property="Fill" Value="{DynamicResource ToggleSwitchFillOnPointerOver}" />
<Setter TargetName="SwitchKnobBounds" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOnPointerOver}" />
<Setter TargetName="SwitchAreaGrid" Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPointerOver}" />
</MultiTrigger>
<!-- Pressed -->
<Trigger SourceName="SwitchThumb" Property="IsDragging" Value="true">
<Setter TargetName="OuterBorder" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOffPressed}" />
<Setter TargetName="OuterBorder" Property="Fill" Value="{DynamicResource ToggleSwitchFillOffPressed}" />
<Setter TargetName="SwitchKnobOff" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffPressed}" />
<Setter TargetName="SwitchKnobOn" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnPressed}" />
<Setter TargetName="SwitchKnobBounds" Property="Fill" Value="{DynamicResource ToggleSwitchFillOnPressed}" />
<Setter TargetName="SwitchKnobBounds" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOnPressed}" />
<Setter TargetName="SwitchAreaGrid" Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundPressed}" />
</Trigger>
<!-- Disabled -->
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="HeaderContentPresenter" Property="Foreground" Value="{DynamicResource ToggleSwitchHeaderForegroundDisabled}" />
<Setter TargetName="OffContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ToggleSwitchContentForegroundDisabled}" />
<Setter TargetName="OnContentPresenter" Property="TextElement.Foreground" Value="{DynamicResource ToggleSwitchContentForegroundDisabled}" />
<Setter TargetName="OuterBorder" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOffDisabled}" />
<Setter TargetName="OuterBorder" Property="Fill" Value="{DynamicResource ToggleSwitchFillOffDisabled}" />
<Setter TargetName="SwitchKnobOff" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOffDisabled}" />
<Setter TargetName="SwitchKnobOn" Property="Fill" Value="{DynamicResource ToggleSwitchKnobFillOnDisabled}" />
<Setter TargetName="SwitchKnobBounds" Property="Fill" Value="{DynamicResource ToggleSwitchFillOnDisabled}" />
<Setter TargetName="SwitchKnobBounds" Property="Stroke" Value="{DynamicResource ToggleSwitchStrokeOnDisabled}" />
<Setter TargetName="SwitchAreaGrid" Property="Background" Value="{DynamicResource ToggleSwitchContainerBackgroundDisabled}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource DefaultToggleSwitch}" TargetType="{x:Type ui:ToggleSwitch}" />
<!--#region Expander for Setting Window-->
<Style x:Key="ExpanderRightHeaderStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">

View file

@ -682,7 +682,6 @@
</StackPanel>
<ui:ToggleSwitch
Grid.Column="2"
Width="100"
FocusVisualMargin="5"
IsOn="{Binding AutoUpdates}"
Style="{DynamicResource SideToggleSwitch}" />
@ -700,7 +699,6 @@
</StackPanel>
<ui:ToggleSwitch
Grid.Column="2"
Width="100"
FocusVisualMargin="5"
IsOn="{Binding PortableMode}"
Style="{DynamicResource SideToggleSwitch}" />
@ -951,9 +949,9 @@
FlowDirection="LeftToRight">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" MinWidth="100" />
<ColumnDefinition Width="2.8*" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" MaxWidth="140" />
<ColumnDefinition Width="3*" />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel
Grid.Column="0"
@ -1025,11 +1023,10 @@
</StackPanel>
<DockPanel Grid.Column="3">
<ui:ToggleSwitch
Margin="4"
HorizontalAlignment="Right"
Margin="0"
DockPanel.Dock="Right"
FlowDirection="RightToLeft"
IsOn="{Binding PluginState}" />
IsOn="{Binding PluginState}"
Style="{DynamicResource SideToggleSwitch}" />
</DockPanel>
</Grid>
@ -1605,10 +1602,10 @@
<ui:ToggleSwitch
Grid.Row="0"
Grid.Column="2"
Width="100"
Margin="0,0,22,0"
FlowDirection="RightToLeft"
IsOn="{Binding DropShadowEffect, Mode=TwoWay}" />
IsOn="{Binding DropShadowEffect, Mode=TwoWay}"
OffContent="{DynamicResource disable}"
OnContent="{DynamicResource enable}"
Style="{DynamicResource SideToggleSwitch}" />
<TextBlock Style="{StaticResource Glyph}">
&#xeb91;
</TextBlock>
@ -1774,7 +1771,6 @@
<ui:ToggleSwitch
Grid.Row="0"
Grid.Column="2"
Width="100"
IsOn="{Binding UseGlyphIcons, Mode=TwoWay}"
Style="{DynamicResource SideToggleSwitch}" />
<TextBlock Style="{StaticResource Glyph}">
@ -1905,10 +1901,10 @@
<ui:ToggleSwitch
Grid.Row="0"
Grid.Column="2"
Width="100"
Margin="0,0,22,0"
FlowDirection="RightToLeft"
IsOn="{Binding UseAnimation, Mode=TwoWay}" />
IsOn="{Binding UseAnimation, Mode=TwoWay}"
OffContent="{DynamicResource disable}"
OnContent="{DynamicResource enable}"
Style="{DynamicResource SideToggleSwitch}" />
<TextBlock Style="{StaticResource Glyph}">
&#xedb5;
</TextBlock>
@ -1930,8 +1926,9 @@
<ui:ToggleSwitch
Grid.Row="0"
Grid.Column="2"
Width="100"
IsOn="{Binding UseSound, Mode=TwoWay}"
OffContent="{DynamicResource disable}"
OnContent="{DynamicResource enable}"
Style="{DynamicResource SideToggleSwitch}" />
<TextBlock Style="{StaticResource Glyph}">
&#xe994;