效果:

xmal代码:

 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Height" Value="25"/>
<Setter Property="IsChecked" Value="False"/>
<Setter Property="Margin" Value="0,20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
<Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
<Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
<Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
</Grid>
</Grid>
<TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
<Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

加上动画的xaml代码

 <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="False" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}" />
<Setter Property="Height" Value="25"/>
<Setter Property="IsChecked" Value="{Binding IsChecked}"/>
<Setter Property="Margin" Value="0,20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="aaaa">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
<Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
<Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
<Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
<Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
<Grid.RenderTransform>
<RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>
</Grid.RenderTransform>
</Grid>
</Grid>
<TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
<Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
<Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
</Trigger>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard HandoffBehavior="SnapshotAndReplace">
<Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">
<DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

摘自:https://www.cnblogs.com/kybs0/p/5850733.html

CheckBox自定义样式的更多相关文章

  1. xamarin android checkbox自定义样式

    xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...

  2. WPF CheckBox 自定义样式

    WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...

  3. android中checkbox自定义样式

    1.首先res/drawable中定义checkbox_style.xml样式: <?xml version="1.0" encoding="utf-8" ...

  4. html中checkbox自定义样式(css版本)

    <span class="choose"><input type="checkbox" class="input_check&quo ...

  5. CSS3 radio 或checkbox 自定义 样式

    .style-radio {position:relative;width:15px;height:15px;outline:none;} .style-radio:after {position:a ...

  6. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  7. 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...

  8. checkbox、radio设置自定义样式

    老生常谈,做一个简单的记录.浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏 ...

  9. 自定义input[type="checkbox"]的样式

    对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...

随机推荐

  1. 手写代码注意点 -- HashMap

    1.定义 HashMap<String,String> hashMap = new HashMap<>(); <String,String>只需要写一遍 2.获取k ...

  2. MYSQL - 外键、约束、多表查询、子查询、视图、事务

    MYSQL - 外键.约束.多表查询.子查询.视图.事务 关系 创建成绩表scores,结构如下 id 学生 科目 成绩 思考:学生列应该存什么信息呢? 答:学生列的数据不是在这里新建的,而应该从学生 ...

  3. day28 import,from * import *,__name__

    Python之路,Day16 = Python基础16 一 module通常模块为一个文件,直接使用import来导入就好了.可以作为module的文件类型有".py"." ...

  4. python相关软件安装流程图解——虚拟机操作——复制虚拟机主机——CentOS-7-x86_64-DVD-1810

    请先确保已经安装了虚拟机 python相关软件安装流程图解——虚拟机安装——CentOS-7-x86_64-DVD-1810——CentOS-01下载 https://www.cnblogs.com/ ...

  5. js--判断当前环境是否为app环境

    /** *判断是否是app环境 */ function getIsApp () { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/ ...

  6. django2 rest_framework + vue.js + mysql5.6 实现增删改查

    1.安装pymysql,mysqlclient,创建项目django-admin startproject django3 2.在Mysql中创建一个数据库叫django3db,打开项目,修改一下数据 ...

  7. 前后端分离+本地服务实时刷新+缓存管理+接口proxy+静态资源增量更新+各种性能优化+上线运维发布——gulp工作流搭建

    技巧集:http://www.gulpjs.com.cn/docs/recipes/ 其实无非就是利用各种gulp插件.node脚本对项目文件做各种IO操作,只是备忘,需要的话,还是自己重新写最合适. ...

  8. Mysql优化系列之查询优化干货1

    从这一篇开始,准备总结一些直接受用的sql语句优化,写sql是第二要紧的,第一要紧的,是会分析怎么查最快, 因为当你写过很多sql后,查询出结果已经不是目标,快,才是目标.另外,通过测试和比较的结果才 ...

  9. pycharm IDE在导入自定义模块时提示有错,但实际没错

    在建立python项目时,有时为了区分资源和代码,如在项目文件夹下新建img和src两个文件夹,这时导入自定义模块会提示错误,结果没错但感觉别扭.如: 这是因为pycharm提示功能是从根目录上去寻找 ...

  10. ES6和常用特性归纳

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0. ECMAS ...