Win10系列：UWP界面布局基础7

2.附加属性

有一些XAML元素，其自身的属性大多是在其它的元素中声明和使用的，该元素本身却很少使用，这些在其他元素中声明和使用的属性被称为附加属性（Attached Properties）。附加属性是一种特殊的依赖项属性，其使用格式如下所示：

<元素名
附加元素名.附加属性名 = 属性值
...> ... </元素名>

例如，在一个布局元素Canvas内添加一个按钮，按钮本身并没有设置任何属性来控制它的位置，但是Canvas中的两个依赖项属性Left和Top，作为按钮的附加属性来定义按钮位置，相应的XAML代码片段如下所示：

<Canvas>

   <Button Canvas.Left="25" Canvas.Top="30"/>

</Canvas>

在上面的代码中，Button元素使用了Canvas中的附加属性Left和Top，就像是从Canvas中继承的一样，尽管这两个属性仍旧属于Canvas元素，但是属性值已经附加到了按钮上，并且产生了效果。

从这个示例可以看出，在定义元素时，可以通过"继承"或"附加"其他元素的属性来在本元素上实现特有的效果。

3.2.8 事件

事件是Windows消息机制中的重要概念，也是较常见的人机交互方式之一。如果一个对象触发一个事件，那么此对象就被称为事件发送者，而该事件所影响的对象则被称为事件接收者。在传统应用中，一个对象触发事件后，只能有一个事件接收者。像在Windows窗体应用程序开发中，事件的发送者和接收者是同一个对象，例如，单击一个按钮对象，这个按钮对象会触发Click事件，同时该对象的后台代码将接收Click事件，并且执行相关的事件处理程序。

1. XAML事件

在XAML中也使用事件机制来管理用户的操作，每个操作对应一个事件，根据用户的不同操作执行不同的事件处理程序，进而产生不同的行为。

例如，向一个页面中添加一个按钮，并为按钮注册Click事件的事件处理方法，来响应对这个按钮的单击操作，相应的XAML代码片段如下所示：

<Button Name="OpenButton" Click="Button_Click">打开</Button>

在上面代码中，Click事件的处理方法是Button_Click，当单击按钮时会触发按钮的Click事件，后台就会调用事件处理方法Button_Click来处理这个事件。Button_Click方法的代码片段如下所示：

private void Button_Click(object sender, RoutedEventArgs e)

{

   // 在此处编写事件处理过程的代码

}

下面通过一个简单的示例来演示如何使用XAML中的事件。新建一个Windows应用商店的空白应用程序项目，将其命名为ButtonClickEventApplication。打开MainPage.xaml文件，在Grid元素中添加如下代码片段：

<Button Content="点击这里" Margin="112,339,0,391" Click="Button_Click"/>

<TextBox Name="ShowText" TextAlignment="Center" Margin="235,337,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="40" Width="85"/>

在上面的代码中，首先添加了一个Button按钮，设置按钮的Content属性值为"点击这里"，并为按钮的Click事件注册事件处理方法Button_Click；然后添加了一个TextBox文本框，名称为ShowText，并设置TextAlignment属性值为center，使文本内容采用居中对齐方式。同时，使用鼠标将这两个控件拖动到界面中合适的位置。

布局好前台界面后，打开MainPage.xaml.cs文件，定义"点击这里"按钮的Click事件处理方法Button_Click，实现单击按钮时在ShowText文本框中显示"提交成功"，相应的代码片段如下：

private void Button_Click(object sender, RoutedEventArgs e)

{

// 在ShowText文本框中显示"提交成功"文本信息

ShowText.Text = "提交成功";

}

在上面的代码中，将"提交成功"字符串赋值给ShowText文本框的Text属性，使ShowText文本框显示相应的文本内容。

启动调试，在没有单击"点击这里"按钮之前，文本框中的内容是空的，效果如图3-11所示。单击"点击这里"按钮，文本框显示出"提交成功"，从而响应了单击按钮的操作，效果如图3-12所示。

图3-11 未单击按钮之前的效果 图3-12 单击按钮之后的效果