How to create itemtemplate for tab header in code behind

[york]

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

[Petar Mladenov]

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

[york]

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

[Petar Mladenov]

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