WPF 基础控件之 ToggleButton 样式

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView
11.Menu
12.PasswordBox
13.TextBox
14.RadioButton

ToggleButton  实现下面的效果

58a60ece30d22dbca612130920ba571e.png

1)ToggleButton来实现动画;

  • Border嵌套 Ellipse并设置TranslateTransform ,当选中CheckedTranslateTransform.XTo = 20Ellipse从左侧移动到右侧。

  • 动画完成时将Border.Background背景色更改为深色PrimaryNormalSolidColorBrush

<ResourceDictionary.MergedDictionaries><ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/><ResourceDictionary Source="../Themes/Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Focusable" Value="False" /><Setter Property="Cursor" Value="Hand"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border x:Name="PART_Border"Width="40"Height="20"Background="{DynamicResource BaseSolidColorBrush}"CornerRadius="10"><Ellipse x:Name="PART_Ellipse" Width="16" Height="16"Margin="2,0"VerticalAlignment="Center" HorizontalAlignment="Left"Fill="{DynamicResource WindowForegroundColorBrush}"><Ellipse.RenderTransform><TranslateTransform/></Ellipse.RenderTransform></Ellipse><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CheckStates"><VisualState x:Name="Checked"><Storyboard><DoubleAnimation Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="20" Duration="00:00:.3"EasingFunction="{StaticResource CubicEaseInOut}"/></Storyboard></VisualState><VisualState x:Name="Unchecked"><Storyboard><DoubleAnimation Storyboard.TargetName="PART_Ellipse"Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" To="0" Duration="00:00:.3"EasingFunction="{StaticResource CubicEaseInOut}"/></Storyboard></VisualState><VisualState x:Name="Indeterminate" /></VisualStateGroup></VisualStateManager.VisualStateGroups></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource PrimaryNormalSolidColorBrush}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

2)Styles.ToggleButton.xaml 代码如下;

<WrapPanel Margin="0,10"><ToggleButton/><ToggleButton Margin="10,0" IsEnabled="False"/><ToggleButton IsChecked="True"/></WrapPanel>

Nuget Install-Package WPFDevelopers.Minimal

6e4ce89e34ea6657241243cf3ea1dba3.gif

[1][2]

参考资料

[1]

GitHub: https://github.com/WPFDevelopersOrg

[2]

Gitee: https://gitee.com/WPFDevelopersOrg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286776.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

反射调用 java bean的set和get方法

v一、使用java.beans.PropertyDescriptor import java.beans.IntrospectionException; import java.beans.PropertyDescriptor; import java.lang.reflect.Field; import java.lang.reflect.Method;public class PropertyUtil {private static final String SET_PREFIX "…

八、后台与数据库(IVX 快速开发教程)

八、后台与数据库 在 iVX 中 数据库 作为数据存储仓库&#xff0c;通过 数据库 可以永久性存储存储数据&#xff0c;而 后台服务 起到数据传输作用&#xff0c;将 数据库 的数据传输到前台页面之中&#xff0c;页面再使用这些数据。 文章目录八、后台与数据库8.1.1 数据库添加…

Android Studio开发环境搭建准备

Android Studio 是一个Android开发环境&#xff0c;基于IntelliJ IDEA. 类似 Eclipse ADT&#xff0c;Android Studio 提供了集成的 Android 开发工具用于开发和调试。 Android Studio开发环境搭建前&#xff0c;我们需要进行安装前的准备工作&#xff0c;本篇以在Windows 7平台…

九、二手信息站点后台完成 (IVX 快速开发教程)

九、二手信息站点后台完成 了解完后台实现后&#xff0c;我们开始为该二手商品站点完成完成后台制作。 文章目录九、二手信息站点后台完成9.1.1 完成二手信息站点注册功能9.1.2 完成二手信息站点登录功能9.1.3 完成商品发布功能9.1.4 首页信息获取9.1.5 详情页内容9.1.1 完成二…

爬虫是什么?起什么作用?

【爬虫】 如果把互联网比作一张大的蜘蛛网&#xff0c;数据便是放于蜘蛛网的各个节点&#xff0c;而爬虫就是一只小蜘蛛&#xff0c;沿着网络抓取自己得猎物&#xff08;数据&#xff09;。这种解释可能更容易理解&#xff0c;官网的&#xff0c;就是下面这个。 爬虫是一种自动…

oneproxy检测主从复制同步延迟

Q:为什么要实现读写分离延迟检测&#xff1f; A:就好比你在ATM机存钱&#xff0c;你老婆收到短信后乐呵呵的拿网银APP查看&#xff0c;结果钱没过来。其实钱已经到账了&#xff0c;只是查询的ATM机节点钱还没过来。所以我们dba要监控数据&#xff0c;一旦发现钱没有复制到另一A…

.NET 分表分库动态化处理

介绍本期主角:ShardingCore 一款ef-core下高性能、轻量级针对分表分库读写分离的解决方案&#xff0c;具有零依赖、零学习成本、零业务代码入侵我不是efcore怎么办这边肯定有小伙伴要问有没有不是efcore的,我这边很确信的和你讲有并且适应所有的ADO.NET包括sqlhelperShardingCo…

addEventListener 的事件函数的传递【转载】

addEventListener 参数如下&#xff1a; addEventListener(type, listener[, useCapture]); type&#xff0c;事件名称listener&#xff0c;事件处理器useCapture&#xff0c;是否捕获一直把 listener 记成是响应函数&#xff0c;function 类型。相信很多人也是这么理解的。多数…

Android之elevation实现阴影效果

1 需求 需要控件实现阴影效果 2 实现 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"andr…

十、小程序实战 (IVX 快速开发教程)

十、小程序实战 使用小程序完成一个二手信息站点与 WebApp 实现流程类型&#xff0c;只是部分内容使用了微信小程序特有的组件&#xff0c;例如微信登录与 WebApp 略有差别&#xff0c;其它逻辑实现较为类似。我们先制作页面&#xff0c;之后再实现功能。 由于之前已经完成了…

源代码下载 第六章 注解式控制器详解

2019独角兽企业重金招聘Python工程师标准>>> 源代码请到附件中下载。 其他下载&#xff1a; 跟着开涛学SpringMVC 第一章源代码下载 第二章 Spring MVC入门 源代码下载 Controller接口控制器详解 源代码下载 源码下载——第四章 Controller接口控制器详解——跟着开…

WPF|快速添加新手引导功能(支持MVVM)

阅读导航前言案例一案例二案例三&#xff08;本文介绍的方式&#xff09;如何使用&#xff1f;控件如何开发的&#xff1f;总结1. 前言案例一站长分享过 眾尋 大佬的一篇 WPF 简易新手引导 一文&#xff0c;新手引导的效果挺不错的&#xff0c;如下图&#xff1a;该文给出的代码…

三、界面介绍(IVX快速手册)

三、集成开发环境界面介绍 通过本节你将了解 iVX 在线集成开发环境 界面&#xff0c;快速建立对 在线集成开发环境 的认识。 文章目录三、集成开发环境界面介绍3.1 界面区域3.2 舞台3.3 组件工具栏3.4 对象树/素材面板3.5 属性面板3.6 菜单面板3.7 逻辑工具面板3.8 辅助工具3.…

Android studio之提示Failed to resolve: com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46

1、错误提示如下 Failed to resolve: com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.46 Show in Project Structure dialog Affected Modules: app2、解决办法 在project的build.gradle里面加入 maven { url https://jitpack.io }

【VB测绘程序设计】第二章 VB测绘程序基础

第一节 数据类型 VB中提供了以下11中基本的数据类型: 一、数值型 二、字符串 三、日期型 1.界面设计 2. 代码 <

React-引领未来的用户界面开发框架-读书笔记(六)

第12章 服务端渲染 想让搜索引擎抓取到你的站点&#xff0c;服务端渲染这一步不可或缺&#xff0c;服务端渲染还可以提升站点的性能&#xff0c;因为在加载JavaScript脚本的同时&#xff0c;浏览器就可以进行页面渲染。 React的虚拟DOM是其可被用于服务端渲染的关键。首先每个R…

TrimPath - Js模板引擎

当页面中引用template.js文件之后&#xff0c;脚本将创建一个TrimPath对象供你使用。 parseDOMTemplate(elementId,optionalDocument)  //获得模板字符串代码 得到页面中Id为elementId的DOM组件的InnerHTML&#xff0c;将其解析成一个模板&#xff0c;这个返回一个templateOb…

一、iVX简介(IVX 快速开发教程)

一、iVX简介 通过本节你将对 iVX 有一个大致的认识&#xff0c;并且了解 iVX 能够做些什么&#xff0c;有哪一些优势&#xff0c;这将帮助你更好的上手 iVX 进行应用的开发&#xff0c;初步了解 iVX 的强大之处。 文章目录一、iVX简介1.1 iVX 是什么&#xff1f;1.2 iVX适合怎…