Multiple ContentTemplate in one RadTabControl dynamically

4 posts, 0 answers
  1. Jose
    Jose avatar
    16 posts
    Member since:
    Dec 2010

    Posted 26 Jan 2011 Link to this post


    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

            <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem">
                    <Setter Property="HeaderTemplate">
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    <ContentControl Content="{Binding TabText}"/>
                                    <Button Grid.Column="2"  Content="X" Width="18"
                                           Height="18" HorizontalAlignment="Center"
                                           common:RoutedEventHelper.EnableRoutedClick="True" />
                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
  2. Jose
    Jose avatar
    16 posts
    Member since:
    Dec 2010

    Posted 26 Jan 2011 Link to this post

    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
  3. legend613
    legend613 avatar
    2 posts
    Member since:
    Jan 2011

    Posted 17 Feb 2011 Link to this post

    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?

  4. Petar Mladenov
    Petar Mladenov avatar
    3138 posts

    Posted 21 Feb 2011 Link to this post

    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">
                <DataTemplate x:Key="RadTabHeaderTemplate">
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="Auto" />
                        <ContentControl Grid.Column="0" Content="{Binding ID}" />
                        <Image Grid.Column="1" Source="{Binding ImgSource}" Width="20" Height="20" />
                        <Button Grid.Column="2" 
                                Content="x" />
    Do not hesitate to ask if you need further assistance on this.

    Petar Mladenov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top