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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

含蓄的酸菜鱼 · C++将std:vector中的16进制的数 ...· 2 月前 ·

帅气的甘蔗 · 【推荐】Python教父-廖雪峰 ...· 10 月前 ·

重情义的毛巾 · yaml-cpp Tutorial - 知乎· 1 年前 ·

文质彬彬的野马 · 有没有办法防止ScrollView在Text ...· 1 年前 ·

风流倜傥的高山 · layui首页logo一般放在哪里-掘金· 1 年前 ·

    <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="Height" Value="25"/>
        <Setter Property="IsChecked" Value="False"/>
        <Setter Property="Margin" Value="0,20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
                            <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
                                <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
                            </Grid>
                        </Grid>
                        <TextBlock Grid.Column="1" Text="AAAA" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

当然如果需要点动画的话，可以添加个Strory，也是不错的。

EventTrigger ，设置事件触发源如Click，Mouse.MouseEnter

有意思的是 HandoffBehavior 属性，其默认值 SnapshotAndReplace

SnapshotAndReplace 新动画将替换它们所应用到的属性上的任何现有动画 -- 即新动画立即替换原有动画

Compose 将通过把新动画追加到组合链的末尾来组合新动画和现有动画- - 即完成原有动画后，再执行新动画

    <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="Height" Value="25"/>
            <Setter Property="IsChecked" Value="{Binding IsChecked}"/>
        <Setter Property="Margin" Value="0,20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CheckBox">
                    <Grid x:Name="aaaa">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Height}">
                            <Rectangle x:Name="CheckBoxRectangle" Fill="LightSkyBlue" Opacity="0.3" RadiusY="5" RadiusX="5"/>
                            <Rectangle x:Name="CheckBoxRectangleOut" Stroke="#FF06DAD1" StrokeThickness="1" RadiusY="5" RadiusX="5"/>
                                <Grid x:Name="CheckedMark" Width="20" Height="20" Visibility="Collapsed">
                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M1,9 L10,17" Stroke="White"/>
                                    <Path SnapsToDevicePixels="False" StrokeThickness="3" Data="M8,17 L20,4" Stroke="White"/>
                                    <Grid.RenderTransform>
                                        <RotateTransform x:Name="CheckBoxTransform" Angle="0" CenterX="10" CenterY="10"></RotateTransform>
                                    </Grid.RenderTransform>
                                </Grid>
                            </Grid>
                        <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="18" Foreground="White" VerticalAlignment="Center" Margin="14,0,0,0"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="CheckedMark" Property="Visibility" Value="Visible"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Fill" Value="#FF00A8E0"></Setter>
                            <Setter TargetName="CheckBoxRectangle" Property="Opacity" Value="1"></Setter>
                            <Setter TargetName="CheckBoxRectangleOut" Property="Stroke" Value="Transparent"></Setter>
                        </Trigger>
                        <EventTrigger RoutedEvent="Click">
                            <BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                                <Storyboard TargetName="CheckBoxTransform" TargetProperty="Angle">
                                    <DoubleAnimation From="0" To="360" Duration="0:0:0.1"></DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

顺带可浏览下， CheckBox的布局显示

关键字：CheckBox，HandoffBehavior

作者：唐宋元明清2188

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

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

原文:WPF QuickStart系列之样式和模板(Style and Template) 在WPF桌面程序中，当我们想构建一个统一的UI表现时(在不同操作系统下，显示效果一致)，此时我们就需要使用到WPF中的样式和模板技术。

原文:WPF自定义控件（二）の重写原生控件样式模板话外篇：要写一个圆形控件，用Clip，重写模板，去除样式引用圆形图片可以有这三种方式。　　开发过程中，我们有时候用WPF原生的控件就能实现自己的需求，但是样式、风格并不能满足我们的需求，那么我们该怎么办呢？----自定义样式与模板。

WPF 使用 WindowChrome，在自定义窗口标题栏的同时最大程度保留原生窗口样式（类似 UWP/Chrome）

原文:分享一个WPF下日历控件（Calendar）的样式 WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑，要修改其样式看起来挺复杂的，实际上很简单，用Blend打开，修改三个模板，基本就能改变全部面貌，也很容易样式如下：

原文:WPF中样式和行为和触发器样式简介：样式(style)是组织和重用格式化选项的重要工具，不是使用重复的标记填充XAML，以便设置外边距、内边距、颜色以及字体等细节。而是创建一系列封装所有这些细节的样式，然后在需要之处通过属性来设置样式。