TabItem Header vertical

c#, tabcontrol, tabitem, wpf, xaml

Solution

You need to write two different style and set them on button click

In your Window resources

<Window.Resources>
<Style x:Key="Right90" TargetType="{x:Type TabItem}">           
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Content="{TemplateBinding Content}" TextOptions.TextFormattingMode="Display">
                        <ContentPresenter.LayoutTransform>
                            <RotateTransform Angle="90" />
                        </ContentPresenter.LayoutTransform>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="Left90" TargetType="{x:Type TabItem}">          
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Content="{TemplateBinding Content}" TextOptions.TextFormattingMode="Display">
                        <ContentPresenter.LayoutTransform>
                            <RotateTransform Angle="-90" />
                        </ContentPresenter.LayoutTransform>
                    </ContentPresenter>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

Here is your TabControl and Button

<DockPanel>
    <Button Name="btnRight" DockPanel.Dock="Top" Click="btnRight_Click" Content="Right"></Button>
    <Button Name="btnLeft" DockPanel.Dock="Top" Click="btnLeft_Click" Content="Left" ></Button>
    <TabControl Name="tabControl">
        <TabItem Header="Tab1"></TabItem>
        <TabItem Header="Tab2"></TabItem>
    </TabControl>
</DockPanel>

and this is how code behind would go

    private void btnLeft_Click(object sender, RoutedEventArgs e)
    {
        tabControl.TabStripPlacement = Dock.Left;
        tabControl.ItemContainerStyle = this.FindResource("Left90") as Style;
    }

    private void btnRight_Click(object sender, RoutedEventArgs e)
    {
        tabControl.TabStripPlacement = Dock.Right;
        tabControl.ItemContainerStyle = this.FindResource("Right90") as Style;
    }

Problem

So i got a TabControl with some Tabitems,and a few buttons. When i press these Buttons change the position of the TabStrip. Everything is working fine. What i want to do now is, when i press the Button Right90 to put the tabstrip to the Right the header should be turned by 90°. I tried to do it, but always failed. I would be happy over a fast answer. Here is my Code: ``` <Window x:Class="Pages.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TabControl" Height="350" Width="525"> <Window.Resources> <SolidColorBrush x:Key="Foreground" Color="#FF9531b1"></SolidColorBrush> <SolidColorBrush x:Key="Background" Color="Transparent"></SolidColorBrush> <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}"> <Grid SnapsToDevicePixels="True"> <Border x:Name="Bd" BorderBrush="{StaticResource Foreground}" BorderThickness="0" Padding="{TemplateBinding Padding}"> <Border.Style> <Style TargetType="{x:Type Border}"> <Setter Property="Background" Value="{StaticResource Background}"/> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" /> </DataTrigger> <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" /> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="Bd" Property="Background" Value="{StaticResource Foreground}"></Setter> <Setter TargetName="Content" Property="TextBlock.Foreground" Value="White"></Setter> <Setter TargetName="Content" Property="TextBlock.FontWeight" Value="Heavy"></Setter> </Trigger> <MultiTrigger > <MultiTrigger.Conditions > <Condition Property="IsSelected" Value="True"></Condition> <Condition Property="IsMouseOver" Value="false"></Condition> </MultiTrigger.Conditions> <Setter TargetName="Content" Property="TextBlock.Foreground" Value="{StaticResource Foreground}"></Setter> <Setter TargetName="Content" Property="TextBlock.FontWeight" Value="Heavy"></Setter> </MultiTrigger> </ControlTemplate.Triggers> </ControlTemplate> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <StackPanel Grid.Column="1"> <Button x:Name="btnTop" Click="btnTop_Click">Top</Button> <Button Name="btnRight" Click="btnRight_Click">Right</Button> <Button Name="btnBottom" Click="btnBottom_Click">Bottom</Button> <Button Name="btnLeft" Click="btnLeft_Click">Left</Button> <Button Name="btnLeft90" Click="btnLeft90_Click">Left90</Button> <Button Name="btnRight90" Click="btnRight90_Click">Right90</Button> </StackPanel> <TabControl Grid.Column="0" x:Name="MyControl" Height="200" Background="Transparent" BorderThickness="0,1,0,0" BorderBrush="{StaticResource Foreground}" TabStripPlacement="Top"> <TabItem x:Name="Tab1" Header="tab1" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}"> </TabItem> <TabItem x:Name="Tab2" Header="tab2" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}"/> <TabItem x:Name="Tab3" Header="tab3" Background="Transparent" Template="{DynamicResource TabItemControlTemplate}"/> </TabControl> </Grid> ``` And the Code behind the Code: ``` public MainWindow() { InitializeComponent(); } private void btnTop_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Top; } private void btnRight_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Right; } private void btnBottom_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Bottom; } private void btnLeft_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Left; } private void btnLeft90_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Left; } private void btnRight90_Click(object sender, RoutedEventArgs e) { MyControl.TabStripPlacement = Dock.Right; Tab1.LayoutTransform = Rotation.Rotate90; } } ``` Thanks in Advance

Original source