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 属性说明
RadiusX="" 和 RadiusY="" 绑定border的CornerRadius下的TopLeft
Rect="起点X,起点Y,宽度(这里减去了border的左右边框宽度之和),高度(这里减去了border的上下边框宽度之和)"