chore: add show label property for toggle button.

src/Shared/HandyControlDemo_Shared/UserControl/Styles/ToggleButtonDemoCtl.xaml

@@ -118,6 +118,10 @@
                             <ToggleButton IsChecked="True" Margin="5,9" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch}" hc:VisualElement.HighlightBrush="{DynamicResource DangerBrush}"/>
                             <ToggleButton IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,9" Style="{StaticResource ToggleButtonSwitch}"/>
                         </StackPanel>
+                        <StackPanel>
+                            <ToggleButton hc:ToggleButtonAttach.ShowLabel="True" Content="Switch" Margin="5,9" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch}" hc:VisualElement.HighlightBrush="{DynamicResource DangerBrush}" />
+                            <ToggleButton hc:ToggleButtonAttach.ShowLabel="True" Content="Switch" IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,9" Style="{StaticResource ToggleButtonSwitch}" />
+                        </StackPanel>
                         <StackPanel>
                             <ToggleButton BorderThickness="0" IsChecked="True" Margin="5" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonFlip}">
                                 <hc:StatusSwitchElement.CheckedElement>
@@ -230,6 +234,10 @@
                             <ToggleButton IsChecked="True" Margin="5,8" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch.Small}" hc:VisualElement.HighlightBrush="{DynamicResource DangerBrush}"/>
                             <ToggleButton IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,4" Style="{StaticResource ToggleButtonSwitch.Small}"/>
                         </StackPanel>
+                        <StackPanel>
+                            <ToggleButton hc:ToggleButtonAttach.ShowLabel="True" Content="Switch" Margin="5,8" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch.Small}" hc:VisualElement.HighlightBrush="{DynamicResource DangerBrush}" />
+                            <ToggleButton hc:ToggleButtonAttach.ShowLabel="True" Content="Switch" IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,4" Style="{StaticResource ToggleButtonSwitch.Small}" />
+                        </StackPanel>
                         <StackPanel>
                             <ToggleButton BorderThickness="0" IsChecked="True" Margin="5" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonFlip.Small}">
                                 <hc:StatusSwitchElement.CheckedElement>

src/Shared/HandyControl_Shared/Controls/Attach/ToggleButtonAttach.cs

@@ -0,0 +1,14 @@
+using HandyControl.Data;
+using System.Windows;
+
+namespace HandyControl.Controls;
+
+public class ToggleButtonAttach
+{
+    public static readonly DependencyProperty ShowLabelProperty = DependencyProperty.RegisterAttached(
+        "ShowLabel", typeof(bool), typeof(ToggleButtonAttach), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.Inherits));
+
+    public static void SetShowLabel(DependencyObject element, bool value) => element.SetValue(ShowLabelProperty, ValueBoxes.BooleanBox(value));
+
+    public static bool GetShowLabel(DependencyObject element) => (bool) element.GetValue(ShowLabelProperty);
+}

src/Shared/HandyControl_Shared/HandyControl_Shared.projitems

@@ -29,6 +29,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\RectangleAttach.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\ScrollViewerAttach.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\TextBlockAttach.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\ToggleButtonAttach.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Base\AdornerElement.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Block\FloatingBlock.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Block\RunningBlock\RunningBorder.cs" />

src/Shared/HandyControl_Shared/Themes/Styles/Base/ToggleButtonBaseStyle.xaml

@@ -105,97 +105,80 @@
             </Setter.Value>
         </Setter>
         <Setter Property="hc:VisualElement.HighlightBrush" Value="{DynamicResource PrimaryBrush}" />
+        <Setter Property="hc:VisualElement.HighlightForeground" Value="{DynamicResource SecondaryBorderBrush}" />
         <Setter Property="Background" Value="{DynamicResource SecondaryRegionBrush}"/>
         <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
         <Setter Property="BorderThickness" Value="0"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
-        <Setter Property="Padding" Value="6,0,0,0"/>
+        <Setter Property="Padding" Value="6,0,0,0" />
-        <Setter Property="Width" Value="36"/>
+        <Setter Property="Height" Value="24"/>
-        <Setter Property="Height" Value="22"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">
                     <ControlTemplate.Resources>
                         <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 KeyTime="0:0:0.2" Value="32">
                                     <EasingDoubleKeyFrame.EasingFunction>
-                                        <PowerEase EasingMode="EaseOut"/>
+                                        <CubicEase EasingMode="EaseInOut"/>
                                     </EasingDoubleKeyFrame.EasingFunction>
                                 </EasingDoubleKeyFrame>
                             </DoubleAnimationUsingKeyFrames>
                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1" />
                             </DoubleAnimationUsingKeyFrames>
-                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="innerBorder">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
+                                <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="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"/>
+                                        <CubicEase EasingMode="EaseInOut" />
                                     </EasingDoubleKeyFrame.EasingFunction>
                                 </EasingDoubleKeyFrame>
                             </DoubleAnimationUsingKeyFrames>
                             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
+                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
                             </DoubleAnimationUsingKeyFrames>
-                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
+                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="innerBorder">
-                                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
+                                <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>
+                    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
-                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
+                        <Grid.ColumnDefinitions>
-                            <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition />
-                                <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
-                            </Grid.ColumnDefinitions>
+                        <Viewbox>
-                            <Border Height="22" Width="36" x:Name="backBorder" Background="{DynamicResource BorderBrush}" CornerRadius="11"/>
+                            <hc:SimplePanel Width="80" Height="48">
-                            <Border Grid.Column="0" Height="22" Width="36" Opacity="0" x:Name="lightBorder" Background="{Binding Path=(hc:VisualElement.HighlightBrush),RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="11" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
+                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="24" Name="innerBorder">
-                            <Border Grid.Column="0" Height="20" Margin="1" Background="{TemplateBinding Background}" CornerRadius="11" Name="innerBorder" RenderTransformOrigin=".8,0.5">
+                                    <hc:ToggleBlock HorizontalAlignment="Right" Margin="0 0 12 0" IsChecked="{Binding Path=(hc:ToggleButtonAttach.ShowLabel),RelativeSource={RelativeSource TemplatedParent}}">
-                                <Border.RenderTransform>
+                                        <hc:ToggleBlock.CheckedContent>
-                                    <TransformGroup>
+                                            <Ellipse Width="16" Height="16" StrokeThickness="2" Stroke="{Binding Path=(hc:VisualElement.HighlightForeground),RelativeSource={RelativeSource TemplatedParent}}" />
-                                        <ScaleTransform/>
+                                        </hc:ToggleBlock.CheckedContent>
-                                    </TransformGroup>
+                                    </hc:ToggleBlock>
-                                </Border.RenderTransform>
+                                </Border>
-                            </Border>
+                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="lightBorder" Background="{Binding Path=(hc:VisualElement.HighlightBrush),RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="24">
-                            <hc:SimplePanel Grid.Column="0" Margin="1">
+                                    <hc:ToggleBlock HorizontalAlignment="Left" Margin="18 0 0 0" IsChecked="{Binding Path=(hc:ToggleButtonAttach.ShowLabel),RelativeSource={RelativeSource TemplatedParent}}">
-                                <Border HorizontalAlignment="Left" CornerRadius="10" Name="thumb" Effect="{StaticResource EffectShadow2}" Background="White" Width="20" Height="20" RenderTransformOrigin="0.5,0.5">
+                                        <hc:ToggleBlock.CheckedContent>
+                                            <Rectangle Width="2" Height="16" Fill="{DynamicResource TextIconBrush}" />
+                                        </hc:ToggleBlock.CheckedContent>
+                                    </hc:ToggleBlock>
+                                </Border>
+                                <Border Margin="2" HorizontalAlignment="Left" CornerRadius="22" Name="thumb" Effect="{StaticResource EffectShadow2}" Background="White" Width="44" Height="44" RenderTransformOrigin="0.5,0.5">
                                     <Border.RenderTransform>
                                         <TransformGroup>
-                                            <TranslateTransform/>
+                                            <TranslateTransform />
                                         </TransformGroup>
                                     </Border.RenderTransform>
                                 </Border>
                             </hc:SimplePanel>
-                            <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}"/>
+                        </Viewbox>
-                        </Grid>
+                        <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}" />
-                    </Viewbox>
+                    </Grid>
                     <ControlTemplate.Triggers>
                         <Trigger Property="HasContent" Value="true">
                             <Setter Property="Visibility" TargetName="contentPresenter" Value="Visible"/>

src/Shared/HandyControl_Shared/Themes/Styles/ToggleButton.xaml

@@ -196,8 +196,8 @@
         <Setter Property="VerticalAlignment" Value="Center"/>
         <Setter Property="Padding" Value="0"/>
         <Setter Property="BorderThickness" Value="1"/>
-        <Setter Property="Height" Value="30"/>
+        <Setter Property="Height" Value="{StaticResource DefaultControlHeight}"/>
-        <Setter Property="Width" Value="30"/>
+        <Setter Property="Width" Value="{StaticResource DefaultControlHeight}"/>
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="ToggleButton">