Bordure

Border .NET MAUI (.NET Multi-platform App UI) est un contrôle conteneur qui trace une bordure, un arrière-plan, ou les deux, autour d’un autre contrôle. Un Border ne peut contenir qu’un seul objet enfant. Si vous souhaitez placer une bordure autour de plusieurs objets, enveloppez-les dans un objet conteneur tel qu’une disposition. Pour plus d’informations sur les dispositions, consultez Dispositions.

Border définit les propriétés suivantes :

• Content, de type IView, représente le contenu à afficher dans la bordure. Cette propriété est la ContentProperty de la classe Border, c’est pourquoi elle n’a pas besoin d’être explicitement définie à partir de XAML.
• Padding, de type Thickness, représente la distance entre la bordure et son élément enfant.
• StrokeShape, de type IShape, décrit la forme de la bordure. Cette propriété a un convertisseur de type qui peut convertir une chaîne en son équivalent IShape. Sa valeur par défaut est Rectangle. Par conséquent, une Border sera rectangulaire par défaut.
• Stroke, de type Brush, indique le pinceau utilisé pour peindre la bordure.
• StrokeThickness, de type double, indique la largeur de la bordure. La valeur par défaut de cette propriété est 1.0.
• StrokeDashArray, de type DoubleCollection, représente une collection de valeurs double qui indiquent le modèle de tirets et d’intervalles qui composent la bordure.
• StrokeDashOffset, de type double, spécifie la distance à laquelle un tiret commence dans un modèle de tiret. La valeur par défaut de cette propriété est 0.0.
• StrokeLineCap, de type PenLineCap, décrit la forme au début et à la fin de sa ligne. La valeur par défaut de cette propriété est PenLineCap.Flat.
• StrokeLineJoin, de type PenLineJoin, spécifie le type de jointure utilisé aux sommets de la forme du trait. La valeur par défaut de cette propriété est PenLineJoin.Miter.
• StrokeMiterLimit, de type double, spécifie la limite du ratio de la longueur d’angle à la moitié de l’épaisseur du trait. La valeur par défaut de cette propriété est 10.0.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Important

Lors de la création d’une bordure à l’aide d’une forme, telle qu’un Rectangle ou un Polygon, seules les formes fermées doivent être utilisées. C’est pourquoi les formes ouvertes, telles que la Line, ne sont pas prises en charge.

Pour plus d’informations sur les propriétés qui contrôlent la forme et le trait de la bordure, consultez Formes.

Créer une bordure

Pour tracer une bordure, créez un objet Border et définissez ses propriétés pour définir son apparence. Ensuite, définissez son enfant sur le contrôle auquel la bordure doit être ajoutée.

L’exemple XAML suivant montre comment tracer une bordure autour d’une Label :

<Border Stroke="#C49B33"
        StrokeThickness="4"
        StrokeShape="RoundRectangle 40,0,0,40"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

La valeur de la propriété StrokeShape peut également être spécifiée avec la syntaxe de balises de propriété :

<Border Stroke="#C49B33"
        StrokeThickness="4"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="40,0,0,40" />
    </Border.StrokeShape>
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

Le code C# équivalent est :

using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...

Border border = new Border
{
    Stroke = Color.FromArgb("#C49B33"),
    Background = Color.FromArgb("#2B0B98"),
    StrokeThickness = 4,
    Padding = new Thickness(16, 8),
    HorizontalOptions = LayoutOptions.Center,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(40, 0, 0, 40)
    },
    Content = new Label
    {
        Text = ".NET MAUI",
        TextColor = Colors.White,
        FontSize = 18,
        FontAttributes = FontAttributes.Bold
    }
};

Dans cet exemple, une bordure avec des coins supérieur gauche et inférieur droit arrondis est tracée autour d’une Label. La forme de bordure est définie en tant qu’objet RoundRectangle, dont la propriété CornerRadius est définie sur une valeur Thickness qui permet d’obtenir un contrôle indépendant pour chaque coin du rectangle :

Étant donné que la propriété Stroke est de type Brush, les bordures peuvent également être tracées à l’aide de dégradés :

<Border StrokeThickness="4"
        StrokeShape="RoundRectangle 40,0,0,40"
        Background="#2B0B98"
        Padding="16,8"
        HorizontalOptions="Center">
    <Border.Stroke>
        <LinearGradientBrush EndPoint="0,1">
            <GradientStop Color="Orange"
                          Offset="0.1" />
            <GradientStop Color="Brown"
                          Offset="1.0" />
        </LinearGradientBrush>
    </Border.Stroke>
    <Label Text=".NET MAUI"
           TextColor="White"
           FontSize="18"
           FontAttributes="Bold" />
</Border>

Le code C# équivalent est :

using Microsoft.Maui.Controls.Shapes;
using GradientStop = Microsoft.Maui.Controls.GradientStop;
...

Border gradientBorder = new Border
{
    StrokeThickness = 4,
    Background = Color.FromArgb("#2B0B98"),
    Padding = new Thickness(16, 8),
    HorizontalOptions = LayoutOptions.Center,
    StrokeShape = new RoundRectangle
    {
        CornerRadius = new CornerRadius(40, 0, 0, 40)
    },
    Stroke = new LinearGradientBrush
    {
        EndPoint = new Point(0, 1),
        GradientStops = new GradientStopCollection
        {
            new GradientStop { Color = Colors.Orange, Offset = 0.1f },
            new GradientStop { Color = Colors.Brown, Offset = 1.0f }
        },
    },
    Content = new Label
    {
        Text = ".NET MAUI",
        TextColor = Colors.White,
        FontSize = 18,
        FontAttributes = FontAttributes.Bold
    }
};

Dans cet exemple, une bordure qui utilise un dégradé linéaire est tracée autour d’une Label :

Définir la forme de la bordure avec une chaîne

En XAML, la valeur de la propriété StrokeShape peut être définie à l’aide de la syntaxe de balise de propriété ou en tant que string. Les valeurs string valides pour la propriété StrokeShape sont :

• Ellipse
• Line, suivie d’une ou deux paires de coordonnées x et y. Par exemple, Line 10 20 trace une ligne de (10 20) à (0,0) et Line 10 20, 100 120 trace une ligne de (10 20) à (100 120).
• Path, suivie des données de syntaxe de balisage de chemin d’accès. Par exemple, Path M 10,100 L 100,100 100,50Z trace une bordure triangulaire. Pour plus d’informations sur la syntaxe de balisage de chemin d’accès, consultez Syntaxe de balisage de chemin d’accès.
• Polygon, suivie d’une collection de paires de coordonnées x et y. Par exemple : Polygon 40 10, 70 80, 10 50.
• Polyline, suivie d’une collection de paires de coordonnées x et y. Par exemple : Polyline 0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30.
• Rectangle
• RoundRectangle, éventuellement suivie d’un rayon d’angle. Par exemple, RoundRectangle 40 ou RoundRectangle 40,0,0,40.

Important

Bien que Line soit une valeur string valide pour la propriété StrokeShape, son utilisation n’est pas prise en charge.

Les paires de coordonnées x et y basées sur une String peuvent être délimitées par une virgule et/ou un ou plusieurs espaces. Par exemple, « 40, 10 70, 80 » et « 40 10, 70 80 » sont tous deux valides. Les paires de coordonnées sont converties en objets Point qui définissent les propriétés X et Y de type double.