Xamarin XAML語言教程基本頁面ContentPage占用面積內容頁面的派生關系與屬性

Xamarin XAML語言教程基本頁面ContentPage占用面積內容頁面的派生關系與屬性

3.內容頁面的派生關系

ContentPage頁面派生自Page，同時它又是其他頁面的父類。派生關系圖如圖14.6所示。

注意：ContentPage頁面可以作為其他頁面的一個元素使用。

4.屬性

ContentPage頁面定義了一個用來設置頁面內容的屬性Content屬性，開發者可以將這個屬性設置為一個控件、一個視圖或者是一個布局。

（1）開發者可以將Content屬性的屬性設置為按鈕控件、標簽控件等，如以下的代碼片段：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App2"

             x:Class="App2.MainPage">

  <Label Text="Welcome to Xamarin Forms!"

           VerticalOptions="Center"

           HorizontalOptions="Center" />

</ContentPage>

在此代碼中我們將Content屬性設置為了標簽控件。

注意：在屬性和屬性值一章中，我們提到了內容屬性是可以省略的。Content屬性就是一個內容屬性，所以我們在代碼中將此屬性進行了省略。

（2）Content屬性除了可以設置為控件外，還可以設置為一個內容視圖，如以下的代碼：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App2"

             x:Class="App2.MainPage">

  <ContentView>

    <Label Text="Accept what was and what is, and you’ll have more positive energy to pursue what will be."

           VerticalOptions="Center"

           HorizontalOptions="Center" />

  </ContentView>

</ContentPage>

（3）ContentPage頁面的Content屬性也可以設置為一個對象。當我們將其設置為控件或者是內容視圖時，只會在頁面上看到一個元素。如果開發者要在頁面上出現多個元素，就需要使用到布局，在布局中可以有多個視圖或者控件。如以下的代碼：

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:App2"

             x:Class="App2.MainPage">

  <StackLayout Spacing="10"

               VerticalOptions="CenterAndExpand"

                 HorizontalOptions="Center">

    <Label Text="靜夜思"

       FontSize="30"

       FontAttributes="Bold"

       HorizontalOptions="Center"/>

    <Label Text="床前明月光，"

           FontSize="18"/>

    <Label Text="疑是地上霜。"

           FontSize="18"/>

    <Label Text="舉頭望明月，"

           FontSize="18"/>

    <Label Text="低頭思故鄉。"

           FontSize="18"/>

  </StackLayout>

</ContentPage>

在此代碼中，我們將布局設置為了堆棧布局，在此布局中又放置了5個標簽控件。