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

关键词： 布局 教程 类型 控件

Expression Blend实例中文教程 布局控件快速入门Canvas（精选2篇）

篇1：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布局控件快速入门就介绍到这儿了。

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

概述

对于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组成。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

这时，我们可以保存所有修改，点击“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选项。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

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

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