[Solved] TabControl bound to List<UserControl> header template not working

[Luca Lusetti]

I'm evaluating Telerik controls for a LOB application, and I found something that I can't userstand. What I'm trying to achieve is displaying a list of UserControl inside a TabControl and bind some properties in the HeaderTemplate of the TabItem.

If I bind directly yo a list of UserControls this isn't working.

MainPage.xaml

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <DataTemplate x:Key="TabHeaderTeamplate">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock Text="{Binding DisplayName}" />
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>
    <StackPanel>
        <TextBlock Text="TabControl bound to List[UserControl], header template not working" />
        <nav:RadTabControl x:Name="boundTabControl">
            <nav:RadTabControl.ItemContainerStyle>
                <Style TargetType="nav:RadTabItem">
                    <Setter Property="HeaderTemplate" Value="{StaticResource TabHeaderTeamplate}" />
                </Style>
            </nav:RadTabControl.ItemContainerStyle>
        </nav:RadTabControl>
        <TextBlock Text="TabControl bound to List[UserControlWrapper], header template working" />
        <nav:RadTabControl x:Name="boundTabControl2">
            <nav:RadTabControl.ItemTemplate>
                <DataTemplate>
                    <ContentPresenter Content="{Binding Content}" />
                </DataTemplate>
            </nav:RadTabControl.ItemTemplate>
            <nav:RadTabControl.ItemContainerStyle>
                <Style TargetType="nav:RadTabItem">
                    <Setter Property="HeaderTemplate" Value="{StaticResource TabHeaderTeamplate}" />
                </Style>
            </nav:RadTabControl.ItemContainerStyle>
        </nav:RadTabControl>
    </StackPanel>
</UserControl>

MAinPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            boundTabControl.ItemsSource = new List<UserControl>()
            {
                new PageOne(),
                new PageTwo(),
            };

            boundTabControl2.ItemsSource = new List<UserControlWrapper>()
            {
                new UserControlWrapper{Content = new PageOne(), DisplayName = "PageONE"},
                new UserControlWrapper{Content = new PageTwo(), DisplayName = "PageTWO"},
            };
        }
    }

    public class UserControlWrapper
    {
        public string DisplayName { get; set; }
        public UserControl Content { get; set; }
    }
}

PageOne.xaml

<UserControl x:Class="SilverlightApplication1.PageOne"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="Page ONE" />
    </Grid>
</UserControl>

PageOne.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
    public partial class PageOne : UserControl
    {
        public string DisplayName { get { return "PageONE"; } }

        public PageOne()
        {
            InitializeComponent();
        }
    }
}

PageTwo is the same as page one just change number :)

I'm not an expert in Silverlight developing so maybe I'm missing something obvious.

Thanks
Luca Lusetti

[Bobi]

Hi Luca Lusetti,

Thank you for the feedback. We will investigate this issue.
For now you can use the following workaround:
   
     public class UserControlWrapper
        {
            public string DisplayName { get; set; }
            public UserControl Content { get; set; }
        }
....
  <DataTemplate x:Key="TabHeaderTeamplate" >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <TextBlock Text="{Binding DisplayName}"  x:Name="text"/>
            </StackPanel>
        </DataTemplate>

Please let us know if you are ok to use the workaround otherwise could you please send us the full sample project in order to investigate the issue?

Best wishes,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Nathan]

Hi,

I am having a similar problem so rather than start a new thread I thought I would add to this one.

I can't seem to template my RadTabItems with HeaderTemplate and ContentTemplates. Are these both supported?

FYI I am using run time version: v2.0.50727

I have a DataTemplate definied in my Grid.Resources as follows (simplified for the example):

 

<

 

DataTemplate x:Key="TabItemTemplate">

 

 

 

<radNav:RadTabItem>

 

 

 

<radNav:RadTabItem.Header>

 

 

 

<TextBlock Text="{Binding Description}" />

 

 

 

</radNav:RadTabItem.Header>

 

 

 

 

<radNav:RadTabItem.Content>

 

 

 

<TextBlock Text="Some default content on the tab" />

 

 

 

</radNav:RadTabItem.Content>

 

 

 

</radNav:RadTabItem>

 

 

 

</DataTemplate>

 

Then I refer to this template from the tab control itself:

<

 

radNav:RadTabControl x:Name="tabMain"

 

 

AllowDragReorder="True"

 

 

ItemsSource="{Binding}"

 

 

ItemTemplate="{StaticResource TabItemTemplate}"/>

 

In the code behind, I am simply binding the tabcontrol to an observable collection of classes: 

 

tabMain.ItemsSource = oTab.GetTabs

 

My headers come out OK (the name of the tab is bound to the "Description" property of my class just fine), but I can't seem to put anything in the actual content area of the tab. Interestingly the content of the tab also has my "Description" showing so it appears that the HeaderTemplate is overriding my ContentTemplate?

I've tried similar code to use setters to set the HeaderTemplate and ContentTemplate but can't seem to get that to work either. Any hints on how I can accomplish this would be appreciated.

[Nathan]

FYI I found the solution in another post. Not quite sure why this works (something to do with the ItemContainerStyle?) but either way this is working for me:

<

 

radNav:RadTabControl x:Name="tabMain"

 

 

AllowDragReorder="True"

 

 

ItemsSource="{Binding}"

 

 

>

 

 

 

<radNav:RadTabControl.ItemTemplate>

 

 

 

<!--The Content Template:-->

 

 

 

<DataTemplate>

 

 

 

<Grid Background="Red">

 

 

 

<TextBlock Text="Some content" />

 

 

 

</Grid>

 

 

 

</DataTemplate>

 

 

 

</radNav:RadTabControl.ItemTemplate>

 

 

 

<radNav:RadTabControl.ItemContainerStyle>

 

 

 

<Style TargetType="radNav:RadTabItem">

 

 

 

<Setter Property="HeaderTemplate">

 

 

 

<Setter.Value>

 

 

 

<!--The Header Template:-->

 

 

 

<DataTemplate>

 

 

 

<TextBlock Text="{Binding Description}" />

 

 

 

</DataTemplate>

 

 

 

</Setter.Value>

 

 

 

</Setter>

 

 

 

</Style>

 

 

 

</radNav:RadTabControl.ItemContainerStyle>

 

 

 

</radNav:RadTabControl>