Xamarin XAML語言教程構建ControlTemplate控制元件模板

控制元件模板ControlTemplate

ControlTemplate是從Xamarin.Forms 2.1.0開始被引入的。ControlTemplate被稱為控制元件模板，它將頁面的外觀和內容進行了分離，從而讓開發者可以更方便的建立基於主題的頁面。本節將講解控制元件模板相關的內容，其中包括構建控制元件模板以及控制元件模板的模板繫結等內容。

構建控制元件模板

控制元件模板可以在應用程式級別中構建，也可以在頁面級別中構建。以下將對這兩個構建方式進行講解。

1.應用程式級別構建

如果開發者要在應用程式級別構建控制元件模板，首先必須將ResourceDictionary新增到App類中，然後在ResourceDictionary中實現模板的構建。其語法形式如下：

<Application>
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="KeyName">
……
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>

其中，KeyName指定一個字典鍵，用來指代控制元件模板。

構建好模板後，我們需要將這個模板控制元件顯示出來，此時就需要可以模板化的檢視。在這些檢視中都會存在一個ControlTemplate屬性。將此屬性設定為建立的控制元件模板後，控制元件模板就可以進行顯示了。在Xamarin.Forms目前只有4個檢視包含ControlTemplate屬性，這4個檢視如下：

ContentPage：內容頁面
ContentView：內容檢視
TemplatedPage：模板頁面
TemplatedView：模板檢視

【示例14-3：ControlTemplateDemo】下面將在應用程式級別中構建控制元件模板，實現應用程式主題的切換。具體的操作步驟如下：

（1）開啟App.xaml檔案，編寫程式碼，實現在應用程式級別中構建控制元件模板，程式碼如下：

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns=""
xmlns:x=""
x:Class="ControlTemplateDemo.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.8*" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.05*" />
<ColumnDefinition Width="0.95*" />
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2"
Color="Teal" />
<Label Grid.Column="1"
Text="Knowledge is power."
TextColor="White"
FontSize="18"
VerticalOptions="Center" />
<ContentPresenter Grid.Row="1"
Grid.ColumnSpan="2" />
<BoxView Grid.Row="2"
Grid.ColumnSpan="2"
Color="Teal" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Xamarin.Froms XAML"
TextColor="White"
FontSize="18"
VerticalOptions="Center" />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="AquaTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.1*" />
<RowDefinition Height="0.8*" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.05*" />
<ColumnDefinition Width="0.95*" />
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2"
Color="Aqua" />
<Label Grid.Column="1"
Text="Knowledge is power."
TextColor="Blue"
FontSize="18"
VerticalOptions="Center" />
<ContentPresenter Grid.Row="1"
Grid.ColumnSpan="2" />
<BoxView Grid.Row="2"
Grid.ColumnSpan="2"
Color="Aqua" />
<Label Grid.Row="2"
Grid.Column="1"
Text="Xamarin.Froms XAML"
TextColor="Blue"
FontSize="18"
VerticalOptions="Center" />
</Grid>
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>

在此程式碼中，我們構建了兩個控制元件模板，一個為TealTemplate控制元件模板，另一為AquaTemplate控制元件模板。

Xamarin XAML語言教程構建ControlTemplate控制元件模板