第七章：XAML vs. code（3）

属性元素语法

这里有一些C＃与第4章中的FramedText代码相似。在一个语句中，它实例化一个Frame和一个Label，并将Label设置为Frame的Content属性：

new Frame
{
    OutlineColor = Color.Accent,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Content = new Label
    {
        Text = "Greetings, Xamarin.Forms!"
    }
};           

但是当你开始在XAML中复制它时，你可能会在设置Content属性的时候变得有点困难：

<Frame OutlineColor="Accent"
       HorizontalOptions="Center"
       VerticalOptions="Center"
       Content=" what goes here? " />           

如何将Content属性设置为整个Label对象？

这个问题的解决方案是XAML语法的最基本特征。 第一步是将Frame标签分成开始标签和结束标签：

<Frame OutlineColor="Accent"
       HorizontalOptions="Center"
       VerticalOptions="Center">
 
</Frame>           

在这些标签中，添加两个由元素（Frame）和您想要设置的属性（Content）组成的标签，并添加一个句点：

<Frame OutlineColor="Accent"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Frame.Content>
 
    </Frame.Content>
</Frame>           

现在把标签放在这些标签中：

<Frame OutlineColor="Accent"
       HorizontalOptions="Center"
       VerticalOptions="Center">
    <Frame.Content>
        <Label Text="Greetings, Xamarin.Forms!" />
    </Frame.Content>
</Frame>           

该语法是如何将Label设置为Frame的Content属性。

您可能想知道这个XAML功能是否违反了XML语法规则。 它不是。 这段时间在XML中没有特殊含义，所以Frame.Content是一个完全有效的XML标签。 然而，XAML强加了关于这些标签的规则：Frame.Content标签必须出现在Frame标签中，并且不能在Frame.Content标签中设置属性。 设置为Content属性的对象显示为这些标记的XML内容。

一旦引入了这个语法，就需要一些术语。 在上面显示的最终XAML代码片段中：

• 框架和标签是用XML元素表示的C＃对象。 它们被称为对象元素。
• OutlineColor，HorizontalOptions，VerticalOptions和Text是作为XML属性提供的C＃属性。 他们被称为财产属性。
• Frame.Content是以XML元素表示的C＃属性，因此称为属性元素。

属性元素在现实生活中很常见。 本章和未来章节中将会看到许多示例，您很快就会发现属性元素成为您使用XAML的第二本质。 但要小心：有时开发人员必须记得太多，以至于我们忘记了基本知识。 即使在您使用XAML一段时间后，您可能会遇到这样的情况，即似乎无法将特定对象设置为特定属性。 解决方案通常是一个属性元素。

您还可以对简单的属性使用属性元素语法，例如：

<Frame HorizontalOptions="Center">
    <Frame.VerticalOptions>
        Center
    </Frame.VerticalOptions>
    <Frame.OutlineColor>
        Accent
    </Frame.OutlineColor>
    <Frame.Content>
        <Label>
            <Label.Text>
                Greetings, Xamarin.Forms!
            </Label.Text>
        </Label>
    </Frame.Content>
</Frame>           

现在，Frame的VerticalOptions和OutlineColor属性以及Label的Text属性都已成为属性元素。 这些属性的值始终是不带引号的属性元素的内容。

当然，将这些属性定义为属性元素没有多大意义。 这是不必要的，一切都很冗长。 但它的工作原理应该如此。

让我们进一步：不是将HorizontalOptions设置为“Center”（对应于静态属性LayoutOptions.Center），您可以将HorizontalOptions表示为属性元素，并将其设置为LayoutOptions值并设置其各个属性：

<Frame>
    <Frame.HorizontalOptions>
        <LayoutOptions Alignment="Center"
                       Expands="False" />
    </Frame.HorizontalOptions>
    <Frame.VerticalOptions>
        Center
    </Frame.VerticalOptions>
    <Frame.OutlineColor>
        Accent
    </Frame.OutlineColor>
    <Frame.Content>
       <Label>
            <Label.Text>
                Greetings, Xamarin.Forms!
            </Label.Text>
        </Label>
    </Frame.Content>
</Frame>```

您还可以将LayoutOptions的这些属性表示为属性元素：
           

<Frame.HorizontalOptions>
    <LayoutOptions>
         <LayoutOptions.Alignment>
             Center
         </LayoutOptions.Alignment>
         <LayoutOptions.Expands>
             False
           </LayoutOptions.Expands>
    </LayoutOptions>
</Frame.HorizontalOptions>
           

`

您不能将属性设置为属性属性和属性元素。 这是设置属性两次，这是不允许的。 请记住，没有其他内容可以出现在属性元素标签中。 设置为属性的值始终是这些标记的XML内容。

现在你应该知道如何在XAML中使用StackLayout。 首先将Children属性表示为属性元素StackLayout.Children，然后将StackLayout的子元素作为属性元素标记的XML内容。 下面是一个例子，第一个StackLayout的每个孩子都是另一个具有水平方向的StackLayout：

<StackLayout>
    <StackLayout.Children>
        <StackLayout Orientation="Horizontal">
            <StackLayout.Children>
                <BoxView Color="Red" />
                <Label Text="Red"
                            VerticalOptions="Center" />
            </StackLayout.Children>
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <StackLayout.Children>
                <BoxView Color="Green" />
                <Label Text="Green"
                       VerticalOptions="Center" />
            </StackLayout.Children>
         </StackLayout>
         <StackLayout Orientation="Horizontal">
             <StackLayout.Children>
                 <BoxView Color="Blue" />
                 <Label Text="Blue"
                        VerticalOptions="Center" />
             </StackLayout.Children>
         </StackLayout>
    </StackLayout.Children>
</StackLayout>           

每个水平的StackLayout都有一个带有颜色的BoxView和一个带有该颜色名称的标签。

当然，这里的重复标记看起来相当可怕！ 如果你想要显示16种颜色怎么办？ 还是140？ 一开始可能会有很多复制和粘贴成功，但如果您需要稍微改进视觉效果，那么您的状态会很糟糕。 在代码中，您可以在循环中执行此操作，但XAML没有此功能。

当标记威胁过于重复时，您可以随时使用代码。 在XAML中定义一些用户界面而在代码中定义一些用户界面是非常合理的。 但是还有其他的解决方案，你会在后面的章节中看到。