『QQ:1353814576』

WPF Border 实现图片背景且圆角边框 背景不溢出


Border设计圆角边框 会遇到如下图的情况 内部的控件会溢出遮盖border的边框

如下皮卡丘图片 包围图片控件的圆角border控件圆角部分被图片四角覆盖 也就是所谓的边界圆角溢出

Border实现圆角边框内部控件溢出不显示 代码如下:

<Border x:Name="border" Padding="0" 
BorderBrush="Black" BorderThickness="3" 
Width="300" Height="300" VerticalAlignment="Center" 
HorizontalAlignment="Center" CornerRadius="20">
            <Image  Source="1.png" Stretch="UniformToFill">
                <Image.Clip>
                    <RectangleGeometry 
					RadiusX="{Binding ElementName=border,Path=CornerRadius.TopLeft}" 
					RadiusY="{Binding ElementName=border,Path=CornerRadius.TopLeft}" 
					Rect="0,0,294,294" />
                </Image.Clip>
            </Image>
</Border>

RectangleGeometry 属性说明

  1. RadiusX="" 和 RadiusY="" 绑定border的CornerRadius下的TopLeft

  2. Rect="起点X,起点Y,宽度(这里减去了border的左右边框宽度之和),高度(这里减去了border的上下边框宽度之和)"

Border实现圆角边框且内部控件溢出不显示 效果如下

Border设计圆角边框 会遇到如下图的情况 内部的控件会溢出遮盖border的边框