Question

I created a control template for all TabControl in my application. The template places the TabPanel at the left of the tab item’s main content.

   <Style TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <TabPanel Grid.Column="0"
                              Panel.ZIndex="1"
                              Margin="0,0,0,0"
                              IsItemsHost="True"
                              Background="Transparent" />
                    <Border Grid.Column="1"
                            BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="0,12,12,12">
                        <Border.Background>
                            <SolidColorBrush Color="Green" />
                        </Border.Background>
                        <ContentPresenter ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This is initially what I want my tab controls to look like. But when I set the TabStripPlacement property to Top, it still stays in the left side. Is there a way to define in the control template to adjust the position of TabPanel based on the TabStrip property? Thanks in advanced.

Answer 1

You need to use triggers in your style that react to the change in the TabStripPlacement property.

This stackoverflow post provides an example of this.