第七章：XAMLvs.code（3）

wangccsy發表於2018-06-24

屬性元素語法
這裡有一些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中定義一些使用者介面而在程式碼中定義一些使用者介面是非常合理的。 但是還有其他的解決方案，你會在後面的章節中看到。


相關文章