Bordure

L’interface utilisateur d’application multiplateforme .NET (.NET MAUI) Border est un contrôle conteneur qui dessine une bordure, un arrière-plan ou les deux, autour d’un autre contrôle. Un Border seul objet enfant ne peut contenir qu’un seul objet enfant. Si vous souhaitez placer une bordure autour de plusieurs objets, encapsulez-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 ContentPropertyBorder classe et n’a donc pas besoin d’être définie explicitement à partir du code 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 appliqué à celui-ci qui peut convertir une chaîne en son équivalent IShape.
  • 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, qui représente une collection de valeurs qui indiquent le modèle des double tirets et des lacunes qui composent la bordure.
  • StrokeDashOffset, de type double, spécifie la distance dans le modèle de tiret où commence un 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 de trait. La valeur par défaut de cette propriété est PenLineJoin.Miter.
  • StrokeMiterLimit, de type double, spécifie la limite du rapport de la longueur de mitre à la moitié de l’épaisseur de trait. La valeur par défaut de cette propriété est 10.0.

Ces propriétés sont sauvegardées par BindableProperty des objets, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et de style.

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 dessiner une bordure, créez un Border objet 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 dessiner 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>

Vous pouvez également spécifier la valeur de la propriété à l’aide de la StrokeShape syntaxe de balise 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 dessinée autour d’un Label. La forme de bordure est définie en tant qu’objet RoundRectangle , dont CornerRadius la propriété est définie sur une valeur qui permet un Thickness contrôle indépendant de chaque coin du rectangle :

Border around a Label screenshot.

Étant donné que la Stroke propriété est de type Brush, les bordures peuvent également être dessiné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 dessinée autour d’un Label:

Linear gradient border around a Label screenshot.

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

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

  • Ellipse
  • Line, suivi d’une ou deux paires de coordonnées x et y. Par exemple, Line 10 20 dessine une ligne de (10 20) à (0 0) et Line 10 20, 100 120 dessine une ligne de (10 20) à (100 120).
  • Path, suivi des données de syntaxe de balisage de chemin d’accès. Par exemple, Path M 10,100 L 100,100 100,50Z dessinera une bordure triangulaire. Pour plus d’informations sur la syntaxe de balisage de chemin d’accès, consultez la syntaxe du balisage path.
  • Polygon, suivi d’une collection de paires de coordonnées x et y. Par exemple : Polygon 40 10, 70 80, 10 50.
  • Polyline, suivi 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 suivi d’un rayon d’angle. Par exemple, RoundRectangle 40 ou RoundRectangle 40,0,0,40.

Notes

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