原文:Blend_ControlTemplate(Z)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010265681/article/details/76651768
对于ControlTemplate没有一个特定的概念,为了避免过于抽象,可以简单的理解ControlTemplate是通过改变Style改变控件视觉效果的类。ControlTemplate可以被定义在控件的Xaml代码中,为了提高复用性,ControlTemplate也会被定义到资源文件中。

 

实例演示使用Blend创建新的控件ControlTemplate。

首先,在Blend中创建新的项目ControlTemplateDemo,上周Silverlight 4发布,我已经升级开发环境到Silverlight 4,VS2010和Blend 4 RC, 所以,以后所有项目演示将是基于.Net Framework 4的。

我们计划创建一个简单的按钮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选项。

代码

 

我们简单的添加一个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控件模板创建完毕。

Blend_ControlTemplate(Z)的更多相关文章

  1. Blend_技巧篇_导入PSD文件制作ToggleButton (Z)

    原文:Blend_技巧篇_导入PSD文件制作ToggleButton (Z) 系统: Win7sp1 32位 IDE: Microsoft VisualStudio 2013 Ultimate Ble ...

  2. 性能优化方法(Z)

    关于C#程序优化的五十种方法 作者: 字体:[增加 减小] 类型:转载 时间:2013-09-12我要评论 这篇文章主要介绍了C#程序优化的五十个需要注意的地方,使用c#开发的朋友可以看下 一.用属性 ...

  3. ServiceStack.Redis订阅发布服务的调用(Z)

      1.Redis订阅发布介绍Redis订阅发布是一种消息通信模式:发布者(publisher)发送消息,订阅者(Subscriber)接受消息.类似于设计模式中的观察者模式.发布者和订阅者之间使用频 ...

  4. WPF三大模板简介(Z)

    WPF三大模板简介   WPF支持以下类型的模板: (1) 控件模板.控件模板可以将自定义模板应用到某一特定类型的所有控件,或是控件的某一实例.决定控件外观的是ControlTemplate,它决定了 ...

  5. C# 类动态添加属性、方法(Z)

      问题: 需要动态为WPF中的DataGrid添加列,并动态绑定相应数据.(此处仅实现动态属性的添加和使用,关于动态方法的添加和使用详见推荐阅读) 实现关键点: 目标类继承DynamicObject ...

  6. Mongodb 基础(Z)

    Mongodb的客户端支持 作为一款非常成熟NoSQL数据库,Mongdb对各种编程语言的支持已经非常完善了,目前已经支持各大主流编程语言包括:1,mongo shell 2,Python 3,Jav ...

  7. WPF 主题切换(Z)

    using System; using System.Windows; using Assergs.Windows; namespace XMLSpy.WPF.Util{ /// <summar ...

  8. C# mongodb 驱动操作(Z)

    Query.All("name", "a", "b");//通过多个元素来匹配数组 Query.And(Query.EQ("nam ...

  9. samba配置(z)

    http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html

随机推荐

  1. js读取json,纠结。。。

    什么是json.先小抄一段:  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.採用全然独立于语言的文本格式, 是理想的数据交换格式,同一时候,JSO ...

  2. Spring boot(一) 入门

    本系列基于Eclipse 4.7 .JDK 8 一.下载STS (1)STS 注意自己的eclipse版本. 在 Update Site Archives 里面选择对应eclipse的版本下载. (2 ...

  3. 网站访问优化(二):开启apache服务器gzip压缩

    昨天,把带宽从1M升级到2M,使用cdn版本的jquery之后,网站访问速度由平均5s(在禁止缓存的情况下,使用缓存大概在2.8s)下降到2.8s的样子. 今天,继续优化. 第1步:   把图片进行了 ...

  4. Python IDLE如何清屏

    金gordon 原文 IDLE如何清屏 在学习和使用python的过程中,少不了要与Python IDLE打交道.但使用 Python IDLE 都会遇到一个常见而又懊恼的问题——要怎么清屏? 答案是 ...

  5. 搭建基于java环境

    .net项目架构改造之搭建基于java环境配置一览[上]   最近公司做了一个项目,需要嵌套在千牛的客户端上,项目代码必须上阿里的聚石塔,全程采用基于docker的自动化部署,我们的项目是基于.net ...

  6. 洛谷 P2197 nim游戏

    洛谷 P2197 nim游戏 题目描述 甲,乙两个人玩Nim取石子游戏. nim游戏的规则是这样的:地上有n堆石子(每堆石子数量小于10000),每人每次可从任意一堆石子里取出任意多枚石子扔掉,可以取 ...

  7. Android JNI编程(二)——C语言的基本数据类型,输出函数,输入函数

    版权声明:本文出自阿钟的博客,转载请注明出处:http://blog.csdn.net/a_zhon/. 目录(?)[+] 在学习C语言数据类型之前,我们先来回顾一下Java中的基本数据类型和其特点 ...

  8. [转] Valgrind使用

    http://www.cnblogs.com/napoleon_liu/articles/2001802.html 调不尽的内存泄漏,用不完的Valgrind Valgrind 安装 1. 到www. ...

  9. 简单sql部分强化练习题

    简单查询部分sql练习题 -- 选择部门30中的全部职工 select * from emp where deptno = 30; -- 列出全部业务员(CLERK)的姓名,编号,和部门编号 sele ...

  10. Android Xfermode 真实 实现全面、圆角图片

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/42094215.本文出自:[张鸿洋的博客] 1.概述 事实上这篇本来准备Andro ...