WPF 직사각형-상단 모서리 만 둥글게

WPF 직사각형-상단 모서리 만 둥글게

---

WPF 직사각형의 상단 모서리 만 둥글게하려면 어떻게해야합니까? 테두리를 만들고 CornerRadius 속성을 설정하고 테두리 안에 사각형을 추가했지만 작동하지 않고 사각형이 둥글 지 않습니다.

<Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="50,50,0,0" BorderBrush="Black">
    <Rectangle Fill="#FF5A9AE0" Grid.Row="0" Grid.ColumnSpan="2" 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);
    }

정보 : http://wpftutorial.net/DrawRoundedRectangle.html

---

이것은 Rectangle (또는 다른 것)에서도 작동합니다.

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

콘텐츠의 크기가 정확하지 않은 경우 높이와 너비로 플레이해야합니다.

참고 URL : https://stackoverflow.com/questions/1697413/wpf-rectangle-round-just-top-corners