WPF ControlTemplate 仿QQ概念版CheckBox

来源:互联网 发布:青岛知豆租赁 怎么样 编辑:程序博客网 时间:2024/05/16 08:14

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>