WPF ControlTemplate 仿QQ概念版CheckBox
2012-06-08 13:19
337 查看
QQ概念版是腾讯用WPF精心打造的创新型IM产品,界面做的自然是比较不错,只不过实现的功能太少,并且对运行的平台限制太多(只能是Windows7),现在已经没什么消息了。
先贴图:
![](http://my.csdn.net/uploads/201208/13/1344866847_8952.png)
控件选中后弹出的勾用图片来代替,并有动画效果。
下面为CheckBox的Style代码:
先贴图:
![](http://my.csdn.net/uploads/201208/13/1344866847_8952.png)
控件选中后弹出的勾用图片来代替,并有动画效果。
下面为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>
相关文章推荐
- ControlTemplate in WPF —— Checkbox
- ControlTemplate in WPF —— Checkbox
- ControlTemplate in WPF —— TabControl
- WPF中的模板(四)- 寻找ControlTemplate和DataTemplate的控件
- wpf如何获取control template里的元素
- WPF知识点--自定义Button(ControlTemplate控件模板)
- WPF : ControlTemplate和DataTemplate的区别
- ControlTemplate in WPF —— Menu
- WPF中的ControlTemplate(控件模板)
- WPF之ControlTemplate
- WPF之ControlTemplate控件模板
- WPF中的数据模板使用方式之一:ContentControl、ContentTemplate和TemplateSelector的使用
- WPF中的ControlTemplate(控件模板)
- WPF中ControlTemplate,ItemsPanelTemplate ,DataTemplate
- WPF中的ControlTemplate(控件模板)
- ControlTemplate in WPF —— Window
- ControlTemplate in WPF —— Calendar
- ControlTemplate in WPF —— Expander
- WPF中的控件模板(ControlTemplate)
- WPF Template模版之DataTemplate与ControlTemplate的关系和应用【二】