Xamarin XAML語言教程控制元件模板的模板繫結

Xamarin XAML語言教程控制元件模板的模板繫結

 控制元件模板的模板繫結

為了可以輕鬆更改控制元件模板中控制元件上的屬性值，可以在控制元件模板中實現模板繫結功能。模板繫結允許控制元件模板中的控制元件將資料繫結到公共屬性上。這時需要使用TemplateBinding。它可以將控制元件模板中的控制元件的屬性繫結到擁有控制元件模板的目標檢視的父級上的可繫結屬性上。

注意：（1）TemplateBinding類似於現有的Binding，不同之處在於TemplateBinding的源總是自動設定為擁有控制元件模板的目標檢視的父級。（2）不支援在控制元件模板之外使用TemplateBinding。

【示例14-5：ControlTemplateDemo】以下將以專案ControlTemplateDemo為基礎，在控制元件模板中實現模板繫結功能。具體的操作步驟如下：

（1）開啟MainPage.xaml檔案，編寫程式碼，實現可繫結屬性的定義。程式碼如下：

 

• namespace ControlTemplateDemo
• {
•     public partial class MainPage : ContentPage
•     {
•         bool originalTemplate = true;
•         ControlTemplate tealTemplate;
•         ControlTemplate aquaTemplate;
•         public static readonly BindableProperty HeaderTextProperty = BindableProperty.Create("HeaderText",
•                                                                            typeof(string),
•                                                                            typeof(MainPage),
•                                                                            "Knowledge is power.");
•         public static readonly BindableProperty FooterTextProperty = BindableProperty.Create("FooterText",
•                                                                           typeof(string),
•                                                                           typeof(MainPage),
•                                                                           "Xamarin.Froms XAML");
•         public MainPage()
•         {
•             InitializeComponent();
• ……                        //此處省略了對tealTemplate和aquaTemplate物件的例項化
•         }
•         public string HeaderText
•         {
•             get
•             {
•                 return (string)GetValue(HeaderTextProperty);
•             }
•         }
•         public string FooterText
•         {
•             get
•             {
•                 return (string)GetValue(FooterTextProperty);
•             }
•         }
• ……                                //此處省略了對OnButtonClicked方法的實現
•     }
• }

 

（2）開啟App.xaml檔案，編寫程式碼，在第一個構建的ControlTemplate中實現模板繫結功能。程式碼如下：

 

• <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="{TemplateBinding Parent.HeaderText}"
•            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="{TemplateBinding Parent.FooterText}"
•            TextColor="White"
•            FontSize="18"
•            VerticalOptions="Center" />
•   </Grid>
• </ControlTemplate>

 

在此程式碼中，我們將兩個Label控制元件的Text屬性實現了模板繫結功能，在上文中我們提到了屬性使用模板繫結將其繫結到擁有ControlTemplate的目標檢視的父級上的可繫結屬性上。但是，在我們的程式碼中，模板繫結繫結到Parent.HeaderText和Parent.FooterText上，而不是HeaderText和FooterText上。這是因為在此程式碼中，可繫結屬性是在目標檢視的祖父級上定義的，而不是父級。

注意：模板繫結的源始終自動設定為擁有控制元件模板的目標檢視的父級，在此專案中是ContentView例項。模板繫結使用Parent屬性返回ContentView例項的父元素，這是ContentPage例項。

此時執行程式，會看到和圖14.12~14.14一樣的執行效果。