当前位置：首页 > 实用文档 > 其他范文> Expression Blend实例中文教程控件快速入门ControlTempla

Expression Blend实例中文教程控件快速入门ControlTempla

时间：2022-04-29 12:07:38 其他范文收藏本文下载本文

“不长叶儿的树”为你分享5篇“Expression Blend实例中文教程控件快速入门ControlTempla”，经本站小编整理后发布，但愿对你的工作、学习、生活带来方便。

篇1：Expression Blend实例中文教程控件快速入门ControlTempla

上篇，介绍了控件样式（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，VS和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 内部由Rectangle和ContentPresenter组成。

这时，我们可以保存所有修改，点击“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控件模板创建完毕。

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

本文配套源码

篇2：Expression Blend实例中文教程布局控件快速入门Canvas

上一篇，我介绍了Silverlight控件被分为三种类型，

第一类： Layout Controls（布局控件)

第二类： Item Controls （项目控件)

第三类： User Interaction Controls（用户交互控件)

在以上三种控件类型中，布局控件是最基础的，所以，我从布局控件开始一个快速入门介绍，根据前文所述，我们知道Silverlight标准控件中，包括以下四种布局控件：

Grid控件

Canvas控件

StackPanel控件

Border控件

经过上一篇文章的学习，我们已经对Grid有了了解，本文将继续介绍另外一个布局控件Canvas，

Canvas布局控件，相对于其他布局控件的优势在于可以自由的设定其包含区域内控件的位置。该控件在Silverlight游戏设计中最为常见，可以实现游戏中独立部件控制。

使用Blend设置Canvas很简单，我在上一篇项目基础上，在0行0列和0行1列中分别创建两个Canvas，然后在两个Canvas中创建两个控件。

选中Canvas后，可以在右边“Properties”属性栏中修改其属性，从属性栏中可以看出，Canvas是嵌套在Grid中，所以，其位置可以由Grid属性控制。

选中Canvas中的控件，可以在右边“Properties”属性栏中看到该控件在容器Canvas中的位置，包括左距离，顶距离，以及Z坐标值。

其中Left可以理解为X坐标值，Top为Y坐标值，ZIndex（Z坐标值），如果从3D的角度来理解，是相对于平面的立体值。对于ZIndex 的使用，可以看看下例，如果有两个Canvas控件，位置坐标相同，会形成覆盖，这里定义ZIndex，值越大的将会在上方覆盖ZIndex值小的控件。通过这个参数设置，我们可以实现很多不同的布局效果。

从上图可以看到，Canvas中的子控件，属性栏中，没有Grid控件中的Margin属性，而是使用Left和Top 进行定位。根据微软官方的解释，Canvas中的控件，使用Canvas.left和Canvas.top定位，传递该数值到父容器控件Canvas，重载父容器Canvas的 AttachedProperty（附加属性），这样意味着父容器Canvas不能更改子控件的位置。这里引入了AttachedProperty（附加属性），该属性是属于父控件的属性，但是可以被子控件进行设置。

上一篇，我们提到过布局控件Group的功能，这里使用Canvas group的功能，将多个Canvas嵌入到一个 Canvas控件中，通过父Canvas控件统一控制子容器控件的属性，

这里我创建四个Canvas，每个Canvas中包含一个圆形控件。当前，处于相互覆盖状态。

按着Shift，分别选中四个Canvas控件，点击鼠标右键，“Group into” - > “Canvas“，

选中后，Blend将生成新的Canvas父控件，将选中的四个Canvas控件，作为子控件。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

现在选中父控件的Canvas，将Opacity修改为40，可以看到，所有子控件的Opacity统一修改为40.效果如下：

如果，我们分别设置父控件下的四个Canvas控件Opacity属性，即可看到各自Canvas将按照自己属性为主，效果如下：

Canvas通过Group的功能，可以实现多个控件实现相同方式下动画效果，在Silverlight开发中也是常用的功能。

Canvas布局控件快速入门就介绍到这儿了。

篇3：Expression Blend实例中文教程项目控件和用户交互控件快速入门

前文我们曾经描述过，微软把Silverlight控件大致分为三类：

第一类： Layout Controls（布局控件)

第二类： Item Controls （项目控件)

第三类： User Interaction Controls（用户交互控件)

我们已经对第一类布局控件在Blend中的应用进行了描述，本文将介绍Item Controls，也称为项目控件;和User Interaction Controls，也称为用户交互控件.

Item Controls （项目控件)

在实际项目中，我们经常会遇到处理数据集合或者数组的情况，而处理数据集合最好的方法就是使用 “Binding”绑定。正如您所知道的，在 ASP.NET中，就已经应用了“Binding”绑定的概念，其优势在于节省了大量的开发时间，降低了开发难度。而在Silverlight中微软加强了Binding功能，并且使用Item Controls（项目控件）来显示和处理数据集合和数组类型数据。Silverlight提供了四种标准项目控件，分别是 ListBox，ComboBox，TabControl和TreeView。下面，我将演示在Blend中如何使用这些控件。

根据上文描述，使用Item Controls前，首先需要绑定数据，而绑定数据需要有相关数据源，所以，我们需要先定义数据源。本文依旧使用前文例程 SilverlightBlendDemo，在Silverlight客户端创建一个新的 Usercontrol，ItemControlsDemo.xaml.

创建完毕后，主设计窗口将呈现ItemControlsDemo的UI设计界面，看右边属性栏，有三个Tab，其中包含“Data”，选中Data，

该窗口允许用户在Blend中定义数据源，导入XML格式数据，定义外部数据源等功能。

首先，我们选择“Define New Sample Data..“，定义一个新的例程数据源，名字使用默认 SampleDataSource。其中，Define in是指定该数据源的应用访问，默认为整个项目，当然，如果作为测试，也可以指定该数据源仅应用于当前打开文档。这里，我们使用默认设置。

创建完成后，在右边Data数据栏中，会出现SampleDataSource选项，而在该数据源下包含一个集合 “Collection”，该集合默认有两个属性“Property1”和“Property2”。在项目应用中，可以根据需要再添加新的属性。

由于我们添加的是例程数据源，Blend已经在该数据源中添加了例程数据，根据需求，我们可以对例程数据进行修改。首先选择Collection，然后点击编辑例程数据，

可以看到，Blend生成的默认例程数据，这里我们可以进行简单修改，Property1默认类型String， Property2默认类型为Boolean，这里我想修改Property2为String，

类型修改为String，还可以修改该数据列的具体的格式：

为了方便演示我修改两个默认属性名，分别为，“网站”和“网址”

点击OK，例程数据建立完成，

下面，看看在Blend中如何使用Item Controls装载数据源。首先我们测试ListBox：

在左边工具栏，选择ListBox控件，然后在ItemControlsDemo.Xaml设计页面，画一个ListBox。

然后从右边Data栏中，选中Collection，拖拽到ListBox空白处，ListBox即可自动绑定例程数据。

Blend会自动生成XAML代码，对例程数据进行绑定。

1

这样就轻松实现了ListBox绑定例程数据。

再试试ComboBox，从左边工具框选择ComboBox,在设计页面画一个ComboxBox，

仍旧按照以上方法，拖拽Collection到ComboBox上，即可看到数据已经进行绑定。

同样，在Treeview中，也可以正常绑定。

在数据绑定的时候，Data栏目，会有黄色的框，表示“Data Binding”。

具体的定义，在Property属性栏中查看：

以上则是使用Blend对Item Controls进行数据绑定的方法。由于文本主要讲述Blend应用，这里，就不再对Item Controls的属性进行赘述，如果您有问题可以留言给我。

User Interaction Controls（用户交互控件)

Silverlight控件中，User Interaction Controls是面向用户行为交互，该控件和ASP.NET和WPF中的大部分交互控件相同，用法也基本相似。其选取和设计，和前文Item Controls相同，这里就不再赘述。需要注意的是，不同的交互控件，具有不同的交互事件，从而达到不同的交互效果。在后文，如果有需要，我将详细解释说明。

本节源代码下载：http://silverlightchina.net/uploads/soft/100325/1- 100325132101.zip

篇4：Expression Blend实例中文教程样式和快速入门Style,Template

在上一篇，介绍了Visual State Manager视觉状态管理器，其中涉及到控件的样式（Style）和模板（ Template），本篇将详细介绍样式（Style）和模板（Template）在Silverlight项目中的应用，并介绍如何使用Blend设计样式（Style）和模板（Template），

在LOB（Line-of-Business）企业级应用项目开发中，为了使项目的视觉效果多样化，不仅仅使用动画效果，而且经常还需要修改部分控件的样式（Style）和模板（Template）。在Silverlight的控件包中，微软已经定义了默认控件样式和模板，开发人员可以在这些默认的代码上进行修改和调整，以达到项目需求。但是由于默认的控件样式和模板代码过于冗长，手工修改起来相对复杂和繁琐，对此，微软封装了一些新的功能在Blend中，方便开发人员和设计人员对模板和样式进行控制。在学习Blend控制样式（Style）和模板（Template）前，还是先快速了解一下样式（Style）和模板（Template）。

样式（Style），有HTML开发基础的朋友对传统的CSS样式表并不陌生，HTML将所有公用的属性代码汇集到CSS文件中，使用CSS控制页面的背景，控制表格的宽度，控制控件距离等。Silverlight中的样式（Style）和CSS相同，允许设计人员和开发人员将控件的公用属性定义到资源文件中，允许相同属性控件自由调用，这样不仅提高了代码的复用性，而且保证了控件外观在项目中的一致性。

模板（Template），模板的概念在传统的Web页面开发中已经被引入，早期Dreamweaver因为支持创建 Web模板设计，吸引了不少Web开发者。Silverlight中同样引进了模板的概念。在Silverlight中，凡是继承自System.Windows.Controls命名控件的控件都有一套默认的模板，设计人员和开发人员可以基于默认模板的基础上进行修改，创建自定义模板。

样式（Style）和模板（Template）的定义

在Silverlight中，样式和模板定义是很简单的，因为很多属性已经被封装好，不需要自行创建，只需要调用就可以了。简单的演示代码：

Style：

1 2 3 这里定义具体样式属性4 5

Template：

1 2 3 5 这里定义具体模板6 7 8

样式（Style）和模板（Template）的使用

在Silverlight中样式（Style）和模板（Template）都属于控件资源，也就是说，两者都可以被定义在资源文件中，而在项目页面中，仅需使用Style和Template属性调用就可以了。

Style：

Template：这个方法，也是Blend所支持的方法，下面我们看看实例，进一步理解。

上面介绍了样式和模板的最基本的用法。在实际项目中，我们经常把模板（Template）定义在样式（Style）中，也就是将Template作为一个属性被赋值在Style中，这样当样式（Style）被应用在控件中时，新的模板也会同时加载。例如下面Button样式代码， Template是作为Style的属性被设置的: