Windows Phone笔记(12)XAML基础知识(转)

Windows Phone笔记(12)XAML基础知识

 

1.XAML概述

  在前面的笔记中我们都是使用Silverlight for Windows Phone框架来开发Windows Phone应用程序,其中我们使用XMAL(可扩展应用程序标记语言 )来描述应用程序的UI,通过在第一篇笔记中我们对XAML进行了简单的介绍,我们知道:XAML是微软为构建应用程序用户界面而创建的一种新的声明性语言(关于声明性具体来说就是:XAML 可以通过使用一种语言结构来显示多个对象之间的分层关系,并使用一种后备类型约定来支持类型扩展,以初始化对象并设置对象的属性.),基于并完全兼容XML。我们在常规的基于Silverlight的Windows Phone应用开发过程中:

使用声明性 XAML 标记构建可见用户界面 (UI) 元素,使用后台代码用来响应和处理所有用户输入及所有由控件产生的事件。

这和我们在.NET开发中常见的开发模型类似,很好的将程序的后台逻辑和用户界面的代码分离,方便了开发过程中UI设计人员的开发人员的相互协作。XAML的语法基于XML,所有只要开发人员具有相应的编程基础就可以很快的掌握这门语言,但是XAML既然是在XML的基础上拓展的一门新的声明性语言,肯定也有它的不同的地方,这也是我们在学习过程中特别需要注意。

 

2.使用代码创建UI元素

  使用XMAL标记构建可见的界面(UI)元素并不是我们唯一的选择,我们也可以通过使用后台代码来实现,虽然这不是我们常用的方式,但这可以使我们更好的理解XMAL。在.NET中XMAL中的绝大部分的元素都有其相对应的类,这些元素的特征对应类中的属性。下面我们通过一个简单的实例来演示如何使用后台代码构建UI元素。

MainPage.xaml UI的主要部分:

复制代码
1         <!--ContentPanel - 在此处放置其他内容-->
2         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
3             <StackPanel x:Name="TextBlockList">
4                 <Button Content="Create BlockText" Height="72" HorizontalAlignment="Center" 
5                  Name="btn_CreateBlk"  Click="btn_CreateBlk_Click">
6                 </Button>
7             </StackPanel>
8         </Grid>
复制代码

 

MainPage.xmal.cs后台处理部分:

复制代码
 1         /// <summary>
 2         /// 点击创建TextBlock元素
 3         /// </summary>
 4         /// <param name="sender"></param>
 5         /// <param name="e"></param>
 6         private void btn_CreateBlk_Click(object sender, RoutedEventArgs e)
 7         {
 8             TextBlock newTextBlock = new TextBlock();
 9             newTextBlock.Text = "Hello World";
10             newTextBlock.FontSize = 28;
11             newTextBlock.HorizontalAlignment = HorizontalAlignment.Center;
12             newTextBlock.Margin = new Thickness(0,10,0,0);
13 
14             this.TextBlockList.Children.Add(newTextBlock);
15         }
复制代码

在上面的示例程序中我们只要点击Button按钮,就可以通过调用其点击事件在页面中名为:TextBlockList的容器元素中添加一个TextBlock元素。

 

3.XAML中的属性继承

  我们知道Windows Phone应用程序的框架和页面层次结构一般是这样的:

 如果我们在MainPage.xaml的PhoneApplicationPage标签中定义这个属性:  FontStyle="Italic",我们可以看到在这个标签中设置的属性会作用于整个页面中所有的Textblock元素。这就是被称为:属性继承(Property Inheritance)特征(作为silverlight的一个特征)

我们也可以通过直接在Textblock中设置文本样式: <TextBlock FontStyle="Normal" Text="Hello"/>我们可以看到字体又会恢复的默认状态,这是由于Textblock的本地设置优先级高于属性继承,通过这些我们可以明白属性作用于元素的优先顺序是这样的:

  • 本地设置优先级最高
  • 样式的优先级低于本地设置
  • 属性继承优先级居中
  • 默认值的优先级最低

 

4.属性元素(property-element)语法

通常我们的XAML代码中通常是这样设置一个元素的属性,例如:

1    <TextBlock FontStyle="Normal" Text="Hello" FontSize="36" Foreground="Red"/>

 

 但是我们知道XAML是基于XML的所以我们完全可以根据XML语法将前面的代码继续拆分成:

1       <TextBlock Text="Hello" Foreground="Red">
2             <TextBlock.FontStyle>Normal</TextBlock.FontStyle>
3             <TextBlock.FontSize>36</TextBlock.FontSize>
4       </TextBlock>

 和前面达到的效果完全一样。现在的TextBlock包含了一个名为:TextBlock.FontSize的子元素,在它的起始标签中间的是它的值,这就是属性元素(Property-element)语法,这是XAML中非常重要的组成部分,通过引入属性元素语法可以进一步明确与.NET和XML相关的一些术语:

  • 元素对象(object element)——基于XML的.NET对象
  • 属性特征(property attribute)——通过XML特征设置的.NET属性
  • 属性元素(property element)——用XML元素表示的一个.NET属性

我们需要注意的是:在属性元素标签中出现任何其他东西都是非法的,并且不能够为同一个属性设置属性特征和属性元素。             

 

5.资源集合

  在之前我们编写的Windows Phone程序时的XMAL文件有很多重复的标记,例如:Margin,HorizontalAlignment,VerticalAlignment等设置,其实我们可以通过类似于HTML中使用CSS的方式,在XAML中使用Silverlight样式(style)。但是实现Silverlight样式有一个先决条件:一种更普遍的共享机制:资源(Resrouce)(PS:前面的笔记的资源是指嵌入到应用中的图片资源)。

  XMAL资源通常作为一个特殊的.NET类或结构体的实例,要么是一个现有类或者结构体,要么是自定义类。当一个特定类被定义为XMAL的资源时,系统只会创建一个该类的实例,该实例将引用在该资源的各个对象之间共享。

    UIElement派生的任何元素的单个实例都不允许被多次使用,所有也就不能够以资源的形式出现。

为了支持资源的存储,FrameworkElement定义了一个ResourceDictionary类型的Resources属性。在我们的APP.xaml文件中定义了一个为空的资源片段(Resource范围内的资源集合可被称为一个资源片段resource section):

    <!--应用程序资源-->
    <Application.Resources>
    </Application.Resources>

在APP.xaml文件中定义的资源可以在整个应用程序中使用,而在FrameworkElement的Resource集合中定义的资源只能够在FrameworkElement元素及其子元素中使用。

下面我们来观察一个具体的示例——让所有拥有FontSize属性的的元素共享同一个资源。首先我们要了解该属性需要知道它是属于什么类型的,FontSize属性属于Double类型,Double结构体基于C#的double数据类型,定义在System命名空间中,但是在生成的XAML文件中并没有这个命名空间,所有我们需要做一下额外的工作:为System命名空间声明一个XMAL命名空间:

    xmlns:system="clr-namespace:System;assembly=mscorlib"

 

然后,我们就可以声明添加一个double类型的资源了:

1         <system:Double x:Key="fontsize">
2             68
3         </system:Double>

 

 最后,当然是使用这个定义的资源了,例如为一个TextBlock元素引用这个资源:

   <TextBlock Text="Hello" Foreground="Red"  FontSize="{StaticResource fontsize}"/>

 这里我们需要注意的是x:Key特征,每个资源的Key都是唯一的(不同的资源集合可以重用,同时优先级高的会覆盖优先级低的资源),我们也是通过这个键来引用对应的资源。

 

6.在代码中引用资源

  通过资源名称简单的索引Resourc属性,我们就可以在代码中使用XAML资源,但是这必须在InitializeComponent方法调用代码隐藏文件的构造函数之后,才能够访问资源。例如我们在代码中使用前面小节直接定义在<phone:PhoneApplicationPage.Resources>标签内定义的资源:

  this.btn.Margin =(Thickness)this.Resources["margin"];

 

 假如在前面元素的Resource集合中找不到具有该名称的资源,程序将会继续检索App类的Resource集合,如何依旧找不到,索引器将返回Null。我们也可以通过使用x:Name的方式来引用资源,这样做的好处是:名称将作为一个字段存储在自动生成的代码中,因此可以像其他字段一样引用它,比如我们使用一个共享的画刷资源:

   this.txtblk.Foreground = brush;

但是注意这有两个限制条件:

  •  1.通过TryConverter创建的(资源)对象不允许使用该(x:Name)元素特征
  •  2.使用x:Name资源,该名称在XMAL文件中必须是唯一的。

 

7.使用XAML样式

7.1 了解样式

  在前面的XAML资源的基础之上我们可以通过使用XAML样式进一步重用元素的样式代码。XAML样式基本上是为特定的元素类型分配的属性集合。XAML样式有两个重要的属性:x:Key(引用的键)TargetType(作用的元素类型)。下面我们来看一段实例代码:

复制代码
1         <Style x:Key="btnStyle" TargetType="Button">
2             <Setter Property="HorizontalAlignment" Value="Center"></Setter>
3             <Setter Property="VerticalAlignment" Value="Center"></Setter>
4             <Setter Property="Margin" Value="12 96"></Setter>
5             <Setter Property="FontSize" Value="30"></Setter>
6         </Style>
复制代码

 

这样使用定义好的XAML样式:

1   <Button Content="Create BlockText" Name="button1"   Style="{StaticResource btnStyle}" />

 

在样式中我们也可以使用其他已经定义好了的资源文件,例如我们已经定义了一个资源:

1         <system:Double x:Key="fontsize">
2             68
3         </system:Double>

 

在样式中我们可以这样使用定义好的资源:

复制代码
1         <Style x:Key="txtblkStyle" TargetType="TextBlock">
2             <Setter Property="HorizontalAlignment" Value="Center"></Setter>
3             <Setter Property="VerticalAlignment" Value="Center"></Setter>
4             <Setter Property="Margin" Value="12 96"></Setter>
5             <Setter Property="FontSize" Value="{StaticResource fontsize}"></Setter>
6         </Style>
复制代码

 

7.2 样式继承

  样式可以通过继承过程来将强或更改其他样式,我们可以通过使用Style标签的BasedOn属性来继承已经定义好的Style。例如我们继承之前定义的x:Key为btnSytle的样式,并且重新定义两个属性,具体的使用方式为:

1         <Style x:Key="btnStyle2" TargetType="Button" BasedOn="{StaticResource btnStyle}">
2             <Setter Property="HorizontalAlignment" Value="Left"></Setter>
3             <Setter Property="VerticalAlignment" Value="Bottom"></Setter>
4         </Style>

这样除了重新定义的两个属性,其他的属性都被x:Key为btnStyle2的样式继承了下来。

 

参考资料:《Programming Windows Phone 7 Microsoft Silverlight Edition》

作者:晴天猪

出处:http://www.cnblogs.com/IPrograming 

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

posted on 2012-05-03 17:20  voker  阅读(164)  评论(0编辑  收藏  举报

导航