Xamarin XAML Language Tutorial Building ControlTemplate control Templates

The Xamarin XAML language tutorial builds a ControlTemplate control template control Template ControlTemplate

ControlTemplate was introduced from the beginning of Xamarin.Forms 2.1.0. ControlTemplate is called a control template that separates the appearance and content of the page, making it easier for developers to create theme-based pages. This section explains what the control template is about, including building control templates and template bindings for control templates.

Building a control template

Control templates can be built at the application level, or they can be built at the page level. These two building methods are explained below.

1. Application-Level Building

If developers want to build control templates at the application level, you must first add ResourceDictionary to the App class, and then implement the template build in ResourceDictionary. Its grammatical form is as follows:

• <Application>
• <Application.Resources>
• <ResourceDictionary>
• <controltemplate x:key= "KeyName" >
• ......
• </ControlTemplate>
• </ResourceDictionary>
• </Application.Resources>
• </Application>

where keyname specifies a dictionary key that is used to refer to the control template.

After we've built the template, we need to display the template control, which requires a view that can be templated. There is a ControlTemplate property in these views. When you set this property to the control template you created, the control template can be displayed. There are currently only 4 views in xamarin.forms that contain the ControlTemplate attribute, and these 4 views are as follows:

• Contentpage: Content Page
• Contentview: Content View
• Templatedpage: Template page
• Templatedview: Template View

Under Example 14-3:controltemplatedemo, the control template is built at the application level to enable switching of the application theme. The following steps are described:

(1) Open the App.xaml file, write the code, implement the control template at the application level, the code is as follows:

• <?xml version= "1.0" encoding= "Utf-8"?>
• <application xmlns= "Http://xamarin.com/schemas/2014/forms"
• xmlns:x= "Http://schemas.microsoft.com/winfx/2009/xaml"
• x:class= "Controltemplatedemo.app" >
• <Application.Resources>
• <ResourceDictionary>
• <!--Building Control templates--
• <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>
• <!--Building Control templates--
• <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>

In this code, we have built two control templates, one for the Tealtemplate control template and the other for the Aquatemplate control template.

Xamarin XAML Language Tutorial Building ControlTemplate control Templates