Expander header text alignment
expander, layout, wpf, xaml
Solution
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.
Problem
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?