WPF Canvas中解决TextBlock因坐标转换导致镜像显示的问题

问题根源在于Canvas的LayoutTransform设置了ScaleY=-1，会让所有子元素垂直翻转，TextBlock的文字自然也会被镜像。要解决这个问题，只需要给每个TextBlock单独添加反向的翻转变换，抵消Canvas的全局翻转，同时调整位置锚点保证坐标匹配。

方案一：使用LayoutTransform并调整位置 #

给TextBlock添加ScaleTransform(1, -1)，同时因为翻转后TextBlock的锚点从左上角变成左下角，需要用原始Top坐标减去文本高度来修正位置：

public void DrawMtext(List<(string, double, List<double>)> canvasMtextList)
{
    foreach ((string, double, List<double>) mtext in canvasMtextList)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.Text = mtext.Item1;
        textBlock.FontSize = Math.Ceiling(mtext.Item2 * 5);

        // 添加反向翻转，抵消Canvas的垂直翻转
        textBlock.LayoutTransform = new ScaleTransform(1, -1);

        // 先测量文本高度，修正Top位置
        textBlock.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
        Canvas.SetLeft(textBlock, mtext.Item3[0]);
        Canvas.SetTop(textBlock, mtext.Item3[1] - textBlock.DesiredSize.Height);

        map_page_canvas.Children.Add(textBlock);
    }
}

方案二：使用RenderTransform并设置锚点 #

通过设置RenderTransformOrigin为左下角，再添加反向翻转，这样不需要手动计算高度，位置会自动匹配：

public void DrawMtext(List<(string, double, List<double>)> canvasMtextList)
{
    foreach ((string, double, List<double>) mtext in canvasMtextList)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.Text = mtext.Item1;
        textBlock.FontSize = Math.Ceiling(mtext.Item2 * 5);

        // 设置翻转锚点为左下角，再添加反向翻转
        textBlock.RenderTransformOrigin = new Point(0, 1);
        textBlock.RenderTransform = new ScaleTransform(1, -1);

        // 直接使用原始坐标即可，锚点设置后位置自动适配
        Canvas.SetLeft(textBlock, mtext.Item3[0]);
        Canvas.SetTop(textBlock, mtext.Item3[1]);

        map_page_canvas.Children.Add(textBlock);
    }
}

两种方案都能让TextBlock正常显示，建议优先用方案二，位置计算更简洁，不需要提前测量文本尺寸。

内容的提问来源于stack exchange，提问作者user20276370