Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

当前位置: 银光首页 > Silverlight > Silverlight学习教程 >

Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates

时间:2010-04-19 11:28来源:SilverlightChina.Net 作者:jv9 点击:次
上篇，介绍了控件样式（Style）和模板（Template）的基础概念，并且演示了使用Blend设计控件样式。本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate。ControlTemplate可以称为控件模板，简单的理解为控件结构和行为的集合。在项目设计中，经常会使用Contro
　　
代码

1 <UserControl.Resources>
2 <Style x:Key="ButtonStyle1" TargetType="Button">
3 <Setter Property="Template">
4 <Setter.Value>
5 <ControlTemplate TargetType="Button">
6 <Grid>
7 <VisualStateManager.VisualStateGroups>
8 <VisualStateGroup x:Name="CommonStates">
9 <VisualStateGroup.Transitions>
10 <VisualTransition From="Normal" GeneratedDuration="0:0:0.3" To="MouseOver"/>
11 <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.3" To="Normal"/>
12 <VisualTransition From="Pressed" GeneratedDuration="0:0:0.3" To="MouseOver"/>
13 </VisualStateGroup.Transitions>
14 <VisualState x:Name="Disabled">
15 <Storyboard>
16 <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
17 <ColorAnimation Duration="0" To="#FF7BC4F3" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
18 </Storyboard>
19 </VisualState>
20 <VisualState x:Name="Normal"/>
21 <VisualState x:Name="MouseOver">
22 <Storyboard>
23 <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
24 <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
25 <ColorAnimation Duration="0" To="#FF2377AD" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
26 </Storyboard>
27 </VisualState>
28 <VisualState x:Name="Pressed">
29 <Storyboard>
30 <ColorAnimation Duration="0" To="#FF09283B" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
31 </Storyboard>
32 </VisualState>
33 </VisualStateGroup>
34 </VisualStateManager.VisualStateGroups>
35 <Rectangle x:Name="rectangle" RadiusY="20" RadiusX="20" Stroke="White" StrokeThickness="8">
36 <Rectangle.Fill>
37 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
38 <GradientStop Color="#FFF0F5FD" Offset="0"/>
39 <GradientStop Color="#FF009CFF" Offset="1"/>
40 </LinearGradientBrush>
41 </Rectangle.Fill>
42 </Rectangle>
43 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
44 </Grid>
45 </ControlTemplate>
46 </Setter.Value>
47 </Setter>
48 </Style>
49 </UserControl.Resources>

我们简单的添加一个Button点击事件，来测试新创建的Button控件。

选中Button控件，在右边Properties属性栏上面，点击Events



Blend会列出该控件所有的Events事件，这里我们选中Click，双击后，在主设计窗口会切换到后台代码cs编辑界面. Blend自动创建Button控件Click事件方法，



我们在btDemo_Click中添加简单代码

1 private void btDemo_Click(object sender, System.Windows.RoutedEventArgs e)
2 {
3 // TODO: Add event handler implementation here.
4 btDemo.Content = "我是测试按钮";
5 }

F5测试，点击Button，会发现控件文本标签内容被修改。也说明我们创建的ControlTemplate已经继承了所有Button的功能。

至此，一个自定义ControlTemplate控件模板创建完毕。

如果您在开发设计过程中遇到问题，欢迎留言给我。

项目源代码