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

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.