Header text is clipped in side panel

[tar-bin]

Hello. Thank you very much for your useful library.

I am a little troubled with my own use case.

I want to display long header text on the side panel.

<Window x:Class="SidePanels.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dockablz="http://dragablz.net/winfx/xaml/dockablz"
        xmlns:dragablz="http://dragablz.net/winfx/xaml/dragablz"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style x:Key="SideTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemVerticalStyle}">
                <Setter Property="Width" Value="40" />
            </Style>
        </ResourceDictionary>                
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" x:Name="LeftPanelColumnDefinition" />
            <ColumnDefinition Width="4" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- left panel make sure you configure exactly, and set up the IsEmptyChanged event -->
        <dragablz:TabablzControl x:Name="LeftPanelTabControl" 
                                 TabStripPlacement="Left"                                  
                                 ItemContainerStyle="{StaticResource SideTabItemStyle}"
                                 dragablz:DragablzItem.ContentRotateTransformAngle="90"                                 
                                 IsEmptyChanged="LeftPanelTabControl_OnIsEmptyChanged">
            <TabItem Header="AAA">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" >Tab Page A</TextBlock>
            </TabItem>
            <TabItem Header="BBB">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16">Tab Page B</TextBlock>
            </TabItem>                
            <TabItem Header="CCC">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16">Tab Page C</TextBlock>
            </TabItem>                                                    
            <!-- ↓[ADD NEW] Problem. Clipped Header Text -->
            <TabItem Header="LongHeaderText">
            </TabItem>                                                    
            <!-- ↑[ADD NEW] -->
        </dragablz:TabablzControl>

        <GridSplitter Grid.Column="1" ResizeDirection="Columns" ResizeBehavior="PreviousAndNext" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />

        <!-- Layout is optional, you could just have a TabablzControl -->
        <dockablz:Layout Grid.Column="2">
            <dragablz:TabablzControl>
                <TabItem Header="One">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16">Tab Page One</TextBlock>
                </TabItem>
                <TabItem Header="Two">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16">Tab Page Two</TextBlock>
                </TabItem>                
                <TabItem Header="Three">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16">Tab Page Three</TextBlock>
                </TabItem>                                
                <!-- ↓[ADD NEW] It works good. display full Header Text -->
                <TabItem Header="LongHeaderText">
                </TabItem>                                
                <!-- ↑[ADD NEW] -->
            </dragablz:TabablzControl>            
        </dockablz:Layout>                

    </Grid>
</Window>

The code is a modification of this.

DragablzSamplez/MainWindow.xaml at master · ButchersBoy/DragablzSamplez

I also tried this, but it was the same.

            <Style x:Key="SideTabItemStyle" TargetType="{x:Type dragablz:DragablzItem}" BasedOn="{StaticResource MaterialDesignDragableTabItemVerticalStyle}">
                <Setter Property="Width" Value="40" />
                <Setter Property="Height" Value="100" />
            </Style>

Is there any good way to solve this? Thank you.

(I'm sorry, I am not good at English, so I use Google translation in this sentence.)

[serious2monkeys]

@tar-bin have you already found the solution by your own? I've faced this issue too.

[tar-bin]

@serious2monkeys Unfortunately, I have not solved this yet ...

[Uwy]

Solved it by not using dragablz:DragablzItem.ContentRotateTransformAngle="90" at all and instead override ItemContainerStyle and HeaderItemTemplate

<dragablz:TabablzControl
    FixedHeaderCount="3"
    TabStripPlacement="Left">
    <dragablz:TabablzControl.ItemContainerStyle>
        <Style BasedOn="{StaticResource MaterialDesignDragableTabItemVerticalStyle}" TargetType="{x:Type dragablz:DragablzItem}">
            <Setter Property="Width" Value="Auto" />
        </Style>
    </dragablz:TabablzControl.ItemContainerStyle>
    <dragablz:TabablzControl.HeaderItemTemplate>
        <DataTemplate>
            <ContentPresenter Margin="9" Content="{Binding}" >
                <ContentPresenter.LayoutTransform>
                    <RotateTransform Angle="-90"  />
                </ContentPresenter.LayoutTransform>
            </ContentPresenter>
        </DataTemplate>
    </dragablz:TabablzControl.HeaderItemTemplate>
    <-- tab items -->
</<dragablz:TabablzControl>