#909 – Binding a TabControl to a List of Objects, part III

You can bind a TabControl to a list of objects, which causes a new TabItem to be created for each element in the list.

By default, both the header and the content of each TabItem is set to the result of invoking ToString on each item in the collection.  You can set the Header of each tab by setting a HeaderTemplate.

You set the Content of each TabItem by setting the ContentTemplate property of the TabControl to a DataTemplate containing the desired items.

    <TabControl Margin="5"
                ItemsSource="{Binding RomanDudes}">
        <TabControl.ItemContainerStyle>
            <Style TargetType="TabItem">
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="{Binding Image}" Height="50"/>
                                <TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.ItemContainerStyle>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Top"
                            Margin="10">
                    <Image Source="{Binding Image}" Height="80"/>
                    <StackPanel Margin="10">
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding ReignStart}"/>
                        <TextBlock Text="{Binding ReignEnd}"/>
                        <TextBlock Text="{Binding KnownFor}"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

909-001

Advertisement

About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #909 – Binding a TabControl to a List of Objects, part III

  1. Pingback: Dew Drop – September 18, 2013 (#1,626) | Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: