WPF-CheckBox(复选框、功能开关)美化
老规矩，先放图
按钮美化背景：
由于特殊需求，复选框样式单一，所以我们需要将其按钮重构和美化达到我们的需求
复选框美化思维引导：
图中1为背景色
图中2为边框
图中3为句柄控件组成（Path+Rectangle）
图4为TextBlock控件
由此我们可以推算出该控件大致需要Border+Grid+Path+Rectangle+TextBlock这几个控件完成
<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/>
<Setter Property="BorderBrush" Value="#ACACAC"/>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value=""/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid x:Name="templateRoot" Width="{TemplateBinding Width}" Background="Transparent" HorizontalAlignment="Left" SnapsToDevicePixels="True" Margin="0,0,0,-0.333">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="checkBoxBorder" BorderBrush="#ACACAC" VerticalAlignment="Center" HorizontalAlignment="Center" BorderThickness="" CornerRadius="" Width="" Height="">
<Grid x:Name="markGrid" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="-1" Width="21.666" Height="">
<Path x:Name="optionMark" Data="M16.000603,1.957344 L7.5364196,14.557344 7.2530439,14.557344 0,8.309296 2.0478247,5.63464 6.8253337,9.741328 13.367244,2.441408E-05 16.000603,1.957344 z" Fill="#FFFBFBFB" Margin="" Opacity="" Stretch="None" VerticalAlignment="Center" Height="{TemplateBinding Height}" d:LayoutOverrides="Width" HorizontalAlignment="Center" Width="{TemplateBinding Height}" />
<Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="0,-0.834" Opacity="" Width="Auto" Height="Auto" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Border>
<TextBlock x:Name="contentPresenter" FontSize="{TemplateBinding FontSize}" Text="{TemplateBinding Content}" Grid.Column="" Focusable="False" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2,0,0,0" FontFamily="iconfont"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/>
<Setter Property="Padding" Value="4,-1,0,0"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#5FB878"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/>
<Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
<Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Border}"/>
<Setter Property="Fill" TargetName="optionMark" Value="#FFFFFF"/>
<Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Opacity" TargetName="optionMark" Value=""/>
<Setter Property="Background" TargetName="checkBoxBorder" Value="#5FB878"/>
<Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#5FB878"/>
<Setter Property="Opacity" TargetName="indeterminateMark" Value=""/>
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Opacity" TargetName="optionMark" Value=""/>
<Setter Property="Opacity" TargetName="indeterminateMark" Value=""/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontFamily" Value="iconfont"/>
<Setter Property="FontSize" Value=""/>
</Style>
开关按钮美化思维引导图：
图中1为Border控件
图2为TextBlock控件
图3为Border控件
由此我们可以得出开关按钮是由CheckBox重构出来的并且有Border+TextBlock组合完成
开关按钮代码为：
<Style x:Key="CheckBoxSwitchStyle" TargetType="CheckBox">
<Setter Property="IsChecked" Value="False"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontFamily" Value="/MESToolIntegration;component/Fonts/#iconfont"/>
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Border Width="" Name="CheckTrueBG" Height="" BorderThickness="" Background="#FFFFFF" CornerRadius="" BorderBrush="#ACACAC" >
<Grid>
<Border BorderThickness="" Background="#ACACAC" x:Name="border" Width="" Height="" CornerRadius="" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="" >
<Border.RenderTransform>
<TranslateTransform X=""/>
</Border.RenderTransform>
</Border>
<TextBlock x:Name="txt" Text="{TemplateBinding Content}" FontFamily="iconfont" FontSize="{TemplateBinding FontSize}" Margin="6.996,2.798,0,2.798" VerticalAlignment="Stretch" Foreground="#ACACAC" HorizontalAlignment="Left" d:LayoutOverrides="Height" >
<TextBlock.RenderTransform>
<TranslateTransform X=""></TranslateTransform>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="CheckTrueBG" Value="#5FB878"/>
<Setter Property="Foreground" TargetName="txt" Value="#FFFFFF"/>
<Setter Property="Background" TargetName="border" Value="#FFFFFF"/>
<Setter Property="Text" TargetName="txt" Value="{Binding Tag,RelativeSource={RelativeSource TemplatedParent}}"/>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="" Duration="00:00:0.2"/>
<DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="" Duration="00:00:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="" Duration="00:00:0.2"/>
<DoubleAnimation Storyboard.TargetName="txt" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" To="" Duration="00:00:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Text" TargetName="txt" Value="{Binding Content,RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
注意：
开关按钮比较特殊使用方法：
<CheckBox HorizontalAlignment="Left" BorderThickness="1,1,0,1" Margin="107,242,0,0" Style="{DynamicResource CheckBoxSwitchStyle}" VerticalAlignment="Top" Content="OFF" Tag="NO" />
WPF-CheckBox(复选框、功能开关)美化的更多相关文章
- css input checkbox复选框控件 样式美化的多种方案
checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- checkbox复选框样式
随着现代浏览器的流行,纯CSS设置checkbox也变的很是实用,下面会讲到5种与众不同的checkbox复选框. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要 ...
- 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- CSS学习笔记三：自定义单选框，复选框，开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- 小物件之checkbox复选框
有时候需要输出一组checkbox复选框,并且做根据选定元素将其选中的功能,以往都要在模板中循环输出checkbox标签,同时加以判断是否需要选中,这样就会造成很多开始闭合标签 以前都是这样写 现在我 ...
- ZH奶酪：纯CSS自定义Html中Checkbox复选框样式
原文链接:http://www.lrxin.com/archives-683.html 首先看下效果: 点击演示地址查看实例. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变 ...
- CheckBox复选框控件
CheckBox复选框控件 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2 ...
- gridcontrol复选框功能实现（超具体）
博主这几天就准备离职了,以后不再做.Net开发.因此这应该是我写的最后一篇关于dev控件的博文.既然是最后一篇,那就写的具体一些.画个圆满的省略号...... 本文介绍gridcontrol怎样实现复 ...
随机推荐
- 開啟活動監視器 (SQL Server Management Studio)
本主題描述如何開啟 [活動監視器] 來取得有關 SQL Server 處理序以及這些處理序如何影響目前 SQL Server 執行個體的資訊. 此外,本主題也描述如何設定 [活動監視器] 的重新整理間 ...
- [K/3Cloud] 创建一个操作校验器
概念: 定义了一个校验器对象,通常是添加到业务单据操作服务插件,用于对操作的合法性进行校验.继承自校验器抽象对象AbstractValidator. 示例: 新建一个类,继承自AbstractVali ...
- [K3Cloud] QueryService使用注意事项
QueryServlice是目前查询数据非常好用的服务,但目前在使用过程中由于使用不当产生不少问题,下面将一一解答: 1.在查询一些实体关键字段如实体主键.分录序号时,条件中的别名怎么会变来变去? ...
- 餐巾（cogs 461）
[问题描述] 一个餐厅在相继的N天里,第i天需要Ri块餐巾(i=l,2,…,N).餐厅可以从三种途径获得餐巾. (1)购买新的餐巾,每块需p分: (2)把用过的餐巾送到快洗部,洗一块需m天,费用需f分 ...
- 【ZJOI2017 Round1练习】D8T2 sequence（DP）
题意: 思路: #include <algorithm> #include <iostream> #include <cstring> #include <c ...
- HDU——3072 Intelligence System
Intelligence System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- 计蒜客15430 XOR Queries（Trie处理位运算问题）
题意: 给出一个长度为n的数组C,回答m个形式为(L, R, A, B)的询问, 含义为存在多少个不同的数组下标k属于[L, R]满足C[k] XOR A >= B(式中XOR为异或运算). T ...
- Ubuntu 16.04 GNOME在桌面左侧添加启动器（Launcher）
安装Dash to Dock: git clone https://github.com/micheleg/dash-to-dock.git cd dash-to-dock/ make make in ...
- Cts框架解析(2)-cts调试环境的搭建
上一篇文章中说了怎样在windows搭建cts以及执行cts进行測试.这篇文章来讲讲怎样在eclipse中配置源代码,进行debug调试. 下载 cts源代码地址:https://android.go ...
- IntelliJ IDEA在行尾增加分号
IntelliJ IDEA在行尾增加分号 Ctrl+Shift+Enter - 本身的含义是自动完成,如果需要的话,会在行尾添加分号: