Issue with binding header value to template

4 posts, 1 answers
  1. Sam Ur
    Sam Ur avatar
    35 posts
    Member since:
    Mar 2008

    Posted 19 Jan 2011 Link to this post

    Hi, I have a header template for my TabControl (code below), but when i try to set binding to Header property of a tab (at least i think so) I don't get nothing...
    What i would like is when i create new tab (let say from code ... something like :

    MainTabControl.Items.Add(new RadTabItem() {Header = "HeaderText", Content = new MyControl()});

    ), that property of this header would bi binded as i stated in xaml....

    Thank you for all your help!

    <telerik:RadTabControl x:Name="MainTabControl" DockPanel.Dock="Bottom" Margin="0">
                        <Style TargetType="telerik:RadTabItem">
                            <Setter Property="HeaderTemplate">
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                            <TextBlock Grid.Column="0"  Text="{Binding Header}"  />
                                            <Button Grid.Column="1" Margin="0 0 0 0" Content="x" Width="15"
                                                Height="15" HorizontalAlignment="Center"
                                                VerticalAlignment="Center" RE:EventHelper.EnableRoutedClick="True"
  2. Answer
    Tina Stancheva
    Tina Stancheva avatar
    3298 posts

    Posted 19 Jan 2011 Link to this post

    Hello Sam Ur,

    The HeaderTemplate property is applied whenever the Header property is set to a value that has no visual representation, like for example a data object. It is used in cases when the TabControl ItemsSourse collection is bound to a business collection.

    So in your case, if you bind your TabControl to a business collection that implements the INotifyCollectionChanged interface, you will be able to add and remove items from that collection thus reflecting the RadTabControl Items collection as well. You can examine this approach in the attached example.

    However, since I am not sure what exactly are the specifications of your scenario, I don't know if this approach will suit you. Still, in your example, if you add your TabItems in code behind, like illustrated in the code snippet, you will have to define a Binding for the RadTabItem Header element in order to apply the HeaderTemplate. Otherwise, the Header element will contain a string  (HeaderText) and won't need to look for a template to decide how to visualize it.

    I hope this information helps. Still, if you need more info, please let us know.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft R3 2016 release webinar banner
  4. Sam Ur
    Sam Ur avatar
    35 posts
    Member since:
    Mar 2008

    Posted 20 Jan 2011 Link to this post

    Hi, thank you for your reply...what I'm still wondering, how can I use ... 
    MainTabControl.Items.Add(new RadTabItem() {Header = "HeaderText", Content = new MyControl()});

    And set binding in template (or modify it) to use header value of new RadTabItem. Because now i can't see the avlue "HeaderText" when i add this RadTabItem. And I guess I need to use header template (and apply it to every tab) to have "Close" button on my tab.
  5. Sam Ur
    Sam Ur avatar
    35 posts
    Member since:
    Mar 2008

    Posted 20 Jan 2011 Link to this post

     Well I got it to work...I had to change binding to to RelativeSource ...
    This is the snippet...

    <TextBlock Grid.Column="0" Text="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTabItem}, Path=Header}" />

    I hope it will help to someone - for me this is very simple solution (maybe not "by the book" way but still a workable one).

    Thanks for your help!
Back to Top