Expander header text alignment

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?

Citreous

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.

Particularize

Thats ok then I shall wait for an actual answer :) – Citreous

@KirstyWhite: I think you are missing the point, this site is not a place where we write code you should be writing. And i am not going to drop my level of abstraction because you did not read enough on the technology yet. – Particularize

Lol @H.B I wouldnt want you "having" to write an answer, pitty the thought on a QnA site ;-) But I shall post what I have taken from your answer so you can better answer the question. (will update just now) – Citreous

@KirstyWhite: Apply the rotation only to the TextBlock in the header, i doubt that you would want the content rotated. Also if the button placement is off that can only be fixed by adjusting the Template. – Particularize

<meta> Rather a poor answer, in my opinion, however technically correct it may be. Firstly, an example goes a long way, and helps to avoid the answerer appearing pedantic and condescending. We're not here to be computer science lecturers, providing an exercise for the reader. Luckily someone else decided to provide an example below. Secondly, I thought using external links rather than pasting the detail here was discouraged. – Calton

@CJBrew: It is discouraged in the form of an answer consisting of "See this blog post". My links are always either to official documentation that can help those that are not yet very familiar with the technology in question, or to other questions/answers within the StackOverflow site. I maintain the position that in the case of this answer no code is necessary; anyone with a cursory familiarity with WPF will be able to understand and apply it. It is not feasible to always start at zero when answering questions. Me providing the link regarding element syntax is already catering to beginners. – Particularize

@CJBrew: Also, if i do not have currently have some IDE at hand, providing a correct code example is harder than simply providing a correct answer. – Particularize

@H.B. I agree that providing a correct working example isn't necessarily easy if you don't have an IDE. But as this is a fairly elementary question, I'd argue it merits an elementary answer. It's partly a style thing (in that you have a different style of answering questions than was expected), but the OP clearly needed something more explicit (and what's more asked for it; and was clearly quite annoyed that you didn't provide one and basically said "I can't be bothered"). – Calton

Maybe that isn't what you meant, but it's how I read it. Anyway, between yours and the other solutions, it's helped me. – Calton

@CJBrew: Well, it is a conflicted matter for me. Over time i more and more adopted the approach of giving generalised answers rather than concrete ones. People are very quick to see a given example as the only one true way or do not even bother to think and just copy and paste what they are given without understanding the basic concepts behind it. One may argue that i am not to judge how people write code or use answers, but i personally would not want to be responsible for such behavior. – Particularize

@CJBrew: I know that my comment may have sounded rude, but it was not out of malice. If i genuinely did not want to answer someone's question i just would not do so. There are e.g. some individuals i consider exploitative and thus will not answer their questions any more, but that is very rare. – Particularize

Answer 2

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>

Equidistance

Answer 3

An example here supporting above suggestions.

Chaperone

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>

Fulgor