Binding using header template for RadTabItem

[Alan Cordner]

I am trying to dynamically add tabs to a TabControl using code behind where the template used for HeaderTemplate includes bound controls. Everything is working as I expected, except I cannot get the bound data to appear on the tab.

This is my header template:

    <Application.Resources>
        <DataTemplate x:Key="TabItemHeaderTemplate">
            <StackPanel Orientation="Horizontal" IsHitTestVisible="False">
                <TextBlock Name="tbTabCaption" Foreground="Black" Margin="3,0,0,0" Text="{Binding Path=ConfigModel}"/>
            </StackPanel>
        </DataTemplate>
    </Application.Resources>

And this is my TabControl declaration:

        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Vertical" >
            <TextBlock  Margin="5" FontWeight="Bold" Text="Select a product configuration"></TextBlock>
            <telerikNavigation:RadTabControl x:Name="tabControl" Margin="2" SelectionChanged="tabControl_SelectionChanged" TabStripPlacement="Left" VerticalAlignment="Top" HorizontalAlignment="Left">
            </telerikNavigation:RadTabControl>
        </StackPanel>

Here is my code behind for adding a new tab to the TabControl:

CProductConfiguration myObject = new CProductConfiguration();

RadTabItem newTabItem = new RadTabItem()
{
    DataContext = myObject,
    HeaderTemplate = (DataTemplate)Application.Current.Resources["TabItemHeaderTemplate"],
    Margin = new Thickness(2),
    MinHeight=50,
    MinWidth=100
};
tabControl.Items.Add(newTabItem);

And here is a stripped down version of the object I am trying to bind:

public interface IProductConfiguration
{
    string ConfigModel { get; }
}

class CProductConfiguration : IProductConfiguration
{
    public string ConfigModel
    {
        get { return "MyModel"; }
    }
}

I have tried setting the DataContext of the tab item (as shown), the tab control, and the window itself without any change. Changing the order in which the item's properties are set also had no affect. I know the tempate is being used because if I change the binding to static text, the text is displayed on the tab correctly. What am I missing here?

[Valentin.Stoychev]

Hi Alan Cordner,

To use the HeaderTemplate you need to bind the tabcontrol to a collection. Please check this help article for more info:
http://www.telerik.com/help/silverlight/radtabcontrol-item-templates-and-selectors.html

Kind regards,
Valentin.Stoychev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Alan Cordner]

This code has been working great, but now I have a new requirement for my application. I need to nest tab controls within another tab control. Here's the explanation: My application is displaying information regarding various products we manufacture. All products are categorized into groups. The outer tab control needs to have one tab for each product group. The content of each product group tab needs to be a tab control that contains one tab for each product in that group. The content of each product tab then contains the UserControl for that product. Make sense?

I have modified my view model code to contain an observable collection of ProductGroups, each of which has only 2 properties: GroupName and an observable collection of Products:

    public class TabsViewModel
    {
        public ObservableCollection<ProductGroup> ProductGroups { get; set; }

        public TabsViewModel()
        {
            ProductGroups = new ObservableCollection<ProductGroup>();
            LoadConfigurations();
        }

        private void LoadConfigurations()
        {
            ProductGroup group = new ProductGroup("Group 1");
            group.Products.Add(new Product("Model X"));
            group.Products.Add(new Product("Model Y"));
            group.Products.Add(new Product("Model Z"));
            ProductGroups.Add(group);

            group = new ProductGroup("Group 2");
            group.Products.Add(new Product("Model A"));
            group.Products.Add(new Product("Model B"));
            ProductGroups.Add(group);

            group = new ProductGroup("Group 3");
            group.Products.Add(new Product("Model H"));
            ProductGroups.Add(group);

        }
    }

    public class ProductGroup
    {
        public string GroupName { get; set; }
        public ObservableCollection<Product> Products { get; set; }

        public ProductGroup(string groupName)
        {
            GroupName = groupName;
            Products = new ObservableCollection<Product>();

        }

    }

    public class Product
    {
        public string Model { get; set; }
        public UserControl UserInterface { get; }

        public Product(string model)
        {
            Model = model;
            UserInterface = new myUserInterface();

        }

    }

Using this simplified example, I want to display a tab control with 3 tabs: "Group 1", "Group 2" and "Group 3". The "Group 1" tab should contain a tab control with 3 tabs: "Model X", "Model Y" and "Model Z". The "Group 2" tab should contain a tab control with 2 tabs: "Model A" and "Model B". The "Group 3" tab should contain a tab control with 1 tab: "Model H".

I am able to get the group tab control to work without a problem using the following XAML:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:vm="clr-namespace:ProductConfig;assembly=ViewModels"
    x:Class="ProductConfig.ProductionAssistant"
    Title="ProductionAssistant"
    >

    <Grid x:Name="grid" >
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="385*" />
        </Grid.RowDefinitions>

            <telerikNavigation:RadTabControl x:Name="tabGroups" MinWidth="400" MinHeight="200" Margin="2" TabStripPlacement="Top"
                                             VerticalAlignment="Bottom" HorizontalAlignment="Left" telerik:StyleManager.Theme="Vista"
                                             ItemsSource="{Binding Source={StaticResource DataSource}, Path=ProductGroups}">

                    <telerikNavigation:RadTabControl.ItemContainerStyle>
                        <Style TargetType="telerikNavigation:RadTabItem">
                            <Setter Property="HeaderTemplate" Value="{StaticResource GroupTabItemHeaderTemplate}"></Setter>
                            <Setter Property="ContentTemplate" Value="{StaticResource GroupTabContentTemplate}"></Setter>
                        </Style>
                    </telerikNavigation:RadTabControl.ItemContainerStyle>

            </telerikNavigation:RadTabControl>
    </Grid>
</Window>

I think the nested tab control's templates are where I am falling short, specifically in the nested tab control's binding in the ItemsSource property:

    <Application.Resources>
        <ResourceDictionary>
            <vm:TabsViewModel x:Key="DataSource"/>

            <DataTemplate x:Key="TabItemHeaderTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Model}" Foreground="Black" Margin="3,0,0,0" />
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="TabContentTemplate">
                <StackPanel Orientation="Horizontal">
                    <ContentControl Content="{Binding UserInterface}"/>
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="GroupTabItemHeaderTemplate">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding GroupName}" Foreground="Black" Margin="3,0,0,0" />
                </StackPanel>
            </DataTemplate>

            <DataTemplate x:Key="GroupTabContentTemplate">
                <StackPanel Orientation="Horizontal">
                    <telerikNavigation:RadTabControl MinWidth="400" MinHeight="200" Margin="2" TabStripPlacement="Left"
                                             VerticalAlignment="Top" HorizontalAlignment="Left" telerik:StyleManager.Theme="Vista"
                                             ItemsSource="{Binding Source={StaticResource DataSource}, Path=Products}">

                        <telerikNavigation:RadTabControl.ItemContainerStyle>
                            <Style TargetType="telerikNavigation:RadTabItem">
                                <Setter Property="HeaderTemplate" Value="{StaticResource TabItemHeaderTemplate}"></Setter>
                                <Setter Property="ContentTemplate" Value="{StaticResource TabContentTemplate}"></Setter>
                            </Style>
                        </telerikNavigation:RadTabControl.ItemContainerStyle>
                    </telerikNavigation:RadTabControl>
                </StackPanel>
            </DataTemplate>

        </ResourceDictionary>

    </Application.Resources>

Can you help locate the source of this problem?

[Alan Cordner]

Sorry, I made one type-o in the previous post. The ItemsSource property currently looks like this:

ItemsSource="{Binding Source={StaticResource DataSource}, Path=ProductGroups}

[Alan Cordner]

It appears if I change the ItemsSource property as follows, I can get the products for the first tab to appear on all group tabs:

ItemsSource="{Binding Source={StaticResource GroupsDataSource}, Path=ProductGroups[0].ProductConfigurations}

So it looks like I just need to figure out how to substitute the static index [0] for the index of the selected tab.

[Bobi]

Hi Alan Cordner,

In the sample code you sent previously there is some missing code. Is it possible to send us a zip version of your project or at least XMAL/C# file in order to fix your example?

Best wishes,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.