WPF Styles for TabControl / TabPanel / TabItem

Question

Here's a newbie question on the WPF TabControl, TabItem and TabPanel. There is a related question on StackOVF with an answer I happily used in my app. Here's a link to the answer, and the code snippet as well:

http://stackoverflow.com/questions/2273567/wpf-center-tabitems-in-a-tabcontrol/2273724#2273724

<TabControl>
    <TabControl.Resources>
        <Style TargetType="{x:Type TabPanel}">
            <Setter Property="HorizontalAlignment" Value="Center" />
        </Style>
    </TabControl.Resources>

    <TabItem Header="Test 1" />
    <TabItem Header="Test 2" />
    <TabItem Header="Test 3" />
    <TabItem Header="Test 4" />
</TabControl>

While this is wonderful, I'd love to move the Resources and Style stuff to a better location (a stylesheet or the like). My first attempt was to move the <TabControl.Resources> tag to the <Window.Resources> but this did not work. I tried several variations but couldn't get it to work. Here's an example of an attempt I somewhat expected to work:

<!-- Doesn't work as expected: -->
<Window.Resources>
    <Style TargetType="{x:Type TabPanel}">
        <Setter Property="HorizontalAlignment" Value="Center" />
    </Style>
</Window.Resources>

Searching the web and msdn didn't help me solve my problem, but instead left me with a second (related) question: what actually is a TabPanel, and how does it relate to the TabControl?

Any help and tips would be much appreciated.

(Edited: commented in last example that the code doesn't work for me.)

Answer 1

You'll probably need to create a ControlTemplate to do this.

I'm not very familiar with ControlTemplates yet. I hacked this example from: http://msdn.microsoft.com/en-us/library/system.windows.controls.primitives.tabpanel.aspx

<Style  TargetType="{x:Type TabControl}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabControl}">
                    <Grid KeyboardNavigation.TabNavigation="Local">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <TabPanel Name="HeaderPanel"
                                  Grid.Row="0"
                                  Panel.ZIndex="1" 
                                  Margin="0,0,4,-1" 
                                  IsItemsHost="True"
                                  KeyboardNavigation.TabIndex="1"
                                  HorizontalAlignment="Center"/>
                      </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

TabControl uses a specialized TabPanel class and not a generic Panel like StackPanel because if you mess around with the TabControl you'll realize that the panel does quite a few things which generic panels dont. One is adjusting the tab header items in multiple rows. Another is that the the rows of items will be rearranged so that the selected tabitem header is always in the last row. I guess it might be doing even more

I am quite interested in knowing why putting the style in the window resource section does not work. My initial reaction was it should work until I tried it. I am adding this as an answer because SO wont let me add an image in a comment.