zoukankan      html  css  js  c++  java
  • 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 单击按钮之后的效果

  • 相关阅读:
    北漂爱情[柒涩波]
    JavaScript基础知识五
    JavaScript基础知识四
    JavaScript基础知识三
    JavaScript基础知识二
    js内存泄漏
    CSS三列布局之左右宽度固定,中间元素自适应问题
    VScode 前端常用插件推荐
    将博客搬至CSDN
    python网络编程学习笔记(二)
  • 原文地址:https://www.cnblogs.com/finehappy/p/6645733.html
Copyright © 2011-2022 走看看