WPF rectángulo - circular, a sólo esquinas superiores

Question

¿Cómo puedo tener sólo las esquinas superiores redondeadas para una rectange WPF? Creé un borde y establecí la propiedad CornerRadius y dentro del borde agregué mi rectángulo, pero no funciona, el rectángulo no está redondeado.

<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

El problema que tiene es que el rectángulo está "desbordando" las esquinas redondeadas de su borde.

Un rectángulo no puede tener esquinas redondeadas de forma individual, por lo que si usted acaba de poner el color de fondo de la frontera y quita el rectángulo:

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

Usted obtendrá el efecto deseado.

Answer 2

Establecer las propiedades RadiusX y RadiusY en el rectángulo, esto le dará esquinas redondeadas

Answer 3

buen ejemplo de cómo su posible hacer OnRender con 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); 
    } 

Información: http://wpftutorial.net/DrawRoundedRectangle.html

Answer 4

Éste funcionará incluso con Rectan GLE (o cualquier otra cosa) en su interior:

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

Tendrá que jugar con altura y anchura, si usted no tiene el tamaño exacto del contenido.