Xamarin XAML语言教程基本页面ContentPage占用面积内容页面的派生关系与属性

Xamarin XAML语言教程基本页面ContentPage占用面积内容页面的派生关系与属性

3.内容页面的派生关系

ContentPage页面派生自Page，同时它又是其他页面的父类。派生关系图如图14.6所示。

图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个标签控件。