Data Binding

[Denis]

Hi,

I'm having trouble databinding the TabControl to an object collection.

Basically, I have a collection of objects that I want to display using a tab control.
One of the properties of the objects should end up as text in the header.
The content should display my custom GUI for the object.

Is the control supposed to support this?
If I simply databind to my collection it works, but displays the result of .ToString of each Object in both the header and content (which is expected).
I just can't seem to find the right way to specify a template for header and content.

Any help?

[Miroslav]

Hello Denis,

Yes, you can databind the TabControl in the way you need it.

When the ItemsSource is set, the ItemContainerStyle can be used to set any property of the item.

Here is the result:


I have attached a working example of databinding the TabControl to a class Person that has a Name, Address and DateOfBirth. Here is the xaml for the TabControl:

<telerik:RadTabControl x:Name="tabControl" Align="Left" SelectedIndex="0">
    <telerik:RadTabControl.ItemContainerStyle>
        <!--The style that will be applied to all the items-->
        <Style TargetType="telerik:RadTabItem">
            <!--Setting the template for the headers.-->
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                            <TextBlock Text="{Binding Name}"
                                       FontSize="11"
                                       Margin="5 0 5 0"
                                       VerticalAlignment="Center" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <!--Content Template (it could include a content presenter which will display everything)-->
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20">
                            <panels:RadUniformGrid Columns="2">
                                <TextBlock Text="Name:" />
                                <TextBox Text="{Binding Name, Mode=TwoWay}" Width="200"/>
                                <TextBlock Text="Date of Birth:  " />
                                <input:RadDatePicker SelectedDate="{Binding DateOfBirth, Mode=TwoWay}" />
                                <TextBlock Text="Address:" />
                                <TextBox Text="{Binding Address, Mode=TwoWay}" Width="200"/>
                            </panels:RadUniformGrid>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadTabControl.ItemContainerStyle>
</telerik:RadTabControl>

Note that whenever a ContentTemplate or Style is used, there is ContentTemplateSelector and StyleSelector equivalent that gives you even more control on what is to be shown.

Hopefully this is what you are trying to achieve.

Kind regards,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Denis]

Thank you, I had completely overlooked ItemContainerStyle.

I knew there was a way.

Thank you very much for your help and for your work overall !