Expression Blend实例中文教程(13) - 控件模板快速入门ControlTemplates-阿里云开发者社区

开发者社区> 技术小牛人> 正文

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

简介:
+关注继续查看
 
上篇,介绍了控件样式(Style)和模板(Template)的基础概念,并且演示了使用Blend设计控件样式。本篇将继续介绍使用Blend设计自定义控件模板 - ControlTemplate。ControlTemplate可以称为控件模板,简单的理解为控件结构和行为的集合。在项目设计中,经常会使用ControlTemplate创建新的控件模板或者修改现成的控件模板,使用项目的UI具有独特性。如何使用Blend创建和修改ControlTemplate是本文即将讨论的话题。
 
概述
对于ControlTemplate没有一个特定的概念,为了避免过于抽象,可以简单的理解ControlTemplate是通过改变Style改变控件视觉效果的类。ControlTemplate可以被定义在控件的Xaml代码中,为了提高复用性,ControlTemplate也会被定义到资源文件中。
 
实例
学习ControlTemplate最好的方法还是实践,下面,我将使用实例演示使用Blend创建新的控件ControlTemplate。
首先,在Blend中创建新的项目ControlTemplateDemo,上周Silverlight 4发布,我已经升级开发环境到Silverlight 4,VS2010和Blend 4 RC, 所以,以后所有项目演示将是基于.Net Framework 4的。
 
大家会发现Blend 4创建新项目和Blend 3没有太大区别。
我们计划创建一个简单的按钮ControlTemplate,
现在,从左边工具栏选中矩形框,在主设计窗口画一个矩形框,使用Radius修改矩形框边缘为圆形。该矩形框是为了Button的模板控件做基础使用的。
 
然后修改矩形背景和边框颜色,这里大家可以按照自己的喜好和需求自行设置背景色和边框颜色。
 
 然后在主设计窗口选中该矩形控件,点击鼠标右键,选中“Make Into Control..."选项,
 
这个选项是将当前控件转换到指定控件模板中,在以下弹出窗口中,可以选择需要转换的控件类型,从以下窗口可以看出,矩形控件可以转换到所有控件模板中,下面Name是模板样式名称,Define in是创建该资源模板到指定位置。这些和前文教程内容相同,不再赘述。
 
这里,我们使用默认的name,将模板信息放在本地文档资源中,因为我们演示创建按钮controltemplate,所以在点击OK前,必须从上面的窗口中选择“Button”,点击OK后主设计窗口将显示按钮样式。
 
 
到这里一个简单的ControlTemplate已经创建完了。我们打开Objects and Timeline看看当前控件模板组成信息,从下图我们可以看到,该Button模板,是由一个矩形控件和ContentPresenter组成的。
 
再看看该按钮模板代码,从以下代码中可以看出,在资源中,定义了一个新的ControlTemplate,该控件模板目标控件类型是Button( <ControlTemplate TargetType="Button">),ControlTemplate内部由Rectangle和ContentPresenter组成。
 1 <UserControl.Resources>
 2     <Style x:Key="ButtonStyle1" TargetType="Button">
 3         <Setter Property="Template">
 4             <Setter.Value>
 5                 <ControlTemplate TargetType="Button">
 6                     <Grid>
 7                     <Rectangle RadiusY="20" RadiusX="20" Stroke="White" StrokeThickness="8">
 8                         <Rectangle.Fill>
 9                             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
10                                 <GradientStop Color="#FFF0F5FD" Offset="0"/>
11                                 <GradientStop Color="#FF009CFF" Offset="1"/>
12                             </LinearGradientBrush>
13                         </Rectangle.Fill>
14                     </Rectangle>
15                 <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
16                     </Grid>
17                 </ControlTemplate>
18             </Setter.Value>
19         </Setter>
20     </Style>
21 </UserControl.Resources>
 
 
这时,我们可以保存所有修改,点击“F5”运行当前项目。在运行后,可以在浏览器中看到一个Button
但是该Button没有任何的视觉效果和Button事件。也就是说,在这个新的控件模板中,缺少VSM状态信息。根据上一篇Blend控制VSM中可以得知,在Blend中的States菜单栏中,可以轻松的控制控件的VSM状态,下面,我们添加一些简单的状态效果。
首先,选中新创建的Button控件,然后打开左边菜单栏States,如果没有发现该Tab,可以在Blend的Window菜单选中States就会出现了。
 
 
在按钮的Normal状态,就是我们初始化设置的状态,现在我们修改MouseOver的控件视觉效果.
在States中,选中MouseOver,然后在主设计窗口选中Button控件,
 
在右边Properties属性栏,简单的修改Button的背景色,
 
 
这样,鼠标覆盖到Button控件时,颜色会改变,再点击F5运行,可以将鼠标放在控件上,这时会发现VSM会切换视觉状态。
按照以上方法,我们修改“Pressed”和"Disabled“状态。
 
Pressed:
 
Disabled:
在运行F5后,测试会发现VSM状态切换已经实现,但是缺乏体验效果,当鼠标放在Button时,我们希望看到渐变效果,当鼠标点击Button后,也希望看到渐变效果,这里我们需要添加Transition过渡效果到各个状态。
在States菜单下,选中Normal状态,
 
在状态右边,会看到有个箭头状按钮,点击添加Transition过渡效果,
 
点击Transition按钮后,会弹出一个过渡效果列表,这里表示从Normal状态过渡到不同的状态所呈现的效果。
其中需要注意的是 "* -> Normal",表示从任何效果到Normal,“Normal -> *”,表示从Normal到任何效果。
这里,我们选中“Normal -> MouseOver”。
 
我们可以设置从Normal过渡到MouseOver要用什么动画效果呈现,过渡动画时间设置。
这里我们可以选择Easing效果,关于Easing的介绍,已经在过去的教程中详解,这里不再赘述。
设置过渡时间为0.3秒,点击F5,看看设置的效果,当鼠标放在Button后,会出现渐变的动画效果。
 
按照以上的方法,依次类推,
在MouseOver状态,添加Normal状态,
在Pressed状态,添加MouseOver状态,
再次运行项目,Button控件会在各种状态下出现不同的过渡动画效果。
 
 
 这时再次查看模板代码,会发现在ControlTemplate中,出现了VisualStateManager选项。
ExpandedBlockStart.gif代码
 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控件模板创建完毕。
如果您在开发设计过程中遇到问题,欢迎留言给我。
 

本文转自冷秋寒 51CTO博客,原文链接:http://blog.51cto.com/kevinfan/301226 ,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Jenkins 教程(二)实现本地资源ssh上传
在教程一中我们只实现了在jenkins容器中的打包和结果通知,这节教程将用一个ssh工具将我们package完的项目上传到我们的服务器中。 1. 安装插件 Publish over SSH 完了点击直接安装 2. 插件的系统配置 配置完成后测试一下: 3. 插件的工程配置 最后一个框是在服务器运行什么脚本。
866 0
PyTorch快餐教程2019 (2) - Multi-Head Attention
# PyTorch快餐教程2019 (2) - Multi-Head Attention 上一节我们为了让一个完整的语言模型跑起来,可能给大家带来的学习负担过重了。没关系,我们这一节开始来还上节没讲清楚的债。 还记得我们上节提到的两个Attention吗? ![两种Attention机制](https://upload-images.jianshu.io/upload_images/
1486 0
Directx11教程(47) alpha blend(4)-雾的实现
除了用来实现透明效果之外,我们还可以用alpha blend来实现雾(fog)的效果。通过逐渐清晰的雾气效果,可以增加场景的真实感。      雾的效果实现很简单,首先我们要一种颜色来表示雾,通常使用用灰色。
709 0
Asp.net MVC 2.0 + Unity 2.0(IoC) + EF4.0 实例:RoRoWoBlog 开源项目框架代码
本开源项目当前使用框架如下: 前台表现:Asp.net MVC 2 数据持久层:ADO.Net Entity Framework 4.0 依赖注入容器:Unity 2.0 开发工具:VS2010   开源项目地址:http://rorowo.
936 0
ActiveReports 报表控件官方中文入门教程 (3)-如何选择页面报表和区域报表
原文:ActiveReports 报表控件官方中文入门教程 (3)-如何选择页面报表和区域报表 本篇文章将介绍区域报表和页面报表的常见使用场景、区别和选择报表类型的一些建议,两种报表的模板设计、数据源(设计时和运行时)设置、和浏览报表的区别。
1102 0
深度剖析阿里云ECS最强计算实例
日前,阿里云在2017云栖大会·深圳峰会上宣布,华北3地域超大规模数据中心正式对外开放运营,云服务器ECS全系列降价20%。首次披露阿里云十余种基于最新平台计算实例背后的那些研发秘密。
10981 0
3445
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载