WPF矩形-仅在顶角处为圆形

如何使WPF矩形的顶角仅为圆角

我创建了一个边框并设置了

CornerRadius

属性，在边框内我添加了矩形，但它不起作用，矩形没有圆角

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

---

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

矩形不能有单独的圆角，因此如果您只是将背景颜色放在边框上，然后删除矩形：

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

---

您将获得所需的效果。

在矩形上设置RadiusX和RadiusY属性，这将为其提供圆角。

使用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);
    }

//
///绘制具有四个独立角半径的圆角矩形
/// 
公共静态无效DrawRoundedRectangle（此DrawingContext dc，笔刷，
钢笔、直尺、直角半径（直角半径）
{
var geometry=新的StreamGeometry（）；
使用（var context=geometry.Open（））
{
bool isStroked=pen！=null；
const bool isSmoothJoin=true；
context.beginigure（rect.TopLeft+新向量（0，cornerRadius.TopLeft），brush！=null，true）；
ArcTo（新点（rect.TopLeft.X+cornerRadius.TopLeft，rect.TopLeft.Y），
新尺寸（cornerRadius.TopLeft，cornerRadius.TopLeft），
90，错误，扫掠方向。顺时针，isStroked，isSmoothJoin）；
LineTo（rect.TopRight-新向量（cornerRadius.TopRight，0）、isStroked、isSmoothJoin）；
ArcTo（新点（rect.TopRight.X、rect.TopRight.Y+cornerRadius.TopRight），
新尺寸（cornerRadius.TopRight，cornerRadius.TopRight），
90，错误，扫掠方向。顺时针，isStroked，isSmoothJoin）；
LineTo（rect.BottomRight-新向量（0，cornerRadius.BottomRight），isStroked，isSmoothJoin）；
ArcTo（新点（rect.BottomRight.X-cornerRadius.BottomRight，rect.BottomRight.Y），
新尺寸（cornerRadius.BottomRight，cornerRadius.BottomRight），
90，错误，扫掠方向。顺时针，isStroked，isSmoothJoin）；
LineTo（rect.BottomLeft+新向量（cornerRadius.BottomLeft，0）、isStroked、isSmoothJoin）；
ArcTo（新点（rect.BottomLeft.X，rect.BottomLeft.Y-cornerRadius.BottomLeft），
新尺寸（cornerRadius.BottomLeft，cornerRadius.BottomLeft），
90，错误，扫掠方向。顺时针，isStroked，isSmoothJoin）；
context.Close（）；
}
绘制几何图形（画笔、钢笔、几何图形）；
}

资料来源：

---

即使矩形（或其他任何东西）在其内部也可以使用此选项：

<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>

//把你的内容放在这里

---

如果您没有确切的内容大小，您将不得不使用高度和宽度。

为什么需要矩形？它环绕所有四个角-cornerRadius属性已删除-因此您不能这样做：

cornerRadius=“50,50,0,0”

您必须环绕所有四个角