Multiple ContentTemplate in one RadTabControl dynamically

[Jose]

Hello.

I have a TabControl and I want to "switch" over templates (ContentTemplates) depending on the object type that my collection brings.

Basically my ItemsSource's source is a TabItemModel and this has two properties, TabText:string and Content:object
 
public class TabItemModel
{
public string TabText {get;set;}
public object Content {get;set;}
}

In my viewmodel i have a ObservableCollection<TabItemModel> that is bound to the ItemsSource property of my TabControl.

Let's say that i create a 5 items dimension collection and i assign to each Content property in my TabItemModel 5 objects of different types.

ObservableCollection<TabItemModel> details = new ObservableCollection<TabItemModel>();
details.Add(new TabItemModel{ TabText = "Customer", Content= new Customer()));
details.Add(new TabItemModel{ TabText = "Customer's Car", Content= new Car()));
details.Add(new TabItemModel{ TabText = "Customer's House", Content= new House()));
details.Add(new TabItemModel{ TabText = "Customer's Job", Content= new CustomerJob()));
details.Add(new TabItemModel{ TabText = "Customer's Mistress", Content= new CustomerMistress())); //--> just to spice up this example :)

in my XAML

    <UserControl.Resources>
        <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentControl Content="{Binding TabText}"/>
                                <Button Grid.Column="2"  Content="X" Width="18"
                                       Height="18" HorizontalAlignment="Center"
                                    HorizontalContentAlignment="Center"
                                    VerticalContentAlignment="Center"
                                       VerticalAlignment="Center"
                                       common:RoutedEventHelper.EnableRoutedClick="True" />
                            </Grid>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                  </Style>
    </UserControl.Resources>

<telerik:RadTabControl
            telerik:StyleManager.Theme="Summer"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            x:Name="radTabControl1" ItemContainerStyle="{StaticResource ClosableStyle}"
            ItemsSource="{Binding RequestedCustomers, Mode=TwoWay}" SelectedIndex="{Binding SelectedTabIndex, Mode=TwoWay}" />

this work good (when it comes to the tab text. it displays the value no problem... but i feel clueless about how to have multiple ContentTemplate definitions for my tabcontrol. I was thinking about a Selector... is that the right path to go?

Thank you so much for any help

[Jose]

Ok, i've been reading a little bit telerik documentation...

Basically i have to create as many DataTemplates as i want, then create a TemplateSelector and return the DataTemplate i want based on my object type. I think i got it straight. I am gonna try and i'll keep you posted about it as soon as i get it to work!!!

Thank You

[legend613]

I have a little similar question,  I defined a template in XAML file, and want to use it in .cs,
so like:
ListboxItem item = new ListBoxItem();
item.template = ?  // how can I set the template to item template parameter?

thanks

[Petar Mladenov]

Hello legend613,

Please first examine the attached project where the basic use of ContentTemplateSelector is realized.
On the other hand accessing a style or template from the resources in the xaml file could be achieved like so:

RadTabItem tabitem = new RadTabItem();
         tabitem.HeaderTemplate = this.LayoutRoot.Resources["RadTabHeaderTemplate"] as DataTemplate;

<Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>
            <DataTemplate x:Key="RadTabHeaderTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <ContentControl Grid.Column="0" Content="{Binding ID}" />
                    <Image Grid.Column="1" Source="{Binding ImgSource}" Width="20" Height="20" />
                    <Button Grid.Column="2"
                            Width="20"
                            Height="20"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Content="x" />
                </Grid>
            </DataTemplate>

Do not hesitate to ask if you need further assistance on this.

Greetings,
Petar Mladenov
the Telerik team