Trying to WPF Tab header, need to make 3 adjustments

Question

I want to alter the styling of some WPF tab headers. I would like to keep all the original styling of the tab headers, except for these three things -

1. Increase the height of the headers
2. Make the heights of each header the same. Normally the selected tab has a bigger height, I need the heights of both selected and unselected tabs to be the same.
3. Add a picture above the text on each header

Here is a before and after image of what I am looking to do -

Anyone know how to do this?

Answer 1

There you go, you can replace Stack panel with your nice images.

Update 1- in order to remove sizing effect when seelcting a tab you'll need to alter the TabItem style (header template is too light for it). Just get a StyleSnooper (http://blog.wpfwonderland.com/2007/01/02/wpf-tools-stylesnooper/) open it with VS2010 recompile it for .NET4, launch, navigate to TabItem and search for:

---

<Setter Property="FrameworkElement.Margin">
                                        <Setter.Value>
                                            <Thickness>
                                                2,2,2,2</Thickness>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter Property="FrameworkElement.Margin" TargetName="Content">
                                        <Setter.Value>
                                            <Thickness>
                                                2,2,2,2</Thickness>
                                        </Setter.Value>

margins are the values you want to change to fix your 2. Then just put the modified version into the resources, so the app can pick it up. The style contains a lot of handy stuff you can tweak.

---

<Window x:Class="Immutables.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <TabControl TabStripPlacement="Left" x:Name="AreasTabControl" Margin="1">
            <TabItem x:Name="AttributesTab">
                <TabItem.HeaderTemplate>
                    <DataTemplate>
                        <Grid Width="100" Height="40">

                            <Border BorderThickness="1" BorderBrush="Gray" HorizontalAlignment="Left" VerticalAlignment="Top">
                                <StackPanel Orientation="Horizontal">
                                    <Rectangle VerticalAlignment="Top"
                                Width="5" Height="5" Fill="White" />
                                    <Rectangle  VerticalAlignment="Top"
                                Width="5" Height="5" Fill="Blue" />
                                    <Rectangle VerticalAlignment="Top"
                                Width="5" Height="5" Fill="Red" />
                                </StackPanel>
                            </Border>


                            <TextBlock Margin="0,20,0,0">Go Russia!</TextBlock>
                        </Grid>
                    </DataTemplate>
                </TabItem.HeaderTemplate>

            </TabItem>
        </TabControl>
    </Grid>
</Window>