WPF ControlTemplate 仿QQ概念版CheckBox

最新推荐文章于 2025-06-13 16:01:20 发布

Junwillday

最新推荐文章于 2025-06-13 16:01:20 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF 文章标签： wpf qq border setter windows image

本文链接：https://blog.youkuaiyun.com/Junwillday/article/details/7622204

WPF 专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了如何使用WPF的ControlTemplate模仿QQ概念版的CheckBox样式，包括使用图片展示选中状态并实现动画效果。内容展示了具体的Style代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QQ概念版是腾讯用WPF精心打造的创新型IM产品，界面做的自然是比较不错，只不过实现的功能太少，并且对运行的平台限制太多（只能是Windows7），现在已经没什么消息了。

先贴图：

控件选中后弹出的勾用图片来代替，并有动画效果。

下面为CheckBox的Style代码：

<Style TargetType="{x:Type CheckBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CheckBox">
                        <StackPanel Orientation="Horizontal">
                            <Border BorderBrush="#0C202C" Background="Transparent"
 CornerRadius="3" BorderThickness="2" 
Width="22" Height="22" ClipToBounds="False">
                                <Image x:Name="checkImg" Source="images/check.png" Width="24" HorizontalAlignment="Center"
 VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
                                    <Image.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="0" ScaleY="0"/>
                                            <RotateTransform Angle="0"/>
                                        </TransformGroup>
                                    </Image.RenderTransform>
                                </Image>
                            </Border>
                            <Border Padding="5,0,0,0">
                                <ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Property=ContentControl.Content}"/>
                            </Border>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="CheckBox.IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="2" 
From="0" Duration="0:0:0.2" BeginTime="0:0:0"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="2" From="0" Duration="0:0:0.2" BeginTime="0:0:0"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="1.5" From="2" Duration="0:0:0.1" BeginTime="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="1.5" From="2" Duration="0:0:0.1" BeginTime="0:0:0.2"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[1].Angle" To="30" From="0" Duration="0:0:0.2" AutoReverse="True" BeginTime="0:0:0"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="2" From="1.5" Duration="0:0:0.1" BeginTime="0:0:0"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="2" From="1.5" Duration="0:0:0.1" BeginTime="0:0:0"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" To="0" From="2" Duration="0:0:0.2" BeginTime="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" To="0" From="2" Duration="0:0:0.2" BeginTime="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="checkImg"
 Storyboard.TargetProperty="RenderTransform.Children[1].Angle" To="30" From="0" Duration="0:0:0.1" AutoReverse="True" BeginTime="0:0:0"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>