This is the second post in the custom control series. You can read the first one where we created a custom control to select dates.
In this second post in the series, I want to show you when and how to use control templates. A primary reason to use control templates is when you need additional content inserted into a custom control at a pre-defined location. You can define a common UI that also displays unique content in different places. Check the references section at the end of this post to see other uses of control templates, such as redefining a control’s UI.
For your reference, I added a container custom control to our code sample repository. It’s a view with a header and an icon that can be tapped. Our content will be shown after the header. The header and the icon can be hidden, and we can bind a command to the icon.
In the following image, you can see three different instances of the custom control, each one with its own content.
Control Template Implementation
Usually, you will define the control template as a resource in a resource dictionary. In the following XAML code, I defined a control template and used the Key property to apply it to the ContentView with the ControlTemplate property. Instead of using Binding, I used the TemplateBinding markup extension that allows me to bind the ControlTemplate to properties defined on the custom control.
For example, the HeaderTitle property, defined in our custom control, will be used to set the text of the header. Using the ContentPresenter, I can set the place where the user content will be displayed. See the ContentPresenter tag in the sample XAML code below.
<ContentView xmlns="https://xamarin.com/schemas/2014/forms" xmlns:x="https://schemas.microsoft.com/winfx/2009/xaml" x:Class="CustomControlsSample.Container" ControlTemplate="{DynamicResource ContainerTemplate}"> <ContentView.Resources> <ResourceDictionary> <ControlTemplate x:Key="ContainerTemplate"> <Frame Style="{DynamicResource FrameContainerStyle}"> <StackLayout Spacing="0"> <Grid Style="{DynamicResource BoxHeadTitleContainer}" IsVisible="{TemplateBinding HeaderTitleIsVisible}"> <Label Style="{DynamicResource BoxHeadTitle}" Text="{TemplateBinding HeaderTitle}" /> <Image Style="{DynamicResource BoxHeadIcon}" IsVisible="{TemplateBinding IconIsVisible}"> <Image.Source> <!--Can't use style https://github.com/xamarin/Xamarin.Forms/issues/6421--> <FontImageSource Glyph="{TemplateBinding Icon}" Color="{DynamicResource BoxHeadTextColor}" FontFamily="FA" Size="18" /> </Image.Source> <Image.GestureRecognizers> <TapGestureRecognizer Command="{TemplateBinding OnIconTappedCommand}"/> </Image.GestureRecognizers> </Image> </Grid> <StackLayout Style="{DynamicResource FrameContentStyle}"> <ContentPresenter /> </StackLayout> </StackLayout> </Frame> </ControlTemplate> </ResourceDictionary> </ContentView.Resources> </ContentView>
Consuming a Custom Control
In the MainPage.xaml file, you can see the use of the new custom control. Also, notice that I have the binding to MainPage’s command view model on line 6 to clean the dates when you tap on the icon, and the most important part, the user’s content starting in line 11 which will be shown inside the custom control. Notice that the line numbers I’m mentioning here are only for the partial code shown in this blog post, and not the full files in the code repository linked above.
. . . <!--Select dates--> <customcontrolssample:Container OnIconTappedCommand="{Binding CleanDate}" Icon="" IconIsVisible="True" HeaderTitle="Select your dates" HeaderTitleIsVisible="True"> <StackLayout Padding="16"> <customcontrolssample:CustomDateTimePicker SelectedDateTime="{Binding StartDateTime, Mode=TwoWay}" Caption="Start Date"/> <customcontrolssample:CustomDateTimePicker SelectedDateTime="{Binding EndDateTime, Mode=TwoWay}" Caption="End Date"/> </StackLayout> </customcontrolssample:Container> . . .
Check out the references section below to learn about how to use custom fonts.
That’s all for now, please let me know what do you think in the comments section. Thanks for reading!