Rectángulo WPF: redondo solo en las esquinas superiores

rounded-corners

Question

¿Cómo puedo tener las esquinas superiores redondeadas para una rejilla de 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

Éste funcionará incluso con Rectangle (o cualquier otra cosa) dentro de él:

<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 Alto y Ancho si no tiene el tamaño exacto del contenido.

Answer 2

Buen ejemplo de cómo es 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 de: http://wpftutorial.net/DrawRoundedRectangle.html

Answer 3

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

Un rectángulo no puede tener esquinas redondeadas individualmente, por lo que si simplemente colocas el color de fondo en el borde y quitas el rectángulo:

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

Obtendrás tu efecto deseado.

Answer 4

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