如何旋转Grid中的图形而不影响内部TextBlock文本？

我之前做WPF项目时也遇到过一模一样的问题，当时折腾了好一会儿才找到最优解！核心思路就是把需要旋转的图形和要保持原样的文本拆分开处理，别让它们共享同一个旋转变换。下面给你两种可行的方案：

方案一：拆分容器（推荐） #

这是最清晰也最容易维护的方法——把所有需要旋转的图形单独放到一个子容器里，只给这个子容器加旋转；TextBlock直接放在原Grid的顶层，和子容器同级，完全不受旋转影响。

示例XAML代码：

<Grid>
    <!-- 专门承载旋转图形的子容器 -->
    <Grid>
        <Grid.RenderTransform>
            <!-- 以容器中心为旋转点，旋转90° -->
            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
        </Grid.RenderTransform>
        <!-- 这里放你的所有图形元素（Path、Rectangle等） -->
        <Rectangle Fill="#FF336699" Width="200" Height="100" />
        <Path Data="M20,20 L180,80" Stroke="#FFFF3333" StrokeThickness="3" />
    </Grid>
    <!-- 文本元素直接放在原Grid中，保持正常方向 -->
    <TextBlock Text="正常显示的文本1" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="15" />
    <TextBlock Text="正常显示的文本2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" />
</Grid>

这个方案的好处是结构清晰，图形和文本的布局互不干扰，后期修改旋转角度或者调整元素位置都很方便，完全不会出现文本偏移的问题。

方案二：给文本添加反向旋转（应急用） #

如果不想大改现有布局，也可以给TextBlock添加一个反向的旋转变换，抵消Grid的旋转效果。不过要注意设置正确的旋转中心，不然文本位置可能会乱。

示例XAML代码：

<Grid>
    <Grid.RenderTransform>
        <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5" />
    </Grid.RenderTransform>
    <!-- 你的图形元素 -->
    <Rectangle Fill="#FF336699" Width="200" Height="100" />
    <!-- 文本添加反向旋转，抵消Grid的90°旋转 -->
    <TextBlock Text="抵消旋转的文本">
        <TextBlock.RenderTransform>
            <RotateTransform Angle="-90" CenterX="0.5" CenterY="0.5" />
        </TextBlock.RenderTransform>
    </TextBlock>
</Grid>

不过这种方案只适合简单布局，复杂场景下很容易出现文本位置偏移，后期维护也麻烦，所以更推荐第一种拆分容器的方法。

效果对比 #

• 当前效果：Grid整体旋转后，图形和文本同步翻转，文本呈现垂直反向的状态，无法正常阅读
• 期望效果：图形旋转90°适配布局，文本保持水平正向的正常阅读状态
• 直接旋转整个Grid的效果：文本随Grid一起旋转，不符合需求

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