Bordure

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) Border est un contrôle de conteneur qui dessine 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, 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 ContentProperty de la Border classe et n’a donc pas besoin d’être définie explicitement à 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. Un convertisseur de type est appliqué à cette propriété 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 double valeurs qui indiquent le modèle de tirets et d’interstices qui composent la bordure.
  • StrokeDashOffset, de type double, spécifie la distance dans le motif 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 entre la longueur du mitre et la moitié de l’épaisseur du trait. La valeur par défaut de cette propriété est 10.0.

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

Important

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

La valeur par défaut de la StrokeShape propriété est Rectangle. Par conséquent, un Border sera rectangulaire par défaut.

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’un 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 StrokeShape de la 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 arrondis en haut à gauche et en bas à droite est dessinée autour d’un Label. La forme de bordure est définie comme un RoundRectangle objet, dont CornerRadius la propriété est définie sur une valeur qui permet un Thickness contrôle indépendant de chaque coin du rectangle :

Bordure autour d’une capture d’écran d’étiquette.

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

Bordure de dégradé linéaire autour d’une capture d’écran d’étiquette.

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 property-tag ou en tant que string. Les valeurs valides string pour la StrokeShape propriété sont les suivantes :

  • 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 dessine une bordure triangulaire. Pour plus d’informations sur la syntaxe du balisage de chemin d’accès, consultez Syntaxe du balisage de chemin d’accès.
  • 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.

Important

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

StringLes paires de coordonnées 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 tous deux valides. Les paires de coordonnées seront converties Point en objets qui définissent X des propriétés et Y , de type double.