WPF 自定义CheckBox

WPF中原始的CheckBox样式很简单,有时候不适用于WPF那种炫酷的界面。

本章节讲述如何设计一个匹配业务需要、好看的CheckBox(继上篇《WPF-自定义ListBox》中的CheckBox样式)

WPF 自定义CheckBox

CheckBox的样式如下:

<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="Template">
<Setter.Value>
<ControlTemplate>
<BulletDecorator>
<BulletDecorator.Bullet>
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Border x:Name="Border">
<Rectangle Fill="DodgerBlue" RadiusY="" RadiusX=""></Rectangle>
</Border>
<Grid x:Name="CheckedMark">
<Path Visibility="Visible" Width="" Height="" SnapsToDevicePixels="False"
StrokeThickness="" Data="M1,6 L7,12">
<Path.Stroke>
<SolidColorBrush Color="White" />
</Path.Stroke>
</Path>
<Path Visibility="Visible" Width="" Height=""
SnapsToDevicePixels="False" StrokeThickness="" Data="M6,12 L14,2">
<Path.Stroke>
<SolidColorBrush Color="White" />
</Path.Stroke>
</Path>
</Grid>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
<DiscreteObjectKeyFrame KeyTime=""
Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
<DiscreteObjectKeyFrame KeyTime=""
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
<DiscreteObjectKeyFrame KeyTime=""
Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

样式中主要涉及CheckBox的模板,具体设计思路如下:

1、用一个装饰控件BulletDecorator作为根节点

2、然后具体内容,用Retangle画带圆角的正方框,设置背景

3、画俩条线,组装成一个√

4、添加视觉显示,这里用VisualStateManager来控制。当然用普通的触发器Trigger也是可行的

如此样式就设计好了。然后应用到实际的CheckBox中:

<CheckBox IsChecked="True" Height="20" Width="20" Style="{StaticResource CheckBoxStyle}" ></CheckBox>

是不是很简单呢~哈哈

上一篇:Deep learning for visual understanding: A review 视觉理解中的深度学习:回顾 之一


下一篇:MYSQL的索引类型:PRIMARY, INDEX,UNIQUE,FULLTEXT,SPAIAL 区别与使用场合