TabItem Header vertical

Question

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

Answer 1

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;
    }

Answer 2

In triggers of template for item, add this trigger:

<Trigger Property="TabStripPlacement" Value="Right">
    <Setter TargetName="Content" Property="LayoutTransform">
        <Setter.Value>
            <RotateTransform Angle="90"/>
        </Setter.Value>
    </Setter>
</Trigger>