如何在XAML的DrawingBrush中围绕对象中心旋转渐变

嘿，这个问题我太熟了！你遇到的渐变超出范围的问题，主要是两个原因：一是你的RotateTransform没设置旋转中心，默认是从左上角开始转；二是渐变用了绝对坐标，旋转后自然就脱离目标对象的边界了。

下面是调整后的代码，我会标出关键修改点：

<DrawingBrush x:Key="SteelBrush_Vert" Stretch="Fill">
    <DrawingBrush.Drawing RenderTransformOrigin="0.5, 0.5">
        <DrawingGroup>
            <GeometryDrawing Geometry="M114.000,293.847C114.000,280.324,114.045,269.362,114.100,269.362L391.900,269.362C391.955,269.362,392.000,280.324,392.000,293.847L392.000,485.878C392.000,499.400,391.955,510.362,391.900,510.362L114.100,510.362C114.045,510.362,114.000,499.400,114.000,485.878z">
                <GeometryDrawing.Brush>
                    <!-- 关键修改1：把MappingMode改成RelativeToBoundingBox，让渐变基于目标对象的边界框定位 -->
                    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
                        <GradientStop Color="Black" Offset="0" />
                        <GradientStop Color="#FFDADADA" Offset="0.082" />
                        <GradientStop Color="#FF282828" Offset="0.854" />
                        <GradientStop Color="White" Offset="0.949" />
                        <GradientStop Color="Black" Offset="1" />
                    </LinearGradientBrush>
                </GeometryDrawing.Brush>
            </GeometryDrawing>
        </DrawingGroup>
    </DrawingBrush.Drawing>
    <DrawingBrush.RelativeTransform>
        <!-- 关键修改2：给RotateTransform设置CenterX和CenterY为0.5，让旋转围绕对象中心进行 -->
        <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"/>
    </DrawingBrush.RelativeTransform>
</DrawingBrush>

为什么要这么改？ #

• RelativeToBoundingBox：这个模式下，渐变的起始和结束点是相对于目标对象的边界框的比例值（0到1之间），不管目标对象多大，渐变都会自适应填充，旋转时也不会超出范围。原来的Absolute模式是固定像素坐标，旋转后肯定会错位。
• RotateTransform的CenterX/CenterY：默认是(0,0)，也就是左上角，设置成(0.5,0.5)后，旋转就会围绕对象的中心进行，完美解决偏移问题。

你可以试试这个修改后的代码，渐变应该就能准确围绕对象中心旋转，不会超出范围啦！

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