wpf Change tabitem header orientation

Question

I have a wpf Tabcontrol with two TabItem tabs are placed to left.

Now I want to show headers content vertically and adjust tab width to the content.

Something like this.

I tryed using a Header template rotating the label in it, text were rotated but tab remains it's shape.

Here my template:

<TabItem.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <Label Content="Hola mundo" Margin="15,0">
                <Label.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Label.RenderTransform>
            </Label>
        </Grid>
    </DataTemplate>
</TabItem.HeaderTemplate>

Some sugestions?

Icemanind Icemanind · Accepted Answer · 2021-02-03T17:43:34

You should be able to accomplish this by using something like this:

<Window x:Class="WpfApp1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabStripPlacement" Height="200" Width="250" UseLayoutRounding="True">
    <Grid>
        <TabControl TabStripPlacement="Left">
            <TabControl.Resources>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="HeaderTemplate">
                         <Setter.Value>
                             <DataTemplate>
                                <ContentPresenter Content="{TemplateBinding Content}">
                                     <ContentPresenter.LayoutTransform>
                                        <RotateTransform Angle="270" />
                                    </ContentPresenter.LayoutTransform>
                                </ContentPresenter>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Padding" Value="3" />
                </Style>
            </TabControl.Resources>
            <TabItem Header="General">
                <Label Content="Content goes here..." />
            </TabItem>
            <TabItem Header="Security" />
            <TabItem Header="Details" />
        </TabControl>
    </Grid>
</Window>

wpf Change tabitem header orientation

1 Answers