滑动CheckBox样式
<Style x:Key="SliderCheckBox" TargetType="{x:Type CheckBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value=""/>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="StoryboardIsChecked">
<ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="CheckFlag" To="#FF60B771" Duration="00:00:0.2"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckFlag" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Right</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardIsCheckedOff">
<ColorAnimation Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="CheckFlag" To="#FFC7CAC7" Duration="00:00:0.2"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckFlag" Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Left</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator Background="Transparent" SnapsToDevicePixels="true" HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Border x:Name="ForegroundPanel" Background="#FF839594" BorderThickness="" Width="" Height="" CornerRadius="" BorderBrush="#DDDDDD" VerticalAlignment="Center"/>
<Ellipse Fill="#FFC7CAC7" x:Name="CheckFlag" VerticalAlignment="Center" Width="" Height="">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
<ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
</StackPanel>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="Padding" Value=""/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="BeginStoryboardCheckedTrue" Storyboard="{StaticResource StoryboardIsChecked}" />
<RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedFalse" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Trigger.EnterActions>
<BeginStoryboard x:Name="BeginStoryboardCheckedFalse" Storyboard="{StaticResource StoryboardIsCheckedOff}" />
<RemoveStoryboard BeginStoryboardName="BeginStoryboardCheckedTrue" />
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


滑动CheckBox样式的更多相关文章
- css 滑动按钮样式
<div class="pub_switch_box"> <input type="checkbox" id="pub_switch ...
- CSS控制checkbox样式
原文地址:http://www.xiumu.org/technology/style-checkboxes-with-css.shtml#comments Checkbox复选框是一个可能每一个网站都 ...
- WPF:定制Checkbox样式,让“正确”绿得好看,让“错误”红的显眼
WPF提供了样式.模板.触发器.状态管理.矢量形状等方式,让我们不需要背景图片,也可以轻松定制控件的风格样式.下面是笔者针对Checkbox进行的样式定制,让“正确”绿得好看,让“错误”红的显眼. ...
- 用css改变默认的checkbox样式
自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...
- WPF 自定义CheckBox样式
自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...
- WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局
本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- [转]Android中自定义checkbox样式
android中自定义checkbox的图片和大小 其实很简单,分三步: 1.在drawable中创建文件checkbox_selector.xml: <?xml version=" ...
随机推荐
- ImageNet Classification with Deep Convolutional Neural Networks(译文)转载
ImageNet Classification with Deep Convolutional Neural Networks Alex Krizhevsky, Ilya Sutskever, Geo ...
- ARMV8 datasheet学习笔记3:AArch64应用级体系结构之Synchronization and semapores
1.前言 本文主要介绍原子变量的实现原理,对原子变量的修改有一套特殊的机制 2. Local monitor和Global monitor UP时执行Load EX和Store EX时仅需关注Loca ...
- ubuntu 的 apt-get update 出现404错误时,或者添加ppa失败时,ubuntu 版本也 end of life 了的解决方案
xmodulo.com/how-to-fix-apt-get-update-error-on-ubuntu.html 如果是依赖没找到,可以用 sudo apt-get install -f 先补齐依 ...
- python模块介绍- binascii:二进制和ASCII互转以及其他进制转换
20.1 binascii:二进制和ASCII互转作用:二进制和ASCII互相转换. Python版本:1.5及以后版本 binascii模块包含很多在二进制和ASCII编码的二进制表示转换的方法.通 ...
- n个随机变量中第k小值的期望
Problem 有\(n\)个相互独立的取值在\([0,1]\)的随机变量,问其中第\(k\)小的变量期望是多少? Solution 之前pkuwc的神仙找我换友链,让我受宠若惊.. 我今天突然翻到他 ...
- 前端实现商品sku属性选择
一.效果图 二.后台返回的数据格式 [{ "saleName": "颜色", "dim": 1, "saleAttrList&qu ...
- Go语言规格说明书 之 通道 发送语句(send) 和 接收操作符(receive)
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
- python在windows下安装
打开python官方网站:https://www.python.org/downloads/ 点击下载 翻到底下的file目录下 选择对应的32,64位系统进行安装 一般来说选择Windows x86 ...
- html5手机 input file 上传图片 调用API
<input type="file" accept="video/*;capture=camcorder"> <input type=&quo ...
- vue scoped 穿透_vue 修改内部组件样式问题
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...