From 8477771161987bf55807fc221dc0b3c10977bc2d Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Wed, 24 Oct 2018 19:24:51 +0800
Subject: [PATCH] Modified togglebutton style

---
 HandyControl/Themes/Basic/Effects.xaml        |  12 +-
 .../Styles/Base/ToggleButtonBaseStyle.xaml    | 204 ++++++++----------
 .../Styles/ToggleButtonDemoCtl.xaml           |   4 +-
 3 files changed, 97 insertions(+), 123 deletions(-)

diff --git a/HandyControl/Themes/Basic/Effects.xaml b/HandyControl/Themes/Basic/Effects.xaml
index bd866ffe..da3428ff 100644
--- a/HandyControl/Themes/Basic/Effects.xaml
+++ b/HandyControl/Themes/Basic/Effects.xaml
@@ -2,12 +2,12 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">
 
-    <Color x:Key="MaterialDesignShadow">#AA000000</Color>
+    <Color x:Key="EffectShadowColor">#AA000000</Color>
 
-    <DropShadowEffect x:Key="EffectShadow1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
-    <DropShadowEffect x:Key="EffectShadow2" BlurRadius="8" ShadowDepth="1.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
-    <DropShadowEffect x:Key="EffectShadow3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
-    <DropShadowEffect x:Key="EffectShadow4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
-    <DropShadowEffect x:Key="EffectShadow5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
+    <DropShadowEffect x:Key="EffectShadow1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
+    <DropShadowEffect x:Key="EffectShadow2" BlurRadius="8" ShadowDepth="1.5" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
+    <DropShadowEffect x:Key="EffectShadow3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
+    <DropShadowEffect x:Key="EffectShadow4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
+    <DropShadowEffect x:Key="EffectShadow5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
 
 </ResourceDictionary>
\ No newline at end of file
diff --git a/HandyControl/Themes/Styles/Base/ToggleButtonBaseStyle.xaml b/HandyControl/Themes/Styles/Base/ToggleButtonBaseStyle.xaml
index 0dcc05ca..0b7c4c2f 100644
--- a/HandyControl/Themes/Styles/Base/ToggleButtonBaseStyle.xaml
+++ b/HandyControl/Themes/Styles/Base/ToggleButtonBaseStyle.xaml
@@ -4,6 +4,7 @@
 
     <ResourceDictionary.MergedDictionaries>
         <ResourceDictionary Source="ButtonBaseBaseStyle.xaml"/>
+        <ResourceDictionary Source="../../Basic/Effects.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
     <Style x:Key="ToggleButtonBaseStyle" BasedOn="{StaticResource ButtonBaseBaseStyle}" TargetType="{x:Type ToggleButton}">
@@ -50,137 +51,110 @@
         </Style.Triggers>
     </Style>
 
-    <!--引用自https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit-->
-    <Style x:Key="ToggleButtonSwitchBaseStyle" TargetType="{x:Type ToggleButton}">
+    <Style x:Key="ToggleButtonSwitchBaseStyle" TargetType="ToggleButton">
         <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
+        <Setter Property="Background" Value="White"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
         <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
-        <Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
-        <Setter Property="BorderThickness" Value="1"/>
-        <Setter Property="Padding" Value="0 1 0 0"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="VerticalContentAlignment" Value="Center"/>
+        <Setter Property="Padding" Value="6,0,0,0"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type ToggleButton}">
                     <ControlTemplate.Resources>
-                        <SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
-                        <Storyboard x:Key="ShowRipple">
-                            <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
-                                             EasingFunction="{StaticResource RippleEasingFunction}"
-                                             To="0.26" Duration="0"/>
-                            <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
-                                             EasingFunction="{StaticResource RippleEasingFunction}"
-                                             From="1" To="2.5" Duration="0:0:0.2"/>
-                            <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
-                                             EasingFunction="{StaticResource RippleEasingFunction}"
-                                             From="1" To="2.5" Duration="0:0:0.2"/>
+                        <Storyboard x:Key="StoryboardChecked">
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="thumb">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="innerBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
-                        <Storyboard x:Key="HideRipple">
-                            <DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
-                                             EasingFunction="{StaticResource RippleEasingFunction}"
-                                             To="0" Duration="0:0:0.3"/>
+                        <Storyboard x:Key="StoryboardUnChecked">
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="thumb">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="innerBorder">
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
+                                    <EasingDoubleKeyFrame.EasingFunction>
+                                        <PowerEase EasingMode="EaseOut"/>
+                                    </EasingDoubleKeyFrame.EasingFunction>
+                                </EasingDoubleKeyFrame>
+                            </DoubleAnimationUsingKeyFrames>
                         </Storyboard>
                     </ControlTemplate.Resources>
-                    <Viewbox Width="34">
-                        <VisualStateManager.VisualStateGroups>
-                            <VisualStateGroup x:Name="CheckStates">
-                                <VisualStateGroup.Transitions>
-                                    <VisualTransition From="*" To="Checked">
-                                        <Storyboard>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
-                                                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
-                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
-                                                    <EasingDoubleKeyFrame.EasingFunction>
-                                                        <QuadraticEase EasingMode="EaseOut"/>
-                                                    </EasingDoubleKeyFrame.EasingFunction>
-                                                </EasingDoubleKeyFrame>
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualTransition>
-                                    <VisualTransition From="Checked" To="Unchecked">
-                                        <Storyboard>
-                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
-                                                <EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
-                                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
-                                                    <EasingDoubleKeyFrame.EasingFunction>
-                                                        <QuadraticEase EasingMode="EaseOut"/>
-                                                    </EasingDoubleKeyFrame.EasingFunction>
-                                                </EasingDoubleKeyFrame>
-                                            </DoubleAnimationUsingKeyFrames>
-                                        </Storyboard>
-                                    </VisualTransition>
-                                </VisualStateGroup.Transitions>
-                                <VisualState x:Name="Checked">
-                                    <Storyboard>
-                                        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
-                                                         Duration="0" To="23.5" />
-                                    </Storyboard>
-                                </VisualState>
-                                <VisualState x:Name="Unchecked">
-                                    <Storyboard>
-                                        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
-                                                         Duration="0" To="0" />
-                                    </Storyboard>
-                                </VisualState>
-                            </VisualStateGroup>
-                        </VisualStateManager.VisualStateGroups>
-                        <Grid>
-                            <Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
-
-                            <Grid x:Name="ThumbHolder"
-                                  HorizontalAlignment="Left" VerticalAlignment="Top">
-                                <Ellipse x:Name="RippleThumb"
-                                         Fill="{DynamicResource PrimaryBrush}"
-                                         Height="25" Width="25"
-                                         IsHitTestVisible="False"
-                                         Opacity="0.26"
-                                         Margin="0"
-                                         HorizontalAlignment="Center" VerticalAlignment="Center"
-                                         RenderTransformOrigin="0.5,0.5">
-                                    <Ellipse.RenderTransform>
-                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
-                                    </Ellipse.RenderTransform>
-                                </Ellipse>
-                                <AdornerDecorator>
-                                    <Ellipse x:Name="Thumb"
-                                             Fill="#FFFAFAFA" Stroke="{x:Null}" 
-                                             HorizontalAlignment="Center" VerticalAlignment="Center"
-                                             Width="25" Height="25"
-                                             Margin="0,0,0,0"
-                                             RenderTransformOrigin="0.5,0.5"
-                                             Effect="{DynamicResource EffectShadow1}">
-                                    </Ellipse>
-                                </AdornerDecorator>
-                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
-                                                  Margin="{TemplateBinding Padding}"
-                                                  x:Name="ContentPresenter"
-                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
-                                                  FlowDirection="LeftToRight"/>
-                                <Grid.RenderTransform>
-                                    <TranslateTransform X="0" Y="0"/>
-                                </Grid.RenderTransform>
-                            </Grid>
-                        </Grid>
-                    </Viewbox>
+                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Border Height="22" Width="36" x:Name="backBorder" Background="{DynamicResource BorderBrush}" CornerRadius="11"/>
+                        <Border Grid.Column="0" Height="22" Width="36" x:Name="lightBorder" Background="{DynamicResource PrimaryBrush}" CornerRadius="11" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
+                        <Border Grid.Column="0" Margin="1" Background="White" CornerRadius="11" Name="innerBorder" RenderTransformOrigin=".8,0.5">
+                            <Border.RenderTransform>
+                                <TransformGroup>
+                                    <ScaleTransform/>
+                                </TransformGroup>
+                            </Border.RenderTransform>
+                        </Border>
+                        <Canvas Grid.Column="0" Margin="1">
+                            <Border CornerRadius="10" Name="thumb" Effect="{StaticResource EffectShadow2}" Background="White" Width="20" Height="20" RenderTransformOrigin="0.5,0.5">
+                                <Border.RenderTransform>
+                                    <TransformGroup>
+                                        <TranslateTransform/>
+                                    </TransformGroup>
+                                </Border.RenderTransform>
+                            </Border>
+                        </Canvas>
+                        <ContentPresenter x:Name="contentPresenter" Visibility="Collapsed" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
+                    </Grid>
                     <ControlTemplate.Triggers>
-                        <Trigger Property="IsChecked" Value="True">
-                            <Setter TargetName="Thumb" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
-                            <Setter TargetName="Track" Property="Fill" Value="{DynamicResource PrimaryBrush}" />
-                            <Setter Property="Foreground" Value="{DynamicResource SecondaryTextBrush}"/>
+                        <Trigger Property="HasContent" Value="true">
+                            <Setter Property="Visibility" TargetName="contentPresenter" Value="Visible"/>
                         </Trigger>
-                        <Trigger Property="IsChecked" Value="False">
-                            <Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
-                        </Trigger>
-                        <Trigger Property="Button.IsDefaulted" Value="true"/>
-                        <Trigger Property="IsMouseOver" Value="true"/>
-                        <Trigger Property="IsPressed" Value="true">
+                        <Trigger Property="IsChecked" Value="true">
                             <Trigger.EnterActions>
-                                <BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
+                                <BeginStoryboard Storyboard="{StaticResource StoryboardChecked}"/>
                             </Trigger.EnterActions>
                             <Trigger.ExitActions>
-                                <BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
+                                <BeginStoryboard Storyboard="{StaticResource StoryboardUnChecked}"/>
                             </Trigger.ExitActions>
                         </Trigger>
-                        <Trigger Property="IsEnabled" Value="false">
-                            <Setter Property="Opacity" Value="0.4" />
+                        <Trigger Property="IsEnabled" Value="False">
+                            <Setter Property="Opacity" Value="0.4"/>
                         </Trigger>
                     </ControlTemplate.Triggers>
                 </ControlTemplate>
diff --git a/HandyControlDemo/UserControl/Styles/ToggleButtonDemoCtl.xaml b/HandyControlDemo/UserControl/Styles/ToggleButtonDemoCtl.xaml
index b45a17c6..bff21140 100644
--- a/HandyControlDemo/UserControl/Styles/ToggleButtonDemoCtl.xaml
+++ b/HandyControlDemo/UserControl/Styles/ToggleButtonDemoCtl.xaml
@@ -100,8 +100,8 @@
                         <TextBlock TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ToggleButtonCustom"/>
                     </StackPanel>
                     <StackPanel>
-                        <ToggleButton Height="30" IsChecked="True" Margin="5" Style="{StaticResource ToggleButtonSwitch}"/>
-                        <ToggleButton IsEnabled="False" Height="30" IsChecked="True" Margin="5" Style="{StaticResource ToggleButtonSwitch}"/>
+                        <ToggleButton IsChecked="True" Margin="5,9" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch}"/>
+                        <ToggleButton IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,9" Style="{StaticResource ToggleButtonSwitch}"/>
                         <TextBlock Style="{StaticResource TextBlockDefault}" Text="ToggleButtonSwitch"/>
                     </StackPanel>
                 </WrapPanel>