Rectangle WPF - arrondir uniquement les coins supérieurs

Question

Comment puis-je avoir seulement les coins supérieurs arrondis pour un rectangle WPF ?

J'ai créé une bordure et défini le CornerRadius et à l'intérieur de la bordure j'ai ajouté mon rectangle, mais cela ne fonctionne pas, le rectangle n'est pas arrondi.

<Border BorderThickness="1" CornerRadius="50,50,0,0" BorderBrush="Black">
    <Rectangle Fill="#FF5A9AE0" Stretch="UniformToFill" ClipToBounds="True"/>
</Border>

Answer 1

Le problème que vous rencontrez est que le rectangle "déborde" des coins arrondis de votre bordure.

Un rectangle ne peut pas avoir de coins arrondis individuellement, donc si vous mettez simplement la couleur de fond sur la bordure et que vous supprimez le rectangle :

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

Vous obtiendrez l'effet désiré.

Answer 2

Définissez les propriétés RadiusX et RadiusY sur le rectangle, ce qui lui donnera des coins arrondis.

Answer 3

Bon exemple de la possibilité de faire du OnRender avec 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);
    }

Informations provenant de : http://wpftutorial.net/DrawRoundedRectangle.html

Answer 4

Ou vous pouvez construire votre propre Rectangle de remplacement par http://www.codeproject.com/KB/WPF/PartiallyRoundedRectangle.aspx

Answer 5

Celui-ci fonctionnera même avec un Rectangle (ou n'importe quoi d'autre) à l'intérieur :

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

Vous devrez jouer avec la hauteur et la largeur si vous n'avez pas la taille exacte du contenu.