WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
最新资讯 | 百度新闻 | GOOGLE地图 | RSS订阅 | 更多
热搜：
更多>>
 
您所在的位置： 程序员俱乐部 > 编程开发 > .NET > WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼

WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼

 2014/10/30 13:01:07  心梦缘  程序员俱乐部  我要评论(0)
  • 摘要：WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。下面是笔者针对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。本文提供了两种风格，如果不是很适应自己系统的整体风格，可以对样式代码进行修改。（1）普通风格资源样式代码：<Stylex:Key="CheckStyle1"TargetType="{x:TypeCheckBox}"><
  • 标签：正确 错误

    WPF提供了样式、模板、触发器、状态管理、矢量形状等方式，让我们不需要背景图片，也可以轻松定制控件的风格样式。下面是笔者针对Checkbox进行的样式定制，让“正确”绿得好看，让“错误”红的显眼。
    本文提供了两种风格，如果不是很适应自己系统的整体风格，可以对样式代码进行修改。

（1）普通风格
 

资源样式代码：

class="brush:csharp;gutter:true;">  <Style x:Key="CheckStyle1" TargetType="{x:Type CheckBox}">
                <Setter Property="Height" Value="40"/>
                <Setter Property="Width" Value="70"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                                <DockPanel>
                                    <Border x:Name="CheckFlag"  HorizontalAlignment="Left" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                        <Grid>
                                            <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                  Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                            </Path>
                                            <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                  Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                            </Path>
                                        </Grid>
                                    </Border>

                                    <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                </DockPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver"></VisualState>
                                        <VisualState x:Name="Pressed"></VisualState>
                                        <VisualState x:Name="Disabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate"></VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#89b601" Offset="0.0"/>
                                                <GradientStop Color="#73a80c" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="正确"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>

                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#edb200" Offset="0.0"/>
                                                <GradientStop Color="#ed9e00" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="错误"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

　　

主界面Checkbox控件对样式引用代码：

<CheckBox Style="{StaticResource CheckStyle1}"/>

　　

（2）左右滑动风格

资源样式代码：

           <Style x:Key="CheckStyle2" TargetType="{x:Type CheckBox}">
                <Setter Property="Height" Value="40"/>
                <Setter Property="Width" Value="70"/>
                <Setter Property="Foreground" Value="White"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type CheckBox}">
                            <Border x:Name="ForegroundPanel" CornerRadius="4" BorderBrush="#d4d5d5" BorderThickness="1" Padding="0">
                                <DockPanel>
                                    <Border x:Name="CheckFlag"  HorizontalAlignment="Left" VerticalAlignment="Center" CornerRadius="10" Margin="10,0,0,0" BorderThickness="1" Width="20" Height="20">
                                        <Grid>
                                            <Path Visibility="Collapsed" Width="20" Height="20" x:Name="CheckMark" SnapsToDevicePixels="False"  StrokeThickness="2"
                                                  Stroke="White" Fill="White" Data="M 5 7 L 7 15 L 18 2 L 17 2 L 7 14 L 6 7 L 5 7">
                                            </Path>
                                            <Path Visibility="Collapsed"  Width="20"  Height="20" x:Name="InderminateMark" SnapsToDevicePixels="False" StrokeThickness="3"
                                                  Stroke="White" Data="M 5 5 L 15 15 M 5 15 L 15 5">
                                            </Path>
                                        </Grid>
                                    </Border>

                                    <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" />
                                </DockPanel>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver"></VisualState>
                                        <VisualState x:Name="Pressed"></VisualState>
                                        <VisualState x:Name="Disabled" />
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CheckStates">
                                        <VisualState x:Name="Checked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="CheckMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unchecked">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="InderminateMark">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Indeterminate"></VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Border>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#89b601" Offset="0.0"/>
                                                <GradientStop Color="#73a80c" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="正确"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#559800"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>

                                <Trigger Property="IsChecked" Value="False">
                                    <Setter TargetName="ForegroundPanel" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                                <GradientStop Color="#edb200" Offset="0.0"/>
                                                <GradientStop Color="#ed9e00" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="Content" Property="Text" Value="错误"/>
                                    <Setter TargetName="CheckFlag" Property="Background" Value="#F64708"></Setter>
                                    <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/>
                                    <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

主界面Checkbox控件对样式引用代码：

<CheckBox Style="{StaticResource CheckStyle2}"/>

　　

上一篇： 【看后请推荐】程序员接私单不传秘籍之一二合编：加料更新与补充 下一篇： Java的最大优势是保守的设计思想
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
Android SDK 安卓失败 提示： “Failed to fetch URL…” 的错误提示
Android : <com.mobeta.android.dslv.DragSortListView-引用自定义控件包名错误
初次创业的人必须避免的30个错误
hadoop2.2.0 搭建时错误提示

发表评论
用户名: 匿名

最新文章
WPF：定制Checkbox样式，让“正确”绿得好看，让“错误”红的显眼
WPF：定制C..
精选9个值得学习的 HTML5 效果【附源码】
精选9个值得学..

最新标签
  • 高手
  • 大型网站
  • 天猫
  • 回溯
  • 循环
  • class
  • instance
  • Win8
  • 美图秀秀
  • 摄像头

    • 今日热点

    推荐文章
    【共享】流程图控件
    【共享】流程图..
    C# String.Format用法
    C# Stri..