This is a migrated thread and some comments may be shown as answers.

Issue with binding header value to template

3 Answers 168 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Sam Ur
Top achievements
Rank 2
Sam Ur asked on 19 Jan 2011, 03:42 PM
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>

3 Answers, 1 is accepted

Sort by
0
Accepted
Tina Stancheva
Telerik team
answered on 19 Jan 2011, 05:32 PM
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>>
0
Sam Ur
Top achievements
Rank 2
answered on 20 Jan 2011, 08:58 AM
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.
0
Sam Ur
Top achievements
Rank 2
answered on 20 Jan 2011, 11:48 AM
 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!
Tags
TabControl
Asked by
Sam Ur
Top achievements
Rank 2
Answers by
Tina Stancheva
Telerik team
Sam Ur
Top achievements
Rank 2
Share this question
or