CODEWITHSUNDEEP
c#wpfvisual-studiowpf-controls
Christoph Bühler
Christoph Bühler

Reputation: 2923

WPF Tab Control Headers on the left side

I want to make my custom tab control style. Headers should be on the left side and the content on the right side. Just like the standard styles can do it:enter image description here

The selected element on the image above is the grid inside the active item. As you can see, it perfectly aligns next to the headers.

enter image description here

This is my design. The selected element is also the grid inside the active item, but it is just behind the headers instead of next to them. How can I align this grid next to the headers?

These are my styles for the tab item and tab control:

 <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.ColumnDefinitions>
                        <ColumnDefinition Width="200"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TabPanel
                        Name="HeaderPanel"
                        Grid.Row="0"
                        Panel.ZIndex="1" 
                        Margin="0" 
                        IsItemsHost="True"
                        KeyboardNavigation.TabIndex="1"
                        Background="AliceBlue" />
                    <Border 
                            Name="Border" 
                            Grid.Row="1"
                            BorderThickness="0"
                            KeyboardNavigation.TabNavigation="Local"
                            KeyboardNavigation.DirectionalNavigation="Contained"
                            KeyboardNavigation.TabIndex="2" >
                        <ContentPresenter 
                              Name="PART_SelectedContentHost"
                              Margin="4"
                              ContentSource="SelectedContent" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border
                        Name="Border"
                        Margin="0"
                        Padding="10,4,4,4"
                        Background="Transparent"
                        Height="30"                               
                        Width="Auto"
                        BorderThickness="0">
                        <ContentPresenter x:Name="ContentSite"
                            VerticalAlignment="Center"                                   
                            HorizontalAlignment="Left"
                            ContentSource="Header"                                   
                            RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="#FFFFFFFF" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="#FF4576a9"></Setter>
                        <Setter TargetName="Border" Property="BorderThickness" Value="6, 0, 0, 0"></Setter>
                        <Setter TargetName="Border" Property="Padding" Value="4"></Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Yellow" />
                        <Setter Property="Foreground" Value="Orange" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thank you.

Upvotes: 2

Views: 5411

Answers (2)

Rachel
Rachel

Reputation: 132618

In your Custom Template, you need to set Grid.Column instead of Grid.Row since your grid is now 2 cols/1 row instead of 1 col/2 rows

<ControlTemplate TargetType="{x:Type TabControl}">
    <Grid ...>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <TabPanel
            Name="HeaderPanel" Grid.Column="0" ... />
        <Border Name="Border" Grid.Column="1" ... >
            <ContentPresenter ... />
        </Border>
    </Grid>
</ControlTemplate>

Upvotes: 4

Ayyappan Subramanian
Ayyappan Subramanian

Reputation: 5366

You need not to create a custom control. You can use TabStripPlacement property of tabcontrol to achieve this functionality.

<TabControl TabStripPlacement="Left">
            <TabItem Header="Tab1">

            </TabItem>
            <TabItem Header="Tab2">

            </TabItem>
        </TabControl>

You can refer http://www.wpf-tutorial.com/tabcontrol/tab-positions/ or https://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.tabstripplacement(v=vs.110).aspx

Upvotes: 2

Related Questions