XAML/WPF: Changing TabControl template so the tab page is to the right of the tab headers

I'm trying to tweak some XAML I've taken from the MS website as an example of the tab control. I've got it working almost as I need it. I've got the tab headers to show on the left by using the horizontal alignment property. However, the tab page content is showing underneath the headers and I would like it on the right.

What am I doing wrong?

This is the TabControl XAML :-

           <Style x:Key="StyleTabControl" 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>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).
                    (SolidColorBrush.Color)">
                                                    <EasingColorKeyFrame KeyTime="0"
                                         Value="#FFAAAAAA" />
                                                </ColorAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <TabPanel x:Name="HeaderPanel" 
                    HorizontalAlignment="Left"
                    Grid.Row="0"
                    Panel.ZIndex="1"
                    Margin="0,0,4,-1"
                    IsItemsHost="True"
                    KeyboardNavigation.TabIndex="1"
                    Background="Transparent" />
                                <Border x:Name="Border"
                  Grid.Row="1"
                  BorderThickness="1"
                  CornerRadius="2"
                  KeyboardNavigation.TabNavigation="Local"
                  KeyboardNavigation.DirectionalNavigation="Contained"
                  KeyboardNavigation.TabIndex="2">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,1"
                                   StartPoint="0.5,0">
                                            <GradientStop Color="{DynamicResource ContentAreaColorMedium}"
                              Offset="0" />
                                            <GradientStop Color="{DynamicResource ContentAreaColorDark}"
                              Offset="1" />
                                        </LinearGradientBrush>
                                    </Border.Background>
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="{DynamicResource BorderMediumColor}"/>
                                    </Border.BorderBrush>
                                    <ContentPresenter x:Name="PART_SelectedContentHost"
                              Margin="4"
                              ContentSource="SelectedContent" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Open in new window


This is the tab item XAML :-

           <Style x:Key="StyleTabItem" TargetType="{x:Type TabItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                            <Grid x:Name="Root">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlPressedColor}" />
                                                </ColorAnimationUsingKeyFrames>
                                                <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                    Storyboard.TargetName="Border">
                                                    <EasingThicknessKeyFrame KeyTime="0"
                                             Value="1,1,1,0" />
                                                </ThicknessAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver" />
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledControlDarkColor}" />
                                                </ColorAnimationUsingKeyFrames>
                                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).
                    (SolidColorBrush.Color)">
                                                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource DisabledBorderLightColor}"/>
                                                </ColorAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border"
                  Margin="0,0,-4,0"
                  BorderThickness="1,1,1,1"
                  CornerRadius="2,12,0,0">
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
                                    </Border.BorderBrush>
                                    <Border.Background>

                                        <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="0.0" />
                                                    <GradientStop Color="{DynamicResource ControlDarkColor}"
                                  Offset="1.0" />
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>

                                    </Border.Background>
                                    <ContentPresenter x:Name="ContentSite"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Center"
                              ContentSource="Header"
                              Margin="12,2,12,2"
                              RecognizesAccessKey="True" />
                                </Border>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected"
                   Value="True">
                                    <Setter Property="Panel.ZIndex"
                    Value="100" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Open in new window


Tab page needs to be to the right of the tab headers
Thanks in advance for any help.
Matt CartlidgeSenior Infrastructure EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Matt CartlidgeSenior Infrastructure EngineerAuthor Commented:
I managed to solve this as now I understand that the control is just a grid.

Changing the grid so that it has two columns instead of two rows and assigning the headers to column 0 and the tab content to column 1 and my tab control is now exactly how I wanted it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WPF

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.