Custom TabItem header with text and image - not sure how to accomplish

I have a TabControl in my XAML which is just an empty control as TabItems are dynamically generated at runtime.

My problem is that I want to have a tab title and an image ("settings" image) in the title, but I'm not sure how. As I said, I generate TabItems on the fly, so how and where will the template for this be, and where would I place it, etc.? Will the TabItem header pattern be applied to dynamically created TabItem controls? (I guess / hope!)

I have googled and searched here, but no one seems to do what I am doing ... just wondering if someone can give me some guidance.

<Grid Name="MainGrid" Background="#333333" ShowGridLines="False" >
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    <Grid Grid.Row="0" ToolTip="Settings">
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        <TextBlock Grid.Column="0" Text="RoboNews" Foreground="SkyBlue" FontSize="32" Padding="5"/>
        <Button Name="btnSettings" Background="Transparent" Grid.Column="1" BorderBrush="#333333" BorderThickness="0" HorizontalAlignment="Right" 
                Click="btnSettings_Click" ToolTip="Click for menu">
            <!--<Image Source="Images/Settings48x48.png"/>-->
            <Image Source="/Images/MenuOpen.png" Width="36" />


    <TabControl Name="tabCategories" Grid.Row="1" Background="Black" SelectionChanged="tabCategories_SelectionChanged">  




source to share

1 answer

You can create a UserControl for your header

<UserControl DataContext="{Binding RelativeSource={RelativeSource Self}}" x:Class="TabControlHeader.TabItemHeader"
             mc:Ignorable="d" Width="Auto" Height="Auto">
    <Grid >
            <Image Source="{Binding ImageSource}"></Image>
            <TextBlock Text="{Binding Text}"></TextBlock>


Ideally DPs are defined in his ViewModel, but so far in the code behind:

public string ImageSource
    get { return (string)GetValue(ImageSourceProperty); }
    set { SetValue(ImageSourceProperty, value); }

// Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageSourceProperty =
    DependencyProperty.Register("ImageSource", typeof(string), typeof(TabItemHeader));

public string Text
    get { return (string)GetValue(TextProperty); }
    set { SetValue(TextProperty, value); }

// Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextProperty =
    DependencyProperty.Register("Text", typeof(string), typeof(TabItemHeader));


Then when you create your TabItem, you need to set its HeaderTemplate:

TabItem tabItem = new TabItem();
tabItem.Height = 100;
tabItem.Width = 50;
var header = new FrameworkElementFactory(typeof(TabItemHeader));
header.SetValue(TabItemHeader.TextProperty, "This is Text");
header.SetValue(TabItemHeader.ImageSourceProperty, "This is Image uri");
header.SetValue(TabItemHeader.HeightProperty, (double)50);
header.SetValue(TabItemHeader.WidthProperty, (double)50);

tabItem.HeaderTemplate = new DataTemplate { VisualTree = header };            




All Articles