Binding using header template for RadTabItem

6 posts, 1 answers
  1. Alan Cordner
    Alan Cordner avatar
    15 posts
    Member since:
    Oct 2009

    Posted 30 Dec 2009 Link to this post

    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?
  2. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 04 Jan 2010 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alan Cordner
    Alan Cordner avatar
    15 posts
    Member since:
    Oct 2009

    Posted 26 Jan 2010 Link to this post

    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 { getset; }        
           
            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 { getset; }        
            public ObservableCollection<Product> Products { getset; }        
           
            public ProductGroup(string groupName)        
            {        
                GroupName = groupName;        
                Products = new ObservableCollection<Product>();        
           
            }        
           
        }        
           
        public class Product        
        {        
            public string Model { getset; }        
            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?
  5. Alan Cordner
    Alan Cordner avatar
    15 posts
    Member since:
    Oct 2009

    Posted 26 Jan 2010 Link to this post

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

    ItemsSource="{Binding Source={StaticResource DataSource}, Path=ProductGroups
  6. Alan Cordner
    Alan Cordner avatar
    15 posts
    Member since:
    Oct 2009

    Posted 26 Jan 2010 Link to this post

    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.
  7. Bobi
    Admin
    Bobi avatar
    513 posts

    Posted 28 Jan 2010 Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready