How to use TemplateSelector for Xamarin Forms TemplatedView? - forms

Question

I need to use a TemplateSelector for the ControlTemplate in TemplatedView. Is there any way to handle ControlTemplateSelector, similar to how DataTemplateSelector is done?
<ContentPage.Resources>
<ResourceDictionary>
<data:MediaTemplateSelector x:Key="headerTemplateSelector"
VideoTemplate="{StaticResource VideoHeaderTemplate}"
ImageTemplate="{StaticResource ImageHeaderTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<TemplatedView ControlTemplate="{StaticResource headerTemplateSelector}"/>
</ContentPage.Content>

Answer 1

ControlTemplate and DataTemplate works in a different manner.
I started with ControlTemplates trying to do something similar to DataTemplateSelector but defining an item appearance at page level instead at item in a collection like a ListView or CollectionView. So confusing at the beginning because it works totally different... first: forget the concept of DataTempateSelector, has nothing to do with ControlTemplates.
The code i will present has some properties/class names in spanish, hope you understand the idea anyway. First, suppose you have a property on your ViewModel that needs to be presented in a different manner depending on the same or other ViewModel property.
First, define a ContentView class that later you will put as a part of your page (could be a TemplatedView, but, i'm getting an exception when i try to put the templatedView directly on a page, so, i use a ContentView):
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local1="clr-namespace:MrWaiter.Resources;assembly=MrWaiter"
x:Class="MrWaiter.Views.ComandaControlTemplate"
ControlTemplate="{StaticResource ComandaPropia}">
<ContentView.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="ComandaPropia">
<Frame BackgroundColor="{x:StaticResource Key=pLight}" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
Command="{TemplateBinding MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
<ControlTemplate x:Key="ComandaInvitaA" >
<Frame BackgroundColor="DarkGray" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir" x:FieldModifier="Public"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
<ControlTemplate x:Key="ComandaInvitadaPor">
<Frame BackgroundColor="{x:StaticResource Key=sColor}" CornerRadius="10" HasShadow="True" HeightRequest="32"
Padding="0" Margin="0">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
<Label.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2"
BindingContext="{TemplateBinding BindingContext}"
Command="{TemplateBinding Parent.BindingContext.MostrarComandasCommand}" >
</TapGestureRecognizer>
</Label.GestureRecognizers>
</Label>
<Switch IsToggled="{Binding MostrarDetallado}"
IsVisible="False"
OnColor="{StaticResource Key=sLight}"
ThumbColor="{StaticResource Key=sDark}"
></Switch>
<Button FontFamily="{StaticResource MaterialFontFamily}"
HorizontalOptions="End" x:Name="botonExpandir"
Text="{x:Static local1:IconFont.Play}" BackgroundColor="Transparent"
Rotation="-90" FontSize="32" TextColor="White"
WidthRequest="55"
Margin="0,0,0,0"
Padding="0,0,0,0"
Command="{TemplateBinding MaximizeCommand}"
VerticalOptions="CenterAndExpand"
>
</Button>
</StackLayout>
</Frame>
</ControlTemplate>
</ResourceDictionary>
</ContentView.Resources>
</ContentView>
The important stuff is this property of contentView, that defines a kind of ControlTemplate default value:
ControlTemplate="{StaticResource ComandaPropia}"
And pay attention on how the Data Binding is defined inside the ControlTemplates, using TemplatedBindings instead Bindings:
<Label FontSize="Large"
HorizontalOptions="StartAndExpand"
TextColor="White"
Margin="5,0,0,0"
BindingContext="{TemplateBinding BindingContext}"
Text="{TemplateBinding Parent.BindingContext.Comanda.Numero, StringFormat='Comanda {0}'}">
On the ContentView Code Behind you must create a BindableProperty to allow DataBinding between a property on View and a property on ViewModel (maybe it could be done with DataTriggers, but im's learning Xamaring and i want to practice with BindableProperties). That Property, will be responsible to select the ControlTemplate, pay attention to Method HandleTipoComandaPropertyChanged, its where we select the ControlTemplate on propertyChanged:
public partial class ComandaControlTemplate : ContentView
{
public static BindableProperty TipoComandaProperty = BindableProperty.Create(
propertyName: "TipoComanda",
returnType: typeof(Controls.TipoComandaEnum),
declaringType: typeof(ComandaControlTemplate),
defaultValue: Controls.TipoComandaEnum.Propia,
defaultBindingMode: BindingMode.TwoWay,
propertyChanged: HandleTipoComandaPropertyChanged);
private static void HandleTipoComandaPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var targetView = (ComandaControlTemplate)bindable;
if (targetView != null)
{
if ((Controls.TipoComandaEnum)newValue != (Controls.TipoComandaEnum)oldValue)
{
if ((Controls.TipoComandaEnum)newValue== Controls.TipoComandaEnum.Propia)
targetView.ControlTemplate =(ControlTemplate)targetView.Resources["ComandaPropia"];
else if ((Controls.TipoComandaEnum)newValue == Controls.TipoComandaEnum.Invitada)
targetView.ControlTemplate = (ControlTemplate)targetView.Resources["ComandaInvitadaPor"];
else if ((Controls.TipoComandaEnum)newValue == Controls.TipoComandaEnum.Invitacion)
}
}
}
public Controls.TipoComandaEnum TipoComanda
{
get
{
return Controls.TipoComandaEnum)base.GetValue(TipoComandaProperty);
}
set
{
base.SetValue(TipoComandaProperty, value);
}
}
public ComandaControlTemplate()
{
InitializeComponent();
}
}
Finally, in your page, place your templated ContentView whenever you need and bind the BindableProperty we created in View to the property on ViewModel that will determine the ControlTemplate presented:
<views:ComandaControlTemplate TipoComanda="{Binding BindingContext.TipoComanda}"></views:ComandaControlTemplate>
Note that TipoComanda is the BindableProperty we created on templatedView, and it as an equivalent property on ViewModel.
Note: that's a general idea on how can we use ControlTemplates, it works, but maybe there are better ways to acomplish.