#911 – Use ItemTemplate to Control Content on Tabs

You can use the ItemContainerStyle of a TabControl to dictate the content that appears on the tabs, creating a style that sets each TabItem’s HeaderTemplate.

As a slightly more straightforward way to do the same thing, you can just set the TabControl’s ItemTemplate property to a DataTemplate that defines the content for each tab.

        <TabControl Margin="5"
                    ItemsSource="{Binding RomanDudes}">
            <!-- Change ItemTemplate to control content on tabs -->
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <Image Source="{Binding Image}" Height="50"/>
                        <TextBlock Text="{Binding Name}" HorizontalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <!-- Change ContentTemplate to control main content -->
            <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>

911-001

Advertisements

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

2 Responses to #911 – Use ItemTemplate to Control Content on Tabs

  1. Pingback: Dew Drop – September 20, 2013 (#1,628) | Morning Dew

  2. Pingback: #908 – Binding a TabControl to a List of Objects, part II | 2,000 Things You Should Know About WPF

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 )

Google+ photo

You are commenting using your Google+ 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 )

w

Connecting to %s

%d bloggers like this: