Table of Contents
Table of Contents
Dynamic TabControl from Data Source

EO.Wpf TabControl derives from ItemsControl, so you can uses the ItemsControl's ItemsSource property to populate the TabControl. It is often necessary to set both HeaderTemplate and ContentTemplate when the TabControl is populated from a data source. The following code demonstrates how to use these properties:

Copy 
<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:eo="http://schemas.essentialobjects.com/wpf/"
        Title="MainWindow" Height="450" Width="650">
    <Border Padding="5">
        <eo:TabControl x:Name="TabControl1">
            <eo:TabControl.HeaderTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <eo:Bitmap Grid.Column="0" Margin="1" Source="{Binding Image}"></eo:Bitmap>
                        <TextBlock Grid.Column="1" Margin="2" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
                    </Grid>
                </DataTemplate>
            </eo:TabControl.HeaderTemplate>
            <eo:TabControl.ContentTemplate>
                <DataTemplate>
                    <StackPanel Margin="5">
                        <TextBlock HorizontalAlignment="Left" FontWeight="Bold">Details</TextBlock>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0">Name:</TextBlock>
                            <TextBlock Grid.Column="1" Text="{Binding Name}"></TextBlock>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </eo:TabControl.ContentTemplate>
        </eo:TabControl>
    </Border>
</Window>

The above code uses the Celebrity and CelebrityCategory classes. The code produces the following result:

This sample uses both HeaderTemplate and ContentTemplate. The HeaderTemplate is used to display tab item header. The ContentTemplate is used to display tab item content.