Expander header text alignment - wpf

Question

So I changed the orientation of the expander to align vertically rather than horizontally but in the closed state the expander header text is aligning horizontally. Please tell me there is a way to easily fix this without expression blend etc.
<Expander Header="My Header">
I was hoping for something like AlignHeaderText vertically but I see no options for it? Does anyone have a different way they could "show" me?
So taking from the mentoring H.B provided I came up with this:
<StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="1.2" Duration="0:0:0.45" Storyboard.TargetName="content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</StackPanel.Triggers>
<Expander ExpandDirection="Right" Name="expander1" OpacityMask="#6C806969" Background="#FF807171">
<Expander.LayoutTransform>
<RotateTransform Angle="90"></RotateTransform>
</Expander.LayoutTransform>
<Expander.Header>
<TextBlock
Text="HEADER"
Width="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type Expander}},
Path=ActualWidth}"
/>
</Expander.Header>
<Grid x:Name="content" Background="#FF807171" Width="178">
<Grid.LayoutTransform>
<ScaleTransform ScaleX="0" ScaleY="1"/>
</Grid.LayoutTransform>
</Grid>
</Expander>
Unfortunately it does this to the expander:
It places the text at the top and the button in the middle, I was hoping for the button at the top and the text after the button?
If I change Path=ActualWidth to Height the button moves up but the header text is still left of the button and not below it?

Answer 1

My solution (without another properties) - based on H.B. and Sheikh Neyamat answers:
<Expander ExpandDirection="Right">
<Expander.Header>
<TextBlock Text="Header">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Expander.Header>
// Content - listbox in my case
</Expander>

Answer 2

Assign a TextBlock as Header via element syntax and apply a RotateTransform as the TextBlock's LayoutTransform to get the rotation. If you want vertical text that can be done differently.

Answer 3

An example here supporting above suggestions.

Answer 4

You need to also set the ExpandDirection property and set the rotation in a header template.
Below a style that flip direction when folded
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Expander">
<Style.Triggers>
<Trigger Property="IsExpanded" Value="False">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ExpandDirection" Value="Right"/>
</Trigger>
</Style.Triggers>
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="Margin" Value="1,0,1,1"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
</Style>
</StackPanel.Resources>
<Expander Header="Command Data">
<!-- some content -->
</Expander>
<Expander Header="Line Status">
<!-- some content -->
</Expander>
</StackPanel>