WPF矩形 - 仅圆角顶部角落

Question

如何让一个 WPF 矩形只有上部两个角是圆角？

我创建了一个边框并设置了 CornerRadius 属性，在边框内添加了矩形，但不起作用，矩形没有变成圆角。

<Border BorderThickness="1" CornerRadius="50,50,0,0" BorderBrush="Black">
    <Rectangle Fill="#FF5A9AE0" Stretch="UniformToFill" ClipToBounds="True"/>
</Border>

- kjv

---

你为什么需要矩形？ - Gus Cavalcanti

Answer 1

你遇到的问题是矩形“溢出”了边框的圆角。

矩形无法单独拥有圆角，因此如果你只在边框上放置背景色并移除矩形：

<Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2"
        CornerRadius="50,50,0,0" BorderBrush="Black" Background="#FF5A9AE0">
</Border>

你将得到你想要的效果。

- ChrisF

Answer 2

设置矩形的RadiusX和RadiusY属性，这将使其拥有圆角

- stuartjsmith

---

这将圆角的所有四个角 - cornerRadius 属性已被移除 - 因此您不能这样做：CornerRadius="50,50,0,0"，您必须将所有四个角都圆滑处理。 - Aiden Strydom

Answer 3

以下是如何使用DrawingContext进行OnRender的好例子：

   /// <summary>
    /// Draws a rounded rectangle with four individual corner radius
    /// </summary>
    public static void DrawRoundedRectangle(this DrawingContext dc, Brush brush,
        Pen pen, Rect rect, CornerRadius cornerRadius)
    {
        var geometry = new StreamGeometry();
        using (var context = geometry.Open())
        {
            bool isStroked = pen != null;
            const bool isSmoothJoin = true;

            context.BeginFigure(rect.TopLeft + new Vector(0, cornerRadius.TopLeft), brush != null, true);
            context.ArcTo(new Point(rect.TopLeft.X + cornerRadius.TopLeft, rect.TopLeft.Y), 
                new Size(cornerRadius.TopLeft, cornerRadius.TopLeft),
                90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
            context.LineTo(rect.TopRight - new Vector(cornerRadius.TopRight, 0), isStroked, isSmoothJoin);
            context.ArcTo(new Point(rect.TopRight.X, rect.TopRight.Y + cornerRadius.TopRight), 
                new Size(cornerRadius.TopRight, cornerRadius.TopRight),
                90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
            context.LineTo(rect.BottomRight - new Vector(0, cornerRadius.BottomRight), isStroked, isSmoothJoin);
            context.ArcTo(new Point(rect.BottomRight.X - cornerRadius.BottomRight, rect.BottomRight.Y), 
                new Size(cornerRadius.BottomRight, cornerRadius.BottomRight),
                90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);
            context.LineTo(rect.BottomLeft + new Vector(cornerRadius.BottomLeft, 0), isStroked, isSmoothJoin);
            context.ArcTo(new Point(rect.BottomLeft.X, rect.BottomLeft.Y - cornerRadius.BottomLeft), 
                new Size(cornerRadius.BottomLeft, cornerRadius.BottomLeft),
                90, false, SweepDirection.Clockwise, isStroked, isSmoothJoin);

            context.Close();
        }
        dc.DrawGeometry(brush, pen, geometry);
    }

信息来自： http://wpftutorial.net/DrawRoundedRectangle.html

这篇文章介绍了如何在WPF中绘制带有圆角的矩形。使用Path和Geometry实现，通过调整参数可以控制矩形的大小和圆角的半径。此外，还提供了一些代码示例以及更多关于WPF图形绘制的信息。

- Ievgen

Answer 4

这个可以适用于里面包含矩形（或其他任何东西）的情况：

<Border>
    <Border.OpacityMask>
        <VisualBrush>
            <VisualBrush.Visual>
                <Border CornerRadius="5" Height="100" Width="100" Background="White"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.OpacityMask>

    // put your rounded content here

</Border>

如果您没有确切的内容尺寸，您将不得不调整高度和宽度。

- Lukáš Koten