Posted by: Zeeshan Amjad | September 21, 2011

Using ContentTemplateSelector


We already saw few example of ItemTemplateSelector. Now lets take a look at ContentTemplateSelector. As name suggested this uses to select data template for content control at run time. Not surprising this property is defined in ContentControl class. Here is a class diagram of ContentControl.

ContentControl

 

We are following the similar steps which we are using for ItemTemplateSelector. First create different data template in resource section.

Code Snippet
<DataTemplate x:Key="borderTemplate">
    <Border BorderThickness="1" BorderBrush="Brown" CornerRadius="5">
        <TextBlock Margin="5" Text="Border Template"/>
    </Border>
</DataTemplate>
<DataTemplate x:Key="twoTextBlockTemplate">
    <StackPanel>
        <TextBlock Margin="5" Text="First TextBlock"/>
        <TextBlock Margin="5" Text="Second TextBlock"/>
    </StackPanel>
</DataTemplate>

 

Then create a child class of DataTemplateSelector and override SelectTemplate method. Here is our class.

Code Snippet
public class MyContentTemplateSelector : DataTemplateSelector
{
    public DataTemplate BorderTemplate
    { get; set; }

    public DataTemplate TwoTextBlockTemplate
    { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        string value = item as string;

        if (value != null)
        {
            if (value == "Border Template String")
                return BorderTemplate;
            else if (value == "Two TextBlock Template String")
                return TwoTextBlockTemplate;
            return base.SelectTemplate(item, container);
        }
        else
            return base.SelectTemplate(item, container);
    }
}

 

Then create its object in XAML.

Code Snippet
<local:MyContentTemplateSelector
    x:Key="myContentTemplateSelector"
    BorderTemplate="{StaticResource borderTemplate}"
    TwoTextBlockTemplate="{StaticResource twoTextBlockTemplate}"/>

 

Then create two content control and assigned different content to them. Here is complete XAML code of the program.

Code Snippet
<Window x:Class="WpfContentTemplateSelector.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        xmlns:local="clr-namespace:WpfContentTemplateSelector"
        Title="ContentTemplateSelector" Height="200" Width="300">
    <Window.Resources>
        <DataTemplate x:Key="borderTemplate">
            <Border BorderThickness="1" BorderBrush="Brown" CornerRadius="5">
                <TextBlock Margin="5" Text="Border Template"/>
            </Border>
        </DataTemplate>
        <DataTemplate x:Key="twoTextBlockTemplate">
            <StackPanel>
                <TextBlock Margin="5" Text="First TextBlock"/>
                <TextBlock Margin="5" Text="Second TextBlock"/>
            </StackPanel>
        </DataTemplate>
        <local:MyContentTemplateSelector
            x:Key="myContentTemplateSelector"
            BorderTemplate="{StaticResource borderTemplate}"
            TwoTextBlockTemplate="{StaticResource twoTextBlockTemplate}"/>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ContentControl Grid.Column="0"
                        Name="contentControl1"
                        Margin="5"
                        ContentTemplateSelector="{StaticResource myContentTemplateSelector}"/>
        <ContentControl Grid.Column="1"
                        Name="contentControl2"
                        Margin="5"
                        ContentTemplateSelector="{StaticResource myContentTemplateSelector}"/>
    </Grid>
</Window>

And here is complete C# code of the program.

Code Snippet
using System.Windows;
using System.Windows.Controls;

namespace WpfContentTemplateSelector
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            ContentControl cc = new ContentControl();

            contentControl1.Content = "Border Template String";
            contentControl2.Content = "Two TextBlock Template String";
        }
    }

    public class MyContentTemplateSelector : DataTemplateSelector
    {
        public DataTemplate BorderTemplate
        { get; set; }

        public DataTemplate TwoTextBlockTemplate
        { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            string value = item as string;

            if (value != null)
            {
                if (value == "Border Template String")
                    return BorderTemplate;
                else if (value == "Two TextBlock Template String")
                    return TwoTextBlockTemplate;
                return base.SelectTemplate(item, container);
            }
            else
                return base.SelectTemplate(item, container);
        }
    }
}

 

Now we will see different data template for both content controls. Here is an output of the program.

ContentTemplateSelectorOutput

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: