设计产品网站推荐,外贸行业建站,wordpress 返回顶部代码,单人做网站需要掌握哪些知识文章目录 1、案例运行效果2、项目准备2、功能实现1、控件模板实现2、控件封装1、目录与文件创建2、各文件功能实现 3、开关界面与主窗体菜单实现1、开关界面实现2、主窗体菜单实现 4、源代码获取 1、案例运行效果 2、项目准备
打开项目 Wpf_Examples#xff0c;新建ToggleBut… 文章目录 1、案例运行效果2、项目准备2、功能实现1、控件模板实现2、控件封装1、目录与文件创建2、各文件功能实现 3、开关界面与主窗体菜单实现1、开关界面实现2、主窗体菜单实现 4、源代码获取 1、案例运行效果 2、项目准备
打开项目 Wpf_Examples新建ToggleButtonWindow.xmal 文件,这里没有 Wpf_Examples 项目的可以看下前面章节WPFMVVM案例实战三- 动态数字卡片效果实现 详细介绍了项目创建过程。
2、功能实现
1、控件模板实现
开关按钮基于CheckBox 按钮基础上修改控件模板实现。 ToggleButtonWindow.xaml 界面代码如下
Window x:ClassWpf_Examples.Views.ToggleButtonWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:localclr-namespace:Wpf_Examples.Viewsmc:IgnorabledTitleToggleButtonWindow Height450 Width800 Background#2B2B2BWindow.ResourcesStyle x:KeyToggleSwitchStyleChangeAnimate TargetTypeCheckBoxSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeCheckBoxStackPanel OrientationHorizontalGridBorder CornerRadius22 Width80 Height44 BackgroundLightGray/Border CornerRadius18 x:Namebutton Width36 Height36 HorizontalAlignmentLeft//Grid/StackPanelControlTemplate.ResourcesStoryboard x:KeytoLeftStoryboardThicknessAnimation Storyboard.TargetPropertyMargin Storyboard.TargetNamebutton From40,0,0,0 To4,0,0,0 Duration0:0:0:0.3!--增加缓动处理让切换效果更加平滑--ThicknessAnimation.EasingFunctionCubicEase EasingModeEaseInOut//ThicknessAnimation.EasingFunction/ThicknessAnimation/StoryboardStoryboard x:KeytoRightStoryboardThicknessAnimation Storyboard.TargetPropertyMargin Storyboard.TargetNamebutton From4,0,0,0 To40,0,0,0 Duration0:0:0:0.3!--增加缓动处理让切换效果更加平滑--ThicknessAnimation.EasingFunctionCubicEase EasingModeEaseInOut//ThicknessAnimation.EasingFunction/ThicknessAnimation/Storyboard/ControlTemplate.ResourcesControlTemplate.TriggersTrigger PropertyIsChecked ValueFalseTrigger.EnterActionsRemoveStoryboard BeginStoryboardNameright/BeginStoryboard Storyboard{StaticResource toLeftStoryboard} x:Nameleft//Trigger.EnterActionsSetter TargetNamebutton PropertyBackground Value#737373//TriggerTrigger PropertyIsChecked ValueTrueTrigger.EnterActionsRemoveStoryboard BeginStoryboardNameleft/BeginStoryboard Storyboard{StaticResource toRightStoryboard} x:Nameright//Trigger.EnterActionsSetter TargetNamebutton PropertyBackground Value#25DC2D//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style/Window.ResourcesGrid HorizontalAlignmentCenterCheckBox 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 PropertyTemplateSetter.ValueControlTemplate TargetTypeCheckBoxStackPanel OrientationHorizontalGridBorder Width{TemplateBinding Width} Height{TemplateBinding Height} CornerRadius{TemplateBinding Height,Converter{StaticResource ToggleSwitchConverter},ConverterParameterOutSideCorner}BackgroundLightGray/Border x:Namebutton CornerRadius{TemplateBinding Height,Converter{StaticResource ToggleSwitchConverter},ConverterParameterInSideCorner}Width{TemplateBinding Height,Converter{StaticResource ToggleSwitchConverter},ConverterParameterButtonSize}Height{TemplateBinding Height,Converter{StaticResource ToggleSwitchConverter},ConverterParameterButtonSize}HorizontalAlignmentLeft//Grid/StackPanelControlTemplate.TriggersTrigger PropertyIsChecked ValueFalseSetter TargetNamebutton PropertyBackground Value#737373//TriggerTrigger PropertyIsChecked ValueTrueSetter TargetNamebutton PropertyBackground 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.Durationnew Duration (TimeSpan.FromSeconds(0.3));animation.EasingFunctionnew CircleEase { EasingMode EasingMode.EaseOut };if (isChecked){animation.From new Thickness(4, 0, 0, 0);animation.Tonew 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:ClassWpf_Examples.Views.ToggleButtonWindowxmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:ccclr-namespace:CustomControlLib;assemblyCustomControlLibxmlns:localclr-namespace:Wpf_Examples.Viewsmc:IgnorabledTitleToggleButtonWindow Height450 Width800 Background#2B2B2BWindow.ResourcesStyle x:KeyToggleSwitchStyleChangeAnimate TargetTypeCheckBoxSetter PropertyTemplateSetter.ValueControlTemplate TargetTypeCheckBoxStackPanel OrientationHorizontalGridBorder CornerRadius22 Width80 Height44 BackgroundLightGray/Border CornerRadius18 x:Namebutton Width36 Height36 HorizontalAlignmentLeft//Grid/StackPanelControlTemplate.ResourcesStoryboard x:KeytoLeftStoryboardThicknessAnimation Storyboard.TargetPropertyMargin Storyboard.TargetNamebutton From40,0,0,0 To4,0,0,0 Duration0:0:0:0.3!--增加缓动处理让切换效果更加平滑--ThicknessAnimation.EasingFunctionCubicEase EasingModeEaseInOut//ThicknessAnimation.EasingFunction/ThicknessAnimation/StoryboardStoryboard x:KeytoRightStoryboardThicknessAnimation Storyboard.TargetPropertyMargin Storyboard.TargetNamebutton From4,0,0,0 To40,0,0,0 Duration0:0:0:0.3!--增加缓动处理让切换效果更加平滑--ThicknessAnimation.EasingFunctionCubicEase EasingModeEaseInOut//ThicknessAnimation.EasingFunction/ThicknessAnimation/Storyboard/ControlTemplate.ResourcesControlTemplate.TriggersTrigger PropertyIsChecked ValueFalseTrigger.EnterActionsRemoveStoryboard BeginStoryboardNameright/BeginStoryboard Storyboard{StaticResource toLeftStoryboard} x:Nameleft//Trigger.EnterActionsSetter TargetNamebutton PropertyBackground Value#737373//TriggerTrigger PropertyIsChecked ValueTrueTrigger.EnterActionsRemoveStoryboard BeginStoryboardNameleft/BeginStoryboard Storyboard{StaticResource toRightStoryboard} x:Nameright//Trigger.EnterActionsSetter TargetNamebutton PropertyBackground Value#25DC2D//Trigger/ControlTemplate.Triggers/ControlTemplate/Setter.Value/Setter/Style/Window.ResourcesGrid HorizontalAlignmentCenterStackPanel OrientationVerticalCheckBox Style{StaticResource ToggleSwitchStyleChangeAnimate} Margin0 20 0 20/cc:ToggleSwitch Width80 Height44 Foreground#3CC330 Margin0 20 0 20/cc:ToggleSwitch Width100 Height60 Foreground#E72114//StackPanel/Grid
/Window
上面我保留了原来的样式然后也使用了封装控件的方式来展示相同效果。自定义控件可以通过改变属性设置轻松实现不同按钮大小和选中颜色的设置而模板样式只能实现一种效果。
2、主窗体菜单实现
MainWindow.xaml 菜单中添加新的按钮代码如下 GridWrapPanelButton Width100 Height30 FontSize18 Content开关按钮 Command{Binding ButtonClickCmd} CommandParameter{Binding RelativeSource{RelativeSource ModeSelf},PathContent} Margin8//WrapPanel/GridMainViewModel.cs 的菜单功能按钮添加新的页面弹窗代码如下 case 开关按钮:PopWindow(new ToggleButtonWindow());break;4、源代码获取
CSDN 资源下载链接自定义开关控件封装实现
