WPF 自定义CheckBox-阿里云开发者社区

WPF 自定义CheckBox

2016-08-17 1236

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： WPF中原始的CheckBox样式很简单，有时候不适用于WPF那种炫酷的界面。本章节讲述如何设计一个匹配业务需要、好看的CheckBox（继上篇《WPF-自定义ListBox》中的CheckBox样式） CheckBox的样式如下： ...

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

本章节讲述如何设计一个匹配业务需要、好看的CheckBox（继上篇《WPF-自定义ListBox》中的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="5" RadiusX="5"></Rectangle>
                                        </Border>
                                        <Grid x:Name="CheckedMark">
                                            <Path Visibility="Visible" Width="14" Height="14" SnapsToDevicePixels="False"
StrokeThickness="2" Data="M1,6 L7,12">
                                                <Path.Stroke>
                                                    <SolidColorBrush Color="White" />
                                                </Path.Stroke>
                                            </Path>
                                            <Path Visibility="Visible" Width="14" Height="14"
SnapsToDevicePixels="False" StrokeThickness="2" 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="0"
Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
Value="{x:Static Visibility.Collapsed}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
Storyboard.TargetName="CheckedMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0"
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>

是不是很简单呢~哈哈

作者：唐宋元明清2188

出处： http://www.cnblogs.com/kybs0/

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。

WPF 自定义CheckBox

热门文章

最新文章

相关电子书