使用Border并设置圆角,Border内部的其他元素会超出圆角而导致灾难级的视觉体验,通过设置Border的clip属性,来解决这个问题
<Border BorderThickness="1" BorderBrush="Black" CornerRadius="8"> <Border.Clip> <RectangleGeometry RadiusX="{Binding CornerRadius.TopLeft, RelativeSource={RelativeSource AncestorType={x:Type Border}}}" RadiusY="{Binding RadiusX, RelativeSource={RelativeSource Self}}"> <RectangleGeometry.Rect> <MultiBinding Converter="{StaticResource WidthAndHeightToRectConverter}"> <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType={x:Type Border}}" /> <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType={x:Type Border}}" /> </MultiBinding> </RectangleGeometry.Rect> </RectangleGeometry> </Border.Clip>
<!--其他元素--> </Border>
这里有个转换器:WidthAndHeightToRectConverter,代码如下:
public class WidthAndHeightToRectConverter : IMultiValueConverter { public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { double width = (double)values[0]; double height = (double)values[1]; return new Rect(0, 0, width, height); } public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }