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:

WPF: Center TabItems in a TabControl

<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.)

Raising

Answer 1

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.

Oldwife

"My initial reaction was it should work until I tried it." Ah! So I am still sane :) Thanks for your explanation on the TabPanel NVM. Makes sense. One 'clue' I found during my investigation though whas that (if I understood this correctly) is that there is no XAML for TabPanel (it seems). For example, you can't add a <TabPanel /> element to the TabControl. (Edited comment) – Raising

A little late, but going through my old questions I actually saw that you answered one of my questions. Credit where credit's due :) – Raising

Answer 2

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>

Overboard

Thanks for the idea Chris. I saw samples like this but this seems like a lot of code just to change one layouting-property of the tabheaders, as it makes you create the entire ControlTemplate. Perhaps a Guru can throw in a second opinion, tell us if this is the way to go? – Raising

I know what you mean :) I was playing around with trying to change how the Expander looked, and it's not an easy process. So I also hope someone has a better way :) – Overboard