Mahapps Metro Expander：为Header应用LayoutTransform后如何保留原有样式

直接给Header里的TextBlock加LayoutTransform旋转，会破坏Mahapps Metro自带的ExpanderHeader模板布局，导致样式错乱。这里给你两个靠谱的解决办法：

办法一：自定义HeaderTemplate保留原样式结构 #

重新定义Header的模板，把旋转逻辑放在和原模板一致的容器内，继承原模板的样式属性（比如背景、内边距、状态效果），这样既实现旋转，又不破坏原有样式：

<mah:Expander HorizontalAlignment="Right" Width="Auto">
    <mah:Expander.HeaderTemplate>
        <DataTemplate>
            <!-- 用Border匹配原模板的容器结构，继承样式属性 -->
            <Border Background="{TemplateBinding Background}"
                    Padding="{TemplateBinding Padding}"
                    SnapsToDevicePixels="True">
                <TextBlock Text="{Binding}" Margin="4">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Border>
        </DataTemplate>
    </mah:Expander.HeaderTemplate>
    <mah:Expander.Header>折叠面板标题</mah:Expander.Header>
    <!-- 面板内容 -->
    <TextBlock>这里是折叠面板的内容区域</TextBlock>
</mah:Expander>

办法二：直接用Mahapps内置的垂直Header样式（推荐） #

Mahapps Metro本身就提供了垂直方向的Header样式，不用自己手动写旋转，直接设置HeaderOrientation="Vertical"即可，完全适配框架的样式规则：

<mah:Expander HorizontalAlignment="Right"
              HeaderOrientation="Vertical"
              Header="折叠面板标题">
    <!-- 面板内容 -->
    <TextBlock>这里是折叠面板的内容区域</TextBlock>
</mah:Expander>

为啥直接旋转TextBlock会出问题？ #

Mahapps的ExpanderHeader模板包含了布局对齐、内边距、状态触发器（hover/点击时的背景变化）等细节，直接修改TextBlock的Transform会让它脱离模板的布局约束，导致尺寸计算错误、样式状态失效，最终出现样式异常。

内容的提问来源于stack exchange，提问作者Starnuto di topo