WPF矩形 – 只是顶angular

我怎么才能有一个WPF rectange四舍五入的顶angular？ 我创build了一个边框，并设置了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> 

Answer 1

你得到的问题是矩形是“溢出”你的边界的圆angular。

一个矩形不能有单独的圆angular，所以如果你只是把背景颜色放在边框上，并删除矩形：

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

你会得到你想要的效果。

Answer 2

在矩形上设置RadiusX和RadiusY属性，这将使其具有圆angular

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

Answer 4

这个可以在里面使用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> 

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