Issue with binding header value to template

[Sam Ur]

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">
                <telerik:RadTabControl.ItemContainerStyle>
                    <Style TargetType="telerik:RadTabItem">
                        <Setter Property="HeaderTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="Auto" />
                                        </Grid.ColumnDefinitions>
                                        <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"
                                            />
                                    </Grid>
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </telerik:RadTabControl.ItemContainerStyle>
            </telerik:RadTabControl>

[Tina Stancheva]

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

[Sam Ur]

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.

[Sam Ur]

 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!