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 单击按钮之后的效果

原文地址:https://www.cnblogs.com/finehappy/p/6645733.html