wpfmahapps.metro

Mahapps Metro - Expander: applying LayoutTrasform to header changes style


In a WPF application using Mahapps Metro, I'd like to use an Expander on the right. To prevent the Expander to take too much space when collapsed, I'd like to apply a layoutTrasform to its header.

Without applying any rotation:

        <Expander
            DockPanel.Dock="Right"
            ExpandDirection="Right">
            <Expander.Header>        
                    Options
            </Expander.Header>

the expander is shown like this:

enter image description here

Applying the rotation:

<Expander
            DockPanel.Dock="Right"
            ExpandDirection="Right">
            <Expander.Header>
                <TextBlock>
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" />
                    </TextBlock.LayoutTransform>
                    Options
                </TextBlock>
            </Expander.Header>

the header style changes to this:

enter image description here

How can I apply the rotation, maintaining the correct header style?


Solution

  • Just use a DataTemplate for the HeaderTemplate property instead set this content to the Header property.

    <Expander Header="Options"
              DockPanel.Dock="Right"
              ExpandDirection="Right">
        <Expander.HeaderTemplate>
            <DataTemplate>
                <TextBlock HorizontalAlignment="Center"
                           Text="{Binding}">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" />
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </DataTemplate>
        </Expander.HeaderTemplate>
    </Expander>
    

    enter image description here