Bordure

  • Article

L’interface utilisateur de l’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 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 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. Il s’agit de la valeur Rectanglepar défaut . Par conséquent, une Border valeur est 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, qui représente une collection de double valeurs qui indiquent le modèle des tirets et des lacunes qui composent la bordure.
  • StrokeDashOffset, de type double, spécifie la distance dans le modèle de tirets 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 mitreur à la moitié de l’épaisseur du 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 mises en forme.

Important

Lors de la création d’une bordure à l’aide d’une forme, telle qu’une Rectangle ou Polygon, seules les formes fermées doivent être utilisées. Par conséquent, les formes ouvertes telles que Line celles-ci 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 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 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 angle 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 string pour la StrokeShape propriété sont les suivantes :

  • Ellipse
  • Line, suivis 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 de balisage de chemin d’accès, consultez la syntaxe de 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.

Important

Bien qu’il Line s’agit d’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 virgule unique 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 Point objets qui définissent X et Y propriétés, de type double.