Checkbox 模板和样式

时间:2022-06-12 23:44:53
     <Style TargetType="{x:Type CheckBox}">
<Setter Property="FontFamily" Value="Microsoft YaHei" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Background" Value="{DynamicResource ButtonBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ButtonBorder}" />
<Setter Property="Foreground" Value="{DynamicResource WindowText}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="LayoutRoot" Margin="{TemplateBinding Padding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="CheckBorder" Width="16" Height="16" Margin="0,1,4,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Path x:Name="CheckMark"
Width="10" Height="10"
Margin="2"
Data="F1M15,21L22,28 32.9999,14.0001 35.9999,17.0001 22,34 12.0001,24 15,21z"
Fill="{TemplateBinding Foreground}"
Stretch="Fill" Visibility="Collapsed" />
<Rectangle x:Name="Indeterminate" Width="8" Height="8" Margin="4" Fill="{TemplateBinding Foreground}" Visibility="Hidden" />
</Grid>
</Border>
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Focusable="False" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsThreeState, RelativeSource={RelativeSource Self}}" Value="True" />
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Foreground" Value="{DynamicResource ButtonTextDisabled}" />
<Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Indeterminate" Property="Visibility" Value="Visible" />
</MultiDataTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource ButtonTextDisabled}" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckMark" Property="Visibility" Value="Visible" />
<Setter TargetName="Indeterminate" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="CheckBorder" Property="Background" Value="{DynamicResource ButtonBackgroundHover}" />
<Setter TargetName="CheckBorder" Property="BorderBrush" Value="{DynamicResource ButtonBorderHover}" />
<Setter TargetName="CheckMark" Property="Fill" Value="{DynamicResource ButtonTextHover}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="CheckBorder" Property="Background" Value="{DynamicResource ButtonBackgroundPressed}" />
<Setter TargetName="CheckBorder" Property="BorderBrush" Value="{DynamicResource ButtonBorderPressed}" />
<Setter TargetName="CheckMark" Property="Fill" Value="{DynamicResource ButtonTextPressed}" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="CheckBorder" Property="BorderBrush" Value="{DynamicResource Accent}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

应用

 <CheckBox Content="checkbox"/>

Checkbox 模板和样式

引用:

https://msdn.microsoft.com/zh-cn/library/ms752319(v=vs.110).aspx

一些疑点将会在后期补充

Checkbox 模板和样式的更多相关文章

  1. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  2. 《Programming WPF》翻译 第5章 5&period;数据模板和样式

    原文:<Programming WPF>翻译 第5章 5.数据模板和样式 让我们想象一下我们想要实现TTT更有娱乐性的一个版本(这是大部分游戏中最重要的特色).例如,TTT的一种变体允许玩 ...

  3. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  4. 自定义checkbox, radio样式

    17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...

  5. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  6. 修改 input&lbrack;type&equals;&quot&semi;radio&quot&semi;&rsqb; 和 input&lbrack;type&equals;&quot&semi;checkbox&quot&semi;&rsqb; 的默认样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  7. 表单:checkbox、radio样式(用图片换掉默认样式)

    checkbox.radio样式(用图片换掉默认样式) <!doctype html> <html> <head> <meta charset="u ...

  8. 微信小程序修改radio和checkbox的默认样式和图标

    wxml: <view class="body"> <view class="body-content"> 第1题:企业的价值观是 ? ...

  9. 自定义checkbox, radio样式总结

    任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现 ...

随机推荐

  1. javascript中数组去重的4种方法

    面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...

  2. MySQL执行存储过程权限

    http://url.cn/f2bj78 MySQL grant不能在on后面写多个对象

  3. spring bean id和bean name的区别

    今天在分析问题时发现一个大家平时都不太注意的spring 配置问题,发出来分享下: 首先澄清一个概念: 同名bean:多个bean 有相同的 name 或者 id,称之为同名bean <bean ...

  4. AMD规范基本结构

    AMD规范:使用 define 和 require ,基本结构如下: // 定义模块 define(['moduleA', 'moduleB', 'moduleC'], function (modul ...

  5. Microsoft &period;NET Framework 3&period;5 for Windowns Server2012R2 GUI

    图形化安装,需要安装盘,不需要网络连接

  6. CentOS 7 安装和配置JDK

    1.下载linux版的JDk 2.cd /usr/local 目录下,上传刚刚下载jdk文件 3.rpm -ivh jdk-8u111-linux-x64.rpm 4.设置环境变量 找到profile ...

  7. 基于分支限界法的旅行商问题(TSP)二

    和上篇一样,考前写写伪代码,考完了补上具体的解释和代码. 状态{矩阵,结果集,下界} 全局结果集列表,全局上界初始为Infinite 建立一个heap,存储状态,出堆规则为拥有最小的下界. 利用red ...

  8. Django进阶之中间件

    中间件简介 django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在djang ...

  9. 雷林鹏分享:XML Parser

    XML Parser 所有现代浏览器都有内建的 XML 解析器. XML 解析器把 XML 文档转换为 XML DOM 对象 - 可通过 JavaScript 操作的对象. 解析 XML 文档 下面的 ...

  10. ADO对Excel对象进行连接时的 两种方法区别

    在通过ADO对Excel对象进行连接时(此时Excel则认为是一个数据源),需要配置对Excel数据源对应的连接串,这个连接串中包括了Provider信息(其实类似对数据库进行连接操作时,都需要指定连 ...