WPF+MVVM案例实战（八）- 自定义开关控件封装实现

---

1、案例运行效果

2、项目准备

打开项目 Wpf_Examples，新建ToggleButtonWindow.xmal 文件,这里没有 Wpf_Examples 项目的可以看下前面章节，WPF+MVVM案例实战（三）- 动态数字卡片效果实现 详细介绍了项目创建过程。

2、功能实现

1、控件模板实现

开关按钮基于CheckBox 按钮基础上修改控件模板实现。
ToggleButtonWindow.xaml 界面代码如下

<Window x:Class="Wpf_Examples.Views.ToggleButtonWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:Wpf_Examples.Views"mc:Ignorable="d"Title="ToggleButtonWindow" Height="450" Width="800" Background="#2B2B2B"><Window.Resources><Style x:Key="ToggleSwitchStyleChangeAnimate" TargetType="CheckBox"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><StackPanel Orientation="Horizontal"><Grid><Border CornerRadius="22" Width="80" Height="44" Background="LightGray"/><Border CornerRadius="18" x:Name="button" Width="36" Height="36" HorizontalAlignment="Left"/></Grid></StackPanel><ControlTemplate.Resources><Storyboard x:Key="toLeftStoryboard"><ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" From="40,0,0,0" To="4,0,0,0" Duration="0:0:0:0.3"><!--增加缓动处理，让切换效果更加平滑--><ThicknessAnimation.EasingFunction><CubicEase EasingMode="EaseInOut"/></ThicknessAnimation.EasingFunction></ThicknessAnimation></Storyboard><Storyboard x:Key="toRightStoryboard"><ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" From="4,0,0,0" To="40,0,0,0" Duration="0:0:0:0.3"><!--增加缓动处理，让切换效果更加平滑--><ThicknessAnimation.EasingFunction><CubicEase EasingMode="EaseInOut"/></ThicknessAnimation.EasingFunction></ThicknessAnimation></Storyboard></ControlTemplate.Resources><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="False"><Trigger.EnterActions><RemoveStoryboard BeginStoryboardName="right"/><BeginStoryboard Storyboard="{StaticResource toLeftStoryboard}" x:Name="left"/></Trigger.EnterActions><Setter TargetName="button" Property="Background" Value="#737373"/></Trigger><Trigger Property="IsChecked" Value="True"><Trigger.EnterActions><RemoveStoryboard BeginStoryboardName="left"/><BeginStoryboard Storyboard="{StaticResource toRightStoryboard}" x:Name="right"/></Trigger.EnterActions><Setter TargetName="button" Property="Background" Value="#25DC2D"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid HorizontalAlignment="Center"><CheckBox Style="{StaticResource ToggleSwitchStyleChangeAnimate}"/></Grid>
</Window>

2、控件封装

1、目录与文件创建

首先在自定义控件库 CustomControlLib 中新建一个 ToggleSwitch.cs 文件，在创建一个 Converters 文件夹，创建 ToggleSwitchConverter.cs 文件，这里用来做数据转换使用。如下图所示：

2、各文件功能实现

首先我们先实现开关按钮的样式定义，将前面 ToggleButtonWindow.xaml 中的 Style 样式拷贝到自定义控件的 Generic.xaml 文件中修改后如下所示：

<Style TargetType="{x:Type local:ToggleSwitch}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><StackPanel Orientation="Horizontal"><Grid><Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" CornerRadius="{TemplateBinding Height,Converter={StaticResource ToggleSwitchConverter},ConverterParameter='OutSideCorner'}"Background="LightGray"/><Border x:Name="button" CornerRadius="{TemplateBinding Height,Converter={StaticResource ToggleSwitchConverter},ConverterParameter='InSideCorner'}"Width="{TemplateBinding Height,Converter={StaticResource ToggleSwitchConverter},ConverterParameter='ButtonSize'}"Height="{TemplateBinding Height,Converter={StaticResource ToggleSwitchConverter},ConverterParameter='ButtonSize'}"HorizontalAlignment="Left"/></Grid></StackPanel><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="False"><Setter TargetName="button" Property="Background" Value="#737373"/></Trigger><Trigger Property="IsChecked" Value="True"><Setter TargetName="button" Property="Background" Value="{Binding Foreground,RelativeSource={RelativeSource TemplatedParent}}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

样式代码主要是把按钮的宽高数据值绑定到原有按钮宽高属性上，通过转换器完成不同属性数据值的不同赋值，然后我们实现转换器 ToggleSwitchConverter.cs 的代码，如下所示：

public class ToggleSwitchConverter : IValueConverter
{public object Convert(object value, Type targetType, object parameter, CultureInfo culture){if (value is double height){var property = parameter as string;switch (property){case "ButtonSize":return (height - 8);case "OutSideCorner":return new CornerRadius(height/2);case "InSideCorner":return new CornerRadius((height-8) / 2);}}throw new NotImplementedException();}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){throw new NotImplementedException();}
}

最后,我们在 ToggleSwitch.cs 实现按钮的切换和动画加载功能代码，ToggleSwitch.cs 代码实现如下：

public class ToggleSwitch:CheckBox
{static ToggleSwitch(){DefaultStyleKeyProperty.OverrideMetadata(typeof(ToggleSwitch), new FrameworkPropertyMetadata(typeof(ToggleSwitch)));}public ToggleSwitch(){Checked += ToggleSwitch_Checked;Unchecked += ToggleSwitch_Unchecked;}private void ToggleSwitch_Checked(object sender, RoutedEventArgs e){Animatebutton(true);}private void ToggleSwitch_Unchecked(object sender, RoutedEventArgs e){Animatebutton(false);}private void Animatebutton(bool isChecked){if (GetTemplateChild("button") is Border button){Storyboard storyboard = new Storyboard();ThicknessAnimation animation = new ThicknessAnimation();animation.Duration=new Duration (TimeSpan.FromSeconds(0.3));animation.EasingFunction=new CircleEase { EasingMode = EasingMode.EaseOut };if (isChecked){animation.From = new Thickness(4, 0, 0, 0);animation.To=new Thickness(ActualWidth-(ActualHeight-8)-4, 0, 0, 0);}else{animation.To = new Thickness(4, 0, 0, 0);animation.From = new Thickness(ActualWidth - (ActualHeight - 8) - 4, 0, 0, 0);}Storyboard.SetTarget(animation,button); Storyboard.SetTargetProperty(animation,new PropertyPath(MarginProperty));storyboard.Children.Add(animation);if (isChecked){Resources.Remove("Left");Resources["Right"] = storyboard;}else{Resources.Remove("Right");Resources["Left"] = storyboard;}storyboard.Begin();}}}

3、开关界面与主窗体菜单实现

1、开关界面实现

ToggleButtonWindow.xaml 代码如下所示:

<Window x:Class="Wpf_Examples.Views.ToggleButtonWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:cc="clr-namespace:CustomControlLib;assembly=CustomControlLib"xmlns:local="clr-namespace:Wpf_Examples.Views"mc:Ignorable="d"Title="ToggleButtonWindow" Height="450" Width="800" Background="#2B2B2B"><Window.Resources><Style x:Key="ToggleSwitchStyleChangeAnimate" TargetType="CheckBox"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><StackPanel Orientation="Horizontal"><Grid><Border CornerRadius="22" Width="80" Height="44" Background="LightGray"/><Border CornerRadius="18" x:Name="button" Width="36" Height="36" HorizontalAlignment="Left"/></Grid></StackPanel><ControlTemplate.Resources><Storyboard x:Key="toLeftStoryboard"><ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" From="40,0,0,0" To="4,0,0,0" Duration="0:0:0:0.3"><!--增加缓动处理，让切换效果更加平滑--><ThicknessAnimation.EasingFunction><CubicEase EasingMode="EaseInOut"/></ThicknessAnimation.EasingFunction></ThicknessAnimation></Storyboard><Storyboard x:Key="toRightStoryboard"><ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" From="4,0,0,0" To="40,0,0,0" Duration="0:0:0:0.3"><!--增加缓动处理，让切换效果更加平滑--><ThicknessAnimation.EasingFunction><CubicEase EasingMode="EaseInOut"/></ThicknessAnimation.EasingFunction></ThicknessAnimation></Storyboard></ControlTemplate.Resources><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="False"><Trigger.EnterActions><RemoveStoryboard BeginStoryboardName="right"/><BeginStoryboard Storyboard="{StaticResource toLeftStoryboard}" x:Name="left"/></Trigger.EnterActions><Setter TargetName="button" Property="Background" Value="#737373"/></Trigger><Trigger Property="IsChecked" Value="True"><Trigger.EnterActions><RemoveStoryboard BeginStoryboardName="left"/><BeginStoryboard Storyboard="{StaticResource toRightStoryboard}" x:Name="right"/></Trigger.EnterActions><Setter TargetName="button" Property="Background" Value="#25DC2D"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Window.Resources><Grid HorizontalAlignment="Center"><StackPanel Orientation="Vertical"><CheckBox Style="{StaticResource ToggleSwitchStyleChangeAnimate}" Margin="0 20 0 20"/><cc:ToggleSwitch Width="80" Height="44" Foreground="#3CC330"  Margin="0 20 0 20"/><cc:ToggleSwitch Width="100" Height="60" Foreground="#E72114"/></StackPanel></Grid>
</Window>

上面我保留了原来的样式，然后也使用了封装控件的方式来展示相同效果。自定义控件可以通过改变属性设置，轻松实现不同按钮大小和选中颜色的设置，而模板样式只能实现一种效果。

2、主窗体菜单实现

MainWindow.xaml 菜单中添加新的按钮，代码如下：

 <Grid><WrapPanel><Button Width="100" Height="30" FontSize="18" Content="开关按钮" Command="{Binding ButtonClickCmd}" CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self},Path=Content}" Margin="8"/></WrapPanel></Grid>

MainViewModel.cs 的菜单功能按钮添加新的页面弹窗，代码如下：

 case "开关按钮":PopWindow(new ToggleButtonWindow());break;

4、源代码获取

CSDN 资源下载链接：自定义开关控件封装实现