BoxView

L’interface utilisateur de l’application multiplateforme .NET (.NET MAUI) BoxView dessine un rectangle ou un carré simple, d’une largeur, d’une hauteur et d’une couleur spécifiées.

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

  • Color, de type Color, qui définit la couleur du BoxView.
  • CornerRadius, de type CornerRadius, qui définit le rayon d’angle du BoxView. Cette propriété peut être définie sur une valeur de rayon d’angle uniforme unique double ou une CornerRadius structure définie par quatre double valeurs appliquées au haut à gauche, au haut à droite, au bas à gauche et au bas à droite du BoxView.

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

Note

Bien que BoxView puisse imiter des graphiques simples, il est préférable d'utiliser .NET MAUI Shapes ou .NET MAUI Graphics.

Créer un BoxView

Pour dessiner un rectangle ou un carré, créez un objet BoxView et définissez ses propriétés Color, WidthRequest, et HeightRequest. Si vous le souhaitez, vous pouvez également définir sa CornerRadius propriété.

L’exemple XAML suivant montre comment créer un BoxView:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BasicBoxView"
             x:Class="BasicBoxView.MainPage">
    <BoxView Color="CornflowerBlue"
             CornerRadius="10"
             WidthRequest="160"
             HeightRequest="160"
             VerticalOptions="Center"
             HorizontalOptions="Center" />
</ContentPage>

Dans cet exemple, un bleu fleur-de-maïs BoxView s’affiche au centre de la page :

Capture d’écran d’un BoxView avec des angles arrondis.

Les propriétés WidthRequest et HeightRequest sont mesurées en unités indépendantes de l’appareil.

Note

Un BoxView peut également être un enfant d’un AbsoluteLayout. Dans ce cas, l’emplacement et la taille de l’élément BoxView sont définis à l’aide de la LayoutBounds propriété liée attachée.

Un BoxView peut également être dimensionné pour ressembler à une ligne d’une largeur et d’une épaisseur spécifiques.

Remplir un BoxView avec un pinceau

À compter de .NET 11, BoxView expose une Fill propriété de type Brush. Le paramètre Fill vous permet de peindre un BoxView à l’aide de n’importe quel pinceau, y compris des dégradés, au lieu d’être limité à la propriété Color de couleur unie.

L’exemple XAML suivant remplit un BoxView avec un LinearGradientBrush:

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         CornerRadius="60,20,20,60"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
            <GradientStop Color="Purple"
                          Offset="0.0" />
            <GradientStop Color="Orange"
                          Offset="0.5" />
            <GradientStop Color="Red"
                          Offset="1.0" />
        </LinearGradientBrush>
    </BoxView.Fill>
</BoxView>

Dans cet exemple, le BoxView est peint avec un dégradé linéaire horizontal allant du violet au rouge :

Capture d’écran d’un BoxView peint avec un pinceau de dégradé linéaire.

Ou un RadialGradientBrush:

<BoxView Opacity="0.5"
         WidthRequest="200"
         HeightRequest="100"
         HorizontalOptions="Center"
         VerticalOptions="Center">
    <BoxView.Fill>
        <RadialGradientBrush Center="0.5,0.5"
                             Radius="0.5">
            <GradientStop Color="Yellow"
                          Offset="0.0" />
            <GradientStop Color="Green"
                          Offset="1.0" />
        </RadialGradientBrush>
    </BoxView.Fill>
</BoxView>

Dans cet exemple, le BoxView est peint avec un dégradé radial allant du jaune au vert :

Capture d’écran d’un BoxView peint avec un pinceau dégradé radial.

La Fill propriété prend la priorité sur la Color propriété. Lorsque les deux sont définis, le pinceau spécifié par Fill est utilisé pour peindre le BoxView. Si Fill est ensuite effacée en la définissant sur null, le BoxView revient à un rendu avec Color:

box.Color = Colors.Red;
box.Fill = new LinearGradientBrush(/* ... */); // Gradient is rendered.
box.Fill = null;                                // Red is rendered.
  • Last updated on