CheckBox自定义样式
效果:

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自定义样式的更多相关文章
- xamarin android checkbox自定义样式
xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...
- WPF CheckBox 自定义样式
WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...
- android中checkbox自定义样式
1.首先res/drawable中定义checkbox_style.xml样式: <?xml version="1.0" encoding="utf-8" ...
- html中checkbox自定义样式(css版本)
<span class="choose"><input type="checkbox" class="input_check&quo ...
- CSS3 radio 或checkbox 自定义 样式
.style-radio {position:relative;width:15px;height:15px;outline:none;} .style-radio:after {position:a ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- 【转】WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等 本文主要内容: CheckBox复选框的自定义样式,有两种不同的风格实现: RadioB ...
- checkbox、radio设置自定义样式
老生常谈,做一个简单的记录.浏览器自带的checkbox和radio样式可能不符合项目要求,通常要做一些自定义样式设置,目前基本的解决思路都是将input[type=checkbox/radio]隐藏 ...
- 自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可 ...
随机推荐
- JS对象 神奇的Math对象,提供对数据的数学计算。注意:Math 对象是一个固有的对象,无需创建它,直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别
Math对象 Math对象,提供对数据的数学计算. 使用 Math 的属性和方法,代码如下: <script type="text/javascript"> var m ...
- windows使用cmd查看、杀死进程
查看某个进程: netstat -ano | findstr 端口号 杀死某个进程: taskkill /f /pid 进程号
- linq语句,常用的查询,模糊查询,实体查询
查询: //List是要查询的实体列表的集合 List.FindAll(n => n.NAME == NAME), //NAME变量是要查询的条件 模糊查询 List.FindAll(s ...
- MySQL - 锁等待超时与information_schema的三个表
引用地址:https://blog.csdn.net/J080624/article/details/80596958 回顾一下生产中的一次MySQL异常,Cause: java.sql.SQLExc ...
- CF431E Chemistry Experiment
题意:有n个试管,有高度为hi的水银.操作1:将试管x中的水银高度改成y.操作2:将体积为v的水注入试管,求水位的高度?n,q<=1e5. 标程: #include<bits/stdc++ ...
- 阿里云ECS发送邮件失败
阿里云发送SMTP邮件失败 N多测试发现 阿里云服务器不能用25端口发邮件,配置465端口阿里云发送邮件是成功的 修改mail.rc 里的smtp 端口为465 配置如下 set from=*** ...
- Windows shutdown
用法: shutdown [/i | /l | /s | /sg | /r | /g | /a | /p | /h | /e | /o] [/hybrid] [/soft] [/fw] [/f] ...
- Objective-C 中的 Meta-class 是什么?
在这篇文章中,我关注的是 Objective-C 中的一个陌生的概念-- meta-class.在 Objective-C 中的每个类都有一个相关联的 meta-class,但是你很少会直接使用 me ...
- ajax跨域获取网站json数据
由于自己的公司的项目需要调用视频地址 1:当为链接时:直接在播放器用数据库查找的地址 2:当为外部链接时:直接用window.location.href('数据库查找的地址') 3:当为H5链接时:使 ...
- Vue-组件详解
转载:https://segmentfault.com/a/1190000015199363 查看原文站点,更多扩展内容及更佳阅读体验! 组件详解 组件与复用 Vue组件需要注册后才可以使用.注册有全 ...