WPF如何隐藏超出Border范围的图像部分？

你遇到的问题根源在于RenderTransform是在元素布局完成后执行的变换，它不会改变元素的布局边界，所以Border的ClipToBounds="True"只会裁剪元素原本布局范围内的内容，变换后超出的部分不会被裁剪。

给你两种可行的解决方案：

方案一：改用LayoutTransform #

LayoutTransform会在布局阶段就应用变换，元素的布局边界会跟着变换结果调整，此时Border的ClipToBounds就能正确裁剪超出部分。修改后的代码如下：

<Border ClipToBounds="True" CornerRadius="80" Width="350" Background="Black">
    <Image LayoutTransformOrigin="0.5,0.5" Source="imgg.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image.LayoutTransform>
            <RotateTransform Angle="60"/>
        </Image.LayoutTransform>
    </Image>
</Border>

方案二：手动设置Border的Clip属性（适合保留RenderTransform的场景） #

如果需要保留RenderTransform（比如做动画时性能更优），可以手动给Border添加Clip属性，用RectangleGeometry匹配Border的圆角和尺寸，这样就能精准裁剪变换后的图像：

<Border CornerRadius="80" Width="350" Background="Black">
    <Border.Clip>
        <RectangleGeometry RadiusX="80" RadiusY="80" Rect="0,0,350,350"/>
    </Border.Clip>
    <Image RenderTransformOrigin="0.5,0.5" Source="imgg.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Image.RenderTransform>
            <RotateTransform Angle="60"/>
        </Image.RenderTransform>
    </Image>
</Border>

注意：RectangleGeometry的Rect要和Border的宽高保持一致，RadiusX/RadiusY要对应Border的CornerRadius。

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