zoukankan      html  css  js  c++  java
  • WPF 自定义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>

    是不是很简单呢~哈哈

  • 相关阅读:
    【官网翻译】性能篇(四)为电池寿命做优化——使用Battery Historian分析电源使用情况
    【官网翻译】性能篇(三)为电池寿命做优化——概述
    【官网翻译】性能篇(二)通过线程提高性能
    Mybatis+Struts2的结合:实现用户插入和查找
    在安装mysql出现的错误以及解决方法
    关于PHP的内置服务器的使用
    误用.Net Redis客户端CSRedisCore,自己挖坑自己填
    dotnet代码管理之密钥分离策略
    dotnetcore三大Redis客户端对比和使用心得
    生产环境(基于docker)故障排除? 有感于博客园三番五次翻车
  • 原文地址:https://www.cnblogs.com/kybs0/p/5779181.html
Copyright © 2011-2022 走看看