WPF Rectangle - Round Top Corners Only

Question

How can I only have top corners rounded for a WPF rectangle? I created a border and set the CornerRadius property, and inside the border I added my own rectangle, but it does not work, the rectangle is not rounded.

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

Answer 1

The problem is that the rectangle overflows the rounded corners of your border.

A rectangle cannot have individually rounded corners, so if you just put the background color on the border and delete the rectangle:

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

You will get the desired effect.

Answer 2

Set the RadiusX and RadiusY properties on the rectangle, this will give rounded corners.

Answer 3

A good example of how OnRender can be done with a DrawingContext:

  /// <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); } 

Information from: http://wpftutorial.net/DrawRoundedRectangle.html

Answer 4

This one will work even with a Rectangle (or anything else) inside it:

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

You will have to play with Height and Width if you do not have the exact size of the content.