How to create itemtemplate for tab header in code behind

4 posts, 1 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 14 Apr 2012 Link to this post

    Hi,
    I want to create a radtab with image and text. I need to create an itemtemplate. How to do it in code behind (C#). Thanks.

    York
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 18 Apr 2012 Link to this post

    Hello York Zhang,

     It is very bad idea to define an ItemTemplate in code behind since it is very easy and elegant in XAML, for example like so;

    <Grid x:Name="LayoutRoot" Background="White">
          <Grid.Resources>
              <DataTemplate x:Key="itemTemplate">
                  <StackPanel Orientation="Horizontal">
                      <TextBlock Text="{Binding Name}" Margin="0 0 10 0" />
                      <Image Source="{Binding ImageSrc}" Stretch="Fill" Height="20" Width="20"/>
                  </StackPanel>
              </DataTemplate>
          </Grid.Resources>
          <telerik:RadTabControl x:Name="tab" ItemTemplate="{StaticResource itemTemplate}" />
      </Grid>
    Imagine how this would be done in code behind:
    DataTemplate template = new DataTemplate();
    template.key =..
    ...
    TextBlock text = new Textblock()
    Binding binding  new new Binding();
    bindigs.source =...
    ....
    StackPanel panel = new Stackpanel();
    panel.children.add(text).
    ....
    this.LayoutRoot.Resources.add(template).
    This would be like 50-60 lines of code instead of 10.
    You can check the project attached demonstrating a typical MVVM approach.  Kind regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 18 Apr 2012 Link to this post

    Hi Petar,

    The reason I want to create itemtemplate in code behind is to put it in radtabitem because unlike radtab, radtabitem seems not support image in it. So in xaml, how to create radtabitem dynamically?

    Thanks,
    York

  5. Answer
    Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 18 Apr 2012 Link to this post

    Hello Yourk,

    Please check out the project I previously attached. The defined DataTemplate is used as an ItemsTemplate of the RadTabControl. This means that the TabControl applies this template as a HeaderTemplate of the RadTabItems. Similarly,you can define ContentTemplate of the RadTabControl which defines how the Content of the Tabs will look. RadTabItems support Images both in their Header and in their Content.
    Once you define the Termplates , you just have to pass a colllction of ViewModels / business objects:

    this.tab.ItemsSource  = new ObservableCollection<DataItem>()
                {
                    new DataItem(){ Name = "Barcelona", ImageSrc  = new Uri("Images/Barcelona.jpg", UriKind.RelativeOrAbsolute)},
                    new DataItem(){ Name = "Juventus", ImageSrc  = new Uri("Images/Juventus.png", UriKind.RelativeOrAbsolute)},
                };
    If you need to create new RadTabItems dynamically (run time), you just need to add new DataItems in the given ObservableCollection;
    (this.tab.ItemsSource  as ObservableCollection<DataItem>).Add(new DataItem()...).


    Kind regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top