wpf - 带彩色圆角的透明矩形

Question

我想在 WPF 中为矩形的圆角设置颜色。

这是我想要的示例:

现在，我有这个代码:

<Rectangle x:Name="rect" Fill="Transparent" RadiusY="10" RadiusX="10"/>

Answer 1

更简单的方法:

<Rectangle Fill="Red" Height="200" Width="200" >
                <Rectangle.Clip >
                    <CombinedGeometry GeometryCombineMode="Exclude">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry Rect="0,0,200,200"/>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <EllipseGeometry x:Name="transparentRect" Center="100 100" RadiusX="120" RadiusY="120"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Rectangle.Clip>
            </Rectangle>

注意

如果更改矩形的大小，则还必须调整几何图形的矩形和半径值，以便它将显示正确的比例。

我在几分钟内完成了此操作，因此可能还有改进的空间。

干杯

编辑

为了获得完全令人满意的方法，我为您制作了 2 个转换器

代码

public class RectangleConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
            var recta = value as Rectangle;
            if (recta == null) return null;
            return new Rect { X = 0, Y = 0, Height = recta.ActualHeight, Width = recta.ActualWidth };
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }
    }

    public class ElipseGeoConverter : IValueConverter {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
            var recta = value as Rectangle;
            if (recta == null) return null;
            return new EllipseGeometry(new Point(recta.ActualWidth / 2, recta.ActualHeight / 2), recta.ActualWidth / 3 * 2,
                recta.ActualHeight / 3 * 2);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }
    }

使用

 <Rectangle Fill="Red" Height="100" Width="100" >
                <Rectangle.Clip >
                    <CombinedGeometry GeometryCombineMode="Exclude">
                        <CombinedGeometry.Geometry1>
                            <RectangleGeometry>
                                <RectangleGeometry.Rect>
                                    <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Rectangle}}" Converter="{StaticResource RectangleConverter}"></Binding>
                                </RectangleGeometry.Rect>
                            </RectangleGeometry>
                        </CombinedGeometry.Geometry1>
                        <CombinedGeometry.Geometry2>
                            <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type Rectangle}}" Converter="{StaticResource GeoConverter}"/>
                        </CombinedGeometry.Geometry2>
                    </CombinedGeometry>
                </Rectangle.Clip>
            </Rectangle>