WPF竖排文字实现指南：从基础到进阶

在WPF（Windows Presentation Foundation）应用开发中，竖排文字作为东亚文化特有的排版需求，广泛应用于古籍阅读、书法展示及特定设计场景。本文将从基础实现方法入手，逐步深入至自定义控件开发，为开发者提供完整的竖排文字解决方案。

一、竖排文字实现基础

1.1 文本方向属性设置

WPF的TextBlock和Label控件通过TextAlignment和LayoutTransform属性可实现基础竖排效果。例如，通过旋转90度实现横向文字的竖向排列：

<TextBlock Text="竖排文字示例" 
           RenderTransformOrigin="0.5,0.5">
    <TextBlock.LayoutTransform>
        <RotateTransform Angle="90"/>
    </TextBlock.LayoutTransform>
</TextBlock>

此方法简单直接，但存在两大局限：文字方向虽改变，但行序仍为横向；且旋转后控件尺寸未自适应，需手动调整宽度高度。

1.2 格式化文本块（FormattedText）

使用FormattedText类可更精细控制文字布局。通过设置TextAlignment为Vertical（需自定义实现），结合字符级定位实现真竖排：

var formattedText = new FormattedText(
    "竖排文字示例",
    CultureInfo.CurrentCulture,
    FlowDirection.LeftToRight,
    new Typeface("微软雅黑"),
    24,
    Brushes.Black);
// 自定义竖排逻辑（需遍历字符逐个定位）
for (int i = 0; i < formattedText.Text.Length; i++)
{
    // 计算每个字符的Y坐标（从下至上）
    double yPos = i * 24; // 行高24px
    // 绘制逻辑（需借助DrawingContext）
}

此方法需手动处理字符定位，适合对排版精度要求高的场景。

二、进阶实现方案

2.1 自定义竖排控件开发

创建继承自FrameworkElement的VerticalTextBlock控件，核心逻辑包括：

1. 测量阶段：计算文本总高度（字符数×行高）

2. 排列阶段：从下至上定位每个字符

   public class VerticalTextBlock : FrameworkElement
   {
    public string Text { get; set; }
    public double CharacterHeight { get; set; } = 24;
    protected override void OnRender(DrawingContext drawingContext)
    {
        if (string.IsNullOrEmpty(Text)) return;
        for (int i = 0; i < Text.Length; i++)
        {
            var formattedText = new FormattedText(
                Text[i].ToString(),
                CultureInfo.CurrentCulture,
                FlowDirection.LeftToRight,
                new Typeface("微软雅黑"),
                CharacterHeight,
                Brushes.Black);
            double yPos = ActualHeight - (i + 1) * CharacterHeight;
            drawingContext.DrawText(
                formattedText,
                new Point(0, yPos));
        }
    }
   }

   使用示例：

   <local:VerticalTextBlock Text="竖排文字控件示例" 
                        CharacterHeight="30" 
                        Width="30" 
                        Height="180"/>

2.2 混合布局方案（FlowDocument）

通过FlowDocument结合BlockUIContainer实现复杂竖排布局：

<FlowDocumentScrollViewer>
    <FlowDocument>
        <Paragraph>
            <BlockUIContainer>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="第" Margin="0,0,0,10"/>
                    <TextBlock Text="一" Margin="0,0,0,10"/>
                    <TextBlock Text="行"/>
                </StackPanel>
            </BlockUIContainer>
        </Paragraph>
    </FlowDocument>
</FlowDocumentScrollViewer>

此方案适合段落级竖排，但需手动拆分文本。

三、第三方库应用

3.1 WPF Toolkit扩展

使用WPF Toolkit中的VerticalTextBlock控件（需安装NuGet包）：

<Window x:Class="VerticalTextDemo.MainWindow"
        xmlns:toolkit="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit">
    <toolkit:VerticalTextBlock Text="WPF Toolkit竖排"/>
</Window>

3.2 自定义渲染引擎

对于专业排版需求，可集成SkiaSharp等2D渲染库：

using SkiaSharp;
using SkiaSharp.Views.WPF;
public class SkiaVerticalText : SKElement
{
    public string Text { get; set; } = "Skia竖排示例";
    protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var info = e.Info;
        var surface = e.Surface;
        var canvas = surface.Canvas;
        canvas.Clear(SKColors.White);
        using (var paint = new SKPaint
        {
            Color = SKColors.Black,
            TextSize = 24,
            IsAntialias = true
        })
        {
            // 从下至上绘制
            for (int i = 0; i < Text.Length; i++)
            {
                float yPos = info.Height - (i + 1) * 24;
                canvas.DrawText(
                    Text[i].ToString(),
                    10, yPos, paint);
            }
        }
    }
}

四、性能优化建议

1. 文本缓存：对静态竖排文本使用WriteableBitmap缓存渲染结果
2. 虚拟化：长文本竖排时实现UI虚拟化（如VirtualizingStackPanel自定义）
3. 异步加载：大量竖排文本分批加载
4. 字体优化：使用特定字体（如SimSun）提升中文竖排效果

五、实际应用场景

1. 古籍数字化：实现《论语》《道德经》等经典竖排阅读
2. 书法展示：动态生成书法作品竖排效果
3. UI设计：日式/中式风格界面元素
4. 数据可视化：垂直标签轴标签

六、常见问题解决方案

问题1：竖排后文字显示不全
解决：调整控件Padding属性，或计算文本总高度后动态设置控件尺寸

问题2：标点符号位置异常
解决：自定义标点处理逻辑，参考中文排版规范（GB/T 15835-2011）

问题3：多语言混合竖排
解决：检测字符Unicode范围，对CJK字符和非CJK字符分别处理

七、完整示例项目结构

VerticalTextDemo/
├── Controls/
│   └── VerticalTextBlock.cs
├── Views/
│   └── MainWindow.xaml
├── Resources/
│   └── Fonts/ (存放竖排专用字体)
└── App.xaml

通过系统掌握上述方法，开发者可灵活应对从简单到复杂的竖排文字需求。建议根据项目具体场景选择合适方案：快速原型开发可选用旋转变换法，专业排版应用推荐自定义控件或SkiaSharp方案。