WPF Extender Control - Header Width Conversion Issue

I have a WPF Expander control located inside ItemsControl

with ExpandDirection

set to Right

. Also I have customized the title control ( ToggleButton

) to get the following look.

I wanted the header content to flow vertically from bottom to top. So I applied the property RenderTransform

to ToggleButton

, and this is what I got:

The height of the header must be the same as in the Data Grid. So I set the width of the toggle button as the height of the Data Grid.

Right now the width of the toggle button will be the height (as I rotated the toggle button) there, leaving a big gap between the two Expanders

when they are in Collapsed mode.

NOTE. The portion enclosed in pink is the actual width of the expander. How to reduce the width of the header without compromising the requirement

Edit: adding the XAML style

<Style x:Key="ExpanderStyle" TargetType="{x:Type Expander}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Expander}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="3"
                            SnapsToDevicePixels="true">
                        <DockPanel>
                            <ToggleButton x:Name="HeaderSite"
                                          Height="50"
                                          MinHeight="0"
                                          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                          Content="{TemplateBinding Header}"
                                          ContentTemplate="{TemplateBinding HeaderTemplate}"
                                          ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
                                          DockPanel.Dock="Top"
                                          FocusVisualStyle="{StaticResource ExpanderHeaderFocusVisual}"
                                          FontFamily="{TemplateBinding FontFamily}"
                                          FontSize="{TemplateBinding FontSize}"
                                          FontStretch="{TemplateBinding FontStretch}"
                                          FontStyle="{TemplateBinding FontStyle}"
                                          FontWeight="{TemplateBinding FontWeight}"
                                          Foreground="{TemplateBinding Foreground}"
                                          IsChecked="{Binding IsExpanded,
                                                              Mode=TwoWay,
                                                              RelativeSource={RelativeSource TemplatedParent}}"
                                          Padding="{TemplateBinding Padding}"
                                          RenderTransformOrigin="0.5,0.5"
                                          Style="{StaticResource ExpanderDownHeaderStyle}"
                                          Template="{StaticResource ExpanderButtonTemplate}">
                                <ToggleButton.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform />
                                        <SkewTransform />
                                        <RotateTransform Angle="-90" />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </ToggleButton.RenderTransform>
                            </ToggleButton>

                            <ContentPresenter x:Name="ExpandSite"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              DockPanel.Dock="Bottom"
                                              Focusable="false"
                                              Visibility="Collapsed" />
                        </DockPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="true">
                            <Setter TargetName="ExpandSite" Property="Visibility" Value="Visible" />

                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Right">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Right" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Left" />
                            <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderRightHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Up">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Top" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Bottom" />
                            <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderUpHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="ExpandDirection" Value="Left">
                            <Setter TargetName="ExpandSite" Property="DockPanel.Dock" Value="Left" />
                            <Setter TargetName="HeaderSite" Property="DockPanel.Dock" Value="Right" />
                            <Setter TargetName="HeaderSite" Property="Style" Value="{StaticResource ExpanderLeftHeaderStyle}" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>