此页面有用吗?
您对此内容的反馈非常重要。 请告诉我们您的想法。
更多反馈?
1500 个剩余字符
导出 (0) 打印
全部展开
信息
您所需的主题如下所示。但此主题未包含在此库中。

快速入门:使用 XAML 为 Windows Phone 8 创建用户界面

2014/6/18

适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

可扩展应用程序标记语言 (XAML) 用于定义 Windows Phone 用户界面。XAML 是一种声明性语言,可用于创建应用 UI,如控件、形状、文本和其他 Windows Phone 屏幕内容。XAML 包含与 HTML 中所用元素和特性类似的元素及特性。但是,XAML 基于 XML,因此必须遵循 XML 规则(包括采用良好的格式)。您可能会问,“如果我只打算使用 Visual Studio 或 Blend for Visual Studio 等工具来创建 UI,我为什么还要考虑 XAML?”即使有能够生成标记的工具,您也会不可避免地想要深入了解或调整 XAML。此外,有时当您想要进行精细的控制或只是想要了解发生了什么的时候,亲手编写 UI 代码通常会更为容易。

本主题包括以下部分。

下面是创建按钮的简单 XAML 示例。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>

运行应用时,它看起来像下面这样:

Windows Phone emulater image with button control

Button 控件是由 <Button> 元素指定的。WidthHeight 特性指定按钮的大小。当您在 Visual Studio 中创建新的 Windows Phone 应用时,将生成 <Grid> 且它将被用来放置对象。若要了解有关屏幕布局的详细信息,请参阅 Windows Phone 8 的布局

您可以使用 Visual Studio 来生成 XAML。例如,您可以将按钮从“工具箱”拖到设计图面。下面演示了 Visual Studio 可能会生成的 XAML。(XAML 的外观将有所不同。)

<Grid x:Name="ContentGrid" Grid.Row="1">
   <Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="152,273,0,0" Name="button1" VerticalAlignment="Top" Width="160" />
</Grid>

请注意,Visual Studio 会添加一些其他特性(例如 HorizontalAlignmentMargin)来放置按钮。如果您的需求非常明确,这种额外的“管道铺设”可能不适合。当然,您也可以使用 Visual Studio UI 更改这些特性;但在某些情况中,您可能希望直接编辑 XAML。

使用声明性语言(如 XAML)的最大好处之一是:可以明确划分构成 UI 的标记和用于使应用执行操作的代码。例如,您团队中的设计人员可以设计 UI 体验,然后将 XAML 交给开发人员来添加程序代码。即使设计人员和开发人员是同一个人(经常是这种情况),您也可以将您的 UI 保存在 XAML 文件 (.xaml) 中并将您的程序代码保存在代码隐藏文件( .cs 和 .vb)中。

XAML 元素(如 <Button />)与程序代码中的实例化对象等效。例如,请考虑以下 XAML。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <Button Height="72" Width="160" Content="Click Me" />
</Grid>


下面演示了如何用 C# 或 Visual Basic 编写此 XAML

' Initialize the button
Dim myButton As New Button()' Set its properties
myButton.Width = 160
myButton.Height = 72
myButton.Content = "Click Me"
'Attach it to the visual tree, specifically as a child of 
'the Grid object (named 'ContentPanel'). In other words, position
'the button in the UI.
ContentPanel.Children.Add(myButton)

对于 UI,XAML 的优点是比程序代码更易于阅读并且更为简洁。但是,有时会需要使用程序代码来动态创建 UI。

下面是用于在 XAML 中指定属性值的两种方式。

  • 特性元素语法

  • 属性元素语法

特性元素语法是您在以上示例中看到的并可能在 HTML 中常见的 attribute="value" 语法。在下面的示例中,将创建一个红色矩形。Fill 是一种已设置为预定义颜色名称的特性。

<Rectangle Fill="Red" />

或者,也可以使用属性元素语法指定颜色值。

<Rectangle>
   <Rectangle.Fill>
      <SolidColorBrush Color="Red" />
   </Rectangle.Fill>
</Rectangle>

在此情况下,您需要显式地指定作为 Fill 属性所需类型的 SolidColorBrush 对象,而不是仅仅使用字符串 Red。从此示例中,您可能会推断出属性元素语法在执行相同的操作时要事倍功半。但是,并非所有的属性值都可以使用简单的特性字符串来指定。例如,如果您需要指定用作某个属性值的对象的多个属性,您很可能需要使用属性元素语法。下面的示例将创建一个 Rectangle,但是它将使用渐变,而不是简单地使用红色填充。

<!-- This rectangle is painted with a diagonal linear gradient. -->
<Rectangle Width="200" Height="200">
   <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
         <GradientStop Color="Yellow" Offset="0.0" />
         <GradientStop Color="Red" Offset="0.25" />
         <GradientStop Color="Blue" Offset="0.75" />
         <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
   </Rectangle.Fill>
</Rectangle>

运行应用时,它看起来像下面这样:

Gradient filled rectangle control

如您所看到的,Fill 属性使用复杂的对象 (LinearGradientBrush) 来创建渐变。在这些情况下,您需要使用属性元素语法,而不是简单地将值指定为分配给某个特性的字符串。

在 XAML 中,您拥有能够将其他元素(节点)置于其下方(子元素)的元素(例如,<Button /><Grid>)。此父/子关系可以指定诸如如何在屏幕上放置对象以及它们如何响应用户启动事件等内容。请看下面的示例。

运行应用时,它看起来像下面这样:

Stack panel control showing element placement
<Grid x:Name="ContentPanel" Background="Red" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" >
      <TextBlock Name="firstTextBlock" FontSize="30">First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30">Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30">Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

蓝色 StackPanel 包含在红色 Grid 中。TextBlock 元素包含在 StackPanel 中(TextBlock 元素是 StackPanel 的子元素)。此外,TextBlock 元素彼此堆叠,以便它们能够在 XAML 中声明。

下面的树示意图演示了元素之间的关系。

Tree diagram depicting relationships among UI elem

除了能够确定内容的呈现方式,可视树还能够影响事件的处理方式。许多典型事件(称为“路由事件”)会在树中向上“冒泡”事件。例如,您可以将事件处理程序附加到能够处理单击鼠标左键时出现的情况(MouseLeftButtonDown 事件)的 StackPanel。下面的 XAML 演示了如何将名为 commonMouseHandlerMouseLeftButtonDown 事件处理程序添加到 StackPanel

<Grid Background="Red" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel Margin="20" Background="Blue" MouseLeftButtonDown="commonMouseHandler">
      <TextBlock Name="firstTextBlock" FontSize="30" >First TextBlock</TextBlock>
      <TextBlock Name="secondTextBlock" FontSize="30" >Second TextBlock</TextBlock>
      <TextBlock Name="thirdTextBlock" FontSize="30" >Third TextBlock</TextBlock>
   </StackPanel>
</Grid>

下面的代码演示了用于处理事件的程序代码。

Private Sub commonMouseHandler(ByVal sender As System.Object, _ByVal e As System.Windows.Input.MouseButtonEventArgs)    
   Dim feSource As FrameworkElement = e.OriginalSource
   Select Case feSource.Name
      Case "firstTextBlock"
         firstTextBlock.Text = firstTextBlock.Text & " Click!"
      Case "secondTextBlock"
         secondTextBlock.Text = secondTextBlock.Text & " Click!"
      Case "thirdTextBlock"
         thirdTextBlock.Text = thirdTextBlock.Text & " Click!"
   End Select
End Sub

下图演示了事件如何在树中向上冒泡。

Tree diagram depicting event hierarchy

例如,我们假设用户单击了 TextBlock

  1. MouseLeftButtonDown 事件将向上冒泡到父 StackPanel

  2. 接下来,MouseLeftButtonDown 事件将在树中向上冒泡到 Grid

由于事件继续在树中向上移动,您也可以“侦听”Grid 元素中的 MouseLeftButtonDown 事件。

使用 XAML,您可以做比显示静态 UI 更多的事情。您可以创建动画、嵌入视频和仅使用标记绑定到数据。下面是使用 XAML 创建的简单动画的示例。

<StackPanel Background="#FDF5E6">
   <StackPanel.Resources>
      <Storyboard x:Name="myStoryboard">
         <DoubleAnimationUsingKeyFrames
         Storyboard.TargetName="myRectangle"
         Storyboard.TargetProperty="Height">
         <!-- This key frame resets the animation to its starting
               value (30) at the beginning of the animation. -->
         <LinearDoubleKeyFrame Value="30" KeyTime="0:0:0" />
         <!-- Spline animations are used to create acceleration. This
               SplineDoubleKeyFrame creates an animation that starts out slow
               and then speeds up. The rectangle "falls". -->
         <SplineDoubleKeyFrame KeySpline="0,0 1,0" Value="300" KeyTime="0:0:0.8" />
         <!-- This spline animation creates the "bounce" at the end where
               the rectangle shortens its length quickly at first and then
               slows down and stops. -->
         <SplineDoubleKeyFrame KeySpline="0.10, 0.21 0.00, 1.0" Value="250"
            KeyTime="0:0:1.5" />
         </DoubleAnimationUsingKeyFrames>
      </Storyboard>
   </StackPanel.Resources>
   <Rectangle x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" 
      Width="200" Height="30" />
</StackPanel>
' When the user clicks the rectangle, the animation begins.
Private Sub Mouse_Clicked(ByVal sender As Object, ByVal e As MouseEventArgs)
   myStoryboard.Begin
End Sub

这是使用 XAML 指定内容的行为(而不是指定布局或其他静态 UI)的示例。Storyboard 元素可定义一些动画的常见属性,例如,什么对象要进行动画处理。Storyboard 的子元素(例如,LinearDoubleKeyFrame)指定动画的执行方式。

显示:
© 2015 Microsoft