WPF 纵向文字显示：实现方式与优化技巧

1. 为什么WPF中的纵向文字显示是个“技术活”？

你可能觉得，在界面上把文字竖着显示，不就是转个方向吗？听起来简单，但真在WPF项目里动手做，就会发现一堆“坑”。比如，文字转了90度后，布局乱了，点击区域对不上，或者在高分辨率屏幕上渲染出来有毛边。我刚开始做WPF开发那会儿，接到一个需求，要给一个工业控制软件做状态面板，要求某些标签和读数必须竖着显示，说是为了节省横向空间，符合操作员的竖屏阅读习惯。我当时心想，这还不简单，找个旋转属性搞定。结果，第一个版本出来，文字是竖了，但整个控件的对齐、边距、甚至数据绑定更新后的重绘，都出现了各种诡异的问题。从那以后，我才明白，WPF里的纵向文字显示，远不止一个RotateTransform那么简单，它涉及到布局系统、渲染管线、文本度量，甚至性能优化。

所以，这篇文章我就结合自己踩过的那些坑，以及后来摸索出来的各种“野路子”和“正统方法”，来跟你详细聊聊。我们会从最基础的旋转开始，讲到如何真正实现一个字符一行的“古籍式”竖排，再到怎么处理换行、空格这些细节，最后还会分享几个让竖排文字看起来更舒服、跑起来更流畅的优化技巧。无论你是要做一个诗词展示的文艺App，还是一个需要紧凑布局的仪表盘，相信这里总有一种方法适合你。

2. 基础入门：用旋转实现纵向文字

最直观、也是大家最先想到的方法，就是旋转。WPF提供了强大的变换（Transform）功能，其中RotateTransform就是实现旋转的利器。

2.1 使用LayoutTransform与RenderTransform

这里有个关键选择：用LayoutTransform还是RenderTransform？别看它们名字像，对布局的影响天差地别。

LayoutTransform 是在布局计算之前应用的。这意味着，WPF的布局系统会先考虑这个变换效果，然后再为控件分配空间。举个例子，你有一个宽100、高40的TextBlock，内容为“大家好”。如果你应用了Angle="270"的LayoutTransform，布局系统会意识到：“哦，这个文本块要被旋转270度（也就是逆时针转90度），那么它实际占用的空间应该是宽40、高100。” 然后它会按照旋转后的尺寸去和周围的控件进行布局协商。

<TextBlock Width="100" Height="40" FontSize="30" Text="大家好" Margin="10">
    <TextBlock.LayoutTransform>
        <RotateTransform Angle="270"/>
    </TextBlock.LayoutTransform>
</TextBlock>

上面这段代码，你运行后会发现，这个TextBlock在界面上预留的“坑位”是一个竖着的长方形（高100，宽40），文字在里面是纵向的。其他控件会避开这个区域，布局不会乱。这是最省心、最符合直觉的做法，特别适合需要旋转的控件仍然参与正常布局流的场景。

那RenderTransform呢？它是在布局计算之后，渲染之前应用的。布局系统完全无视这个变换，它只按控件原始尺寸（宽100，高40）来占位。旋转操作只在最后的绘制阶段生效。结果就是，文字虽然视觉上旋转了，但它可能“画”到了邻居控件的地盘上，造成重叠。除非你手动调整控件的尺寸和对齐方式，否则布局会一团糟。

<!-- 注意：这样写可能会造成视觉重叠，因为布局占位仍是100x40 -->
<TextBlock Width="100" Height="40" FontSize="30" Text="大家好" Margin="10">
    <TextBlock.RenderTransform>
        <RotateTransform Angle="270"/>
    </TextBlock.RenderTransform>
</TextBlock>

什么时候用哪个？ 我个人的经验是：绝大多数需要旋转文本并希望它正常参与布局的情况，都用LayoutTransform。只有在你需要做动画（比如一个旋转飞入的效果），或者明确知道旋转后的视觉溢出没关系（比如作为背景装饰文字）时，才考虑RenderTransform。

2.2 旋转的中心点问题

默认情况下，旋转是围绕元素的中心点(0.5, 0.5)进行的。这对于方形区域内的文字旋转通常没问题。但有时你会发现，旋转后文字的位置不太对，比如没有紧贴着你期望的边框。

这时就需要调整RenderTransformOrigin属性。这个属性接受一个相对坐标，(0,0)代表左上角，(1,1)代表右下角。比如，如果你想让文字围绕其左上角旋转，可以这样设置：

<TextBlock ... RenderTransformOrigin="0,0">
    <TextBlock.LayoutTransform>
        <RotateTransform Angle="270"/>
    </TextBlock.LayoutTransform>
</TextBlock&g