专栏首页陈仁松博客UWP基础教程 - XAML对象元素和属性

UWP基础教程 - XAML对象元素和属性

元素

XAML的对象元素是指XAML中一个完整的节点,一个XAML文件始终只有一个根元素,在Windows 10 UWP 应用中通常是采用Page作为根元素,这个根元素就是当前页面最顶层的元素,而其他元素都是子元素。在XAML中根元素有且只能有一个,而子元素可以有一个或者多个,这是由根元素来决定的。 在XAML代码中,一个Element(元素)通常是一个Object(对象),在代码中映射对应.Net类。简单理解,在XAML中声明一个Element元素,其实就是对相应公共语言运行类库进行一次实例化操作。  XAML代码声明一个元素对象,必须由一个开始标签“”和一个结束标签“”构成,基本语法如下:

<Element></Element>

或者你也可以这么来写

<Element/>

该语法格式省略</元素对象>结束标签,使用“/”符号作为元素结束符。 值得注意的是,XAML中Elements(元素)和Attributes(特性)名称是字符大小写敏感型,也就是大写和小写字符命名具有不同的含义。在上述代码中,如果使用<element>,XAML语法解析器将返回错误信息,无法对Element元素进行实例化。

属性

在XAML中,属性也是可以使用多种语法来进行设置的,不同的属性类型也有不同的设置方式,并不是所有的属性设置都是通用的。总的来说,可以通过下面的三种方式来设置对象属性。

  • 使用Attribute特性语法
  • 使用Property元素语法
  • 使用隐式对象语法

这三种设置属性的方法,并不是对所有属性都适用的,有些属性只适用一种方式来设置;有些熟悉则可以使用多种方式来设置,这取决于属性对象的特性。下面我会详细的介绍这三种设置方法。

1、使用Attribute特性语法

<元素对象 属性名=“属性值” 属性名=“属性值” …></元素对象> 

或者

<元素对象 属性名=“属性值” 属性名=“属性值” …/>

下面来看一个具体的实例

<Rectange x:Name="rectange" Width="100" Height="100" Fill="Red" />

由于元素对象属性名在开始标签内部,所以这种表达方式也被称为“内联属性”。

XAML分析器会把上面的代码解析成为C#的类,当然也可以直接使用C#的代码来实现元素和属性设置,下面来看看上面这个例子的C#代码实现

Rectange r = new Rectange();
r.Name = "rectange";
r.Width = 100.0;
r.Height = 100.0;
r.Fill = new SoildColorBrush(Colors.Red);

2、使用Property元素语法

使用XAML的Attribute特性可以简单快捷的设置对象的属性,其属性值局限于简单的字符形式。在实际项目中,经常会遇到复合型控件或者自定义控件引用较为复杂的对象属性,以达到个性化的效果。对此Attribute特性无法支持,从而引入Property属性元素的概念。 下面用伪代码来表示使用Property元素语法来实现属性的设置

<元素对象>
  <元素对象.属性>
     <属性设置器 属性值=“”>
  </元素对象.属性>
</元素对象>

其中,属性设置器可以设置为较为复杂的对象元素,例如布局控件元素,自定义控件元素等。 下面是用一个矩形控件演示Property属性的作用,设置矩形的填充使用Fill属性,使用Attribute特性设置上面的Rectange的内容,如下代码:

<Rectange x:Name="rectange" Width="100" Height="100">
    <Rectange.Fill>
        <SoildColorBrush Color = "Red"/>
    </Rectange.Fill>
</Rectange>

再来看一个Button中添加一个文字

        <Button>
            <Button.Content>
                <TextBlock Text="陈仁松XAML教程"/>
            </Button.Content>
        </Button>

还可以这么写

        <Button>
            <Button.Content>
                陈仁松XAML教程
            </Button.Content>
        </Button>

其运行效果和Attribute特性设置按钮内容相同。从示例中可以看出,使用元素对象的Property属性设置方法,比Attribute特性要灵活和强大。

3、使用隐式对象语法

通过学习Property属性元素,可以了解到XAML的元素对象属性,不仅包含单一对象属性,同时还支持复杂属性,属性值可以为简单的字符数据类型,同时也可以是一个数据集。 为了简化XAML代码复杂性,提高代码易读性,XAML提供隐式数据集设置对象属性方法。上面设置Button的Content属性还可以这样写:

        <Button>
            <TextBlock Text="陈仁松XAML教程"/>
        </Button>

或者

        <Button>
            陈仁松XAML教程
        </Button>

从对比以上代码可以看出<Button.Content>被删除后,仍旧可以对Content进行赋值操作。其运行结果和使用Property属性元素属性赋值相同,使用隐式对象语法属性赋值在Windows 10 UWP自定义控件模板和样式中经常用到,是常用属性赋值方法之一。

本篇就介绍到这里,下一篇将会给大家介绍XAML依赖属性和附加属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • UWP基础教程 - XAML依赖属性和附加属性

    前面两章介绍了XAML的命名空间、元素和属性的概念,从本篇开始接下来会介绍XAML的高级特性,本篇主要会介绍两个概念: 依赖属性(Dependency Prop...

    陈仁松
  • UWP基础教程 - {x:DeferLoadStrategy}

    x:DeferLoadStrategy扩展标记是Windows10 UWP开发的新特性,这个特性可以用于优化启动性能,使用 x:DeferLoadStrateg...

    陈仁松
  • UWP基础教程 - XAML标记扩展

    标记扩展(Markup Extensions)是一个被广泛使用的XAML语言概念。通过XAML标记扩展来设定属性值,从而可以让对象元素的属性具备更加灵活和复杂的...

    陈仁松
  • python基础教程:内置函数(二)

    input([prompt]) 如果存在 prompt 实参,则将其写入标准输出,末尾不带换行符。接下来,该函数从输入中读取一行,将其转换为字符串(除了末尾的...

    一墨编程学习
  • SQL反模式学习笔记6 支持可变属性【实体-属性-值】

    反模式:使用泛型属性表。这种设计成为实体-属性-值(EAV),也可叫做开放架构、名-值对。

    张传宁老师
  • 一篇文章带你了解CSS 属性选择器

    属性选择器对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

    前端进阶者
  • 漫话ES6:part10:面向过程与面向对象

    扩展:除了以上面向对象的方法,还有对象的静态方法,对象的静态属性,私有方法和私有属性 new.target 属性等。我们以后会给大家再聊聊这些使用方法。

    舒克
  • HTML5学习笔记(一)

    1.什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,...

    用户1667431
  • Vue中如何使用方法、计算属性或观察者

    熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以...

    六小登登
  • css应知应会 第三集

    background-image:repeating-linear-gradient();

    李才哥

扫码关注云+社区

领取腾讯云代金券