title: Expander header text alignment
body: <p>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.</p>
  
  <pre><code>&lt;Expander Header="My Header"&gt; 
  </code></pre>
  
  <p>I was hoping for something like <code>AlignHeaderText</code> vertically but I see no options for it? Does anyone have a different way they could "show" me?</p>
  
  <p>So taking from the mentoring H.B provided I came up with this:</p>
  
  <pre><code>    &lt;StackPanel Orientation="Horizontal" Margin="0,0,342,0" Width="318"&gt;
              &lt;StackPanel.Triggers&gt;
                  &lt;EventTrigger RoutedEvent="Expander.Expanded" SourceName="expander1"&gt;
                      &lt;EventTrigger.Actions&gt;
                          &lt;BeginStoryboard&gt;
                              &lt;Storyboard&gt;
                                  &lt;DoubleAnimation From="0" To="1.2" Duration="0:0:0.45" Storyboard.TargetName="content" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleX)"/&gt;
                              &lt;/Storyboard&gt;
                          &lt;/BeginStoryboard&gt;
                      &lt;/EventTrigger.Actions&gt;
                  &lt;/EventTrigger&gt;
              &lt;/StackPanel.Triggers&gt;
              &lt;Expander ExpandDirection="Right" Name="expander1" OpacityMask="#6C806969" Background="#FF807171"&gt;
                  &lt;Expander.LayoutTransform&gt;
                      &lt;RotateTransform Angle="90"&gt;&lt;/RotateTransform&gt;
                  &lt;/Expander.LayoutTransform&gt;
                  &lt;Expander.Header&gt;
                      &lt;TextBlock
                     Text="HEADER"
                     Width="{Binding
                      RelativeSource={RelativeSource
                        Mode=FindAncestor,
                        AncestorType={x:Type Expander}},
                      Path=ActualWidth}"
                    /&gt;
                  &lt;/Expander.Header&gt;
                  &lt;Grid x:Name="content" Background="#FF807171" Width="178"&gt;
                      &lt;Grid.LayoutTransform&gt;
                          &lt;ScaleTransform ScaleX="0" ScaleY="1"/&gt;
                      &lt;/Grid.LayoutTransform&gt;
                  &lt;/Grid&gt;
  
              &lt;/Expander&gt;
  </code></pre>
  
  <p>Unfortunately it does this to the expander:</p>
  
  <p><img src="https://i.stack.imgur.com/reiBA.jpg" alt="enter image description here"></p>
  
  <p>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?</p>
  
  <p>If I change <code>Path=ActualWidth</code> to <code>Height</code> the button moves up but the header text is still left of the button and not below it?</p>