您的位置:首页 > 其它

WPF ControlTemplate 仿QQ概念版CheckBox

2012-06-08 13:19 337 查看
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>










                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: