Formes

  • Article

Browse sample. Parcourir l’exemple

Une interface utilisateur d’application multiplateforme .NET (.NET MAUI) Shape est un type qui vous permet de View dessiner une forme à l’écran. Shape les objets peuvent être utilisés dans les classes de disposition et la plupart des contrôles, car la Shape classe dérive de la View classe. Les formes .NET MAUI sont disponibles dans l’espace Microsoft.Maui.Controls.Shapes de noms.

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

  • Aspect, de type Stretch, décrit comment la forme remplit son espace alloué. La valeur par défaut de cette propriété est Stretch.None.
  • Fill, de type Brush, indique le pinceau utilisé pour peindre l’intérieur de la forme.
  • Stroke, de type Brush, indique le pinceau utilisé pour peindre le contour de la forme.
  • StrokeDashArray, de type DoubleCollection, qui représente une collection de double valeurs qui indiquent le modèle de tirets et d’écarts utilisés pour décrire une forme.
  • 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.
  • StrokeDashPattern, de type float[], indique le motif des tirets et des lacunes utilisés lors du dessin du trait pour une forme.
  • StrokeLineCap, de type PenLineCap, décrit la forme au début et à la fin d’une ligne ou d’un segment. 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 d’une forme. 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 StrokeThickness moitié d’une forme. La valeur par défaut de cette propriété est 10.0.
  • StrokeThickness, de type double, indique la largeur du contour de la forme. La valeur par défaut de cette propriété est 1.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.

.NET MAUI définit un certain nombre d’objets qui dérivent de la Shape classe. EllipseVoici , PolygonPathPolylineLine, Rectangleet .RoundRectangle

Peindre des formes

Brush les objets sont utilisés pour peindre les formes Stroke et Fill:

<Ellipse Fill="DarkBlue"
         Stroke="Red"
         StrokeThickness="4"
         WidthRequest="150"
         HeightRequest="50"
         HorizontalOptions="Start" />

Dans cet exemple, le trait et le remplissage d’un Ellipse sont spécifiés :

Paint shapes.

Important

Brush les objets utilisent un convertisseur de type qui permet aux valeurs spécifiées Color pour la Stroke propriété.

Si vous ne spécifiez pas d’objet Brush pour Strokeou si vous définissez StrokeThickness la valeur 0, la bordure autour de la forme n’est pas dessinée.

Pour plus d’informations sur Brush les objets, consultez Pinceaux. Pour plus d’informations sur les valeurs valides Color , consultez Couleurs.

Formes étirées

Shape les objets ont une Aspect propriété, de type Stretch. Cette propriété détermine comment le contenu d’un Shape objet est étiré pour remplir l’espace de disposition de l’objet Shape . L’espace de disposition d’un Shape objet est la quantité d’espace Shape allouée par le système de disposition .NET MAUI, en raison d’un paramètre et HeightRequest d’un paramètre explicites WidthRequest ou de ses HorizontalOptionsVerticalOptions paramètres.

L’énumération Stretch définit les membres suivants :

  • None, qui indique que le contenu conserve sa taille d’origine. C’est la valeur par défaut de la propriété Shape.Aspect.
  • Fill, qui indique que le contenu est redimensionné pour remplir les dimensions de destination. Les proportions ne sont pas conservées.
  • Uniform, qui indique que le contenu est redimensionné pour s’adapter aux dimensions de destination, tout en conservant le rapport d’aspect.
  • UniformToFill, indique que le contenu est redimensionné pour remplir les dimensions de destination, tout en conservant le rapport d’aspect. Si les proportions du rectangle de destination diffèrent de celles de la source, le contenu source est détouré pour s’intégrer dans les dimensions de l’objet.

Le code XAML suivant montre comment définir la Aspect propriété :

<Path Aspect="Uniform"
      Stroke="Yellow"
      Fill="Red"
      BackgroundColor="LightGray"
      HorizontalOptions="Start"
      HeightRequest="100"
      WidthRequest="100">
    <Path.Data>
        <!-- Path data goes here -->
    </Path.Data>  
</Path>

Dans cet exemple, un Path objet dessine un cœur. Les propriétés et HeightRequest les propriétés de WidthRequest l’objet Path sont définies sur 100 unités indépendantes de l’appareil et sa Aspect propriété est définie sur Uniform. Par conséquent, le contenu de l’objet est redimensionné pour s’adapter aux dimensions de destination, tout en préservant les proportions :

Stretch shapes.

Dessiner des formes en pointillés

Shape les objets ont une StrokeDashArray propriété, de type DoubleCollection. Cette propriété représente une collection de double valeurs qui indiquent le modèle de tirets et d’écarts utilisés pour décrire une forme. A DoubleCollection est une ObservableCollection valeur double . Chaque double élément de la collection spécifie la longueur d’un tiret ou d’un écart. Le premier élément de la collection, situé à l’index 0, spécifie la longueur d’un tiret. Le deuxième élément de la collection, situé à l’index 1, spécifie la longueur d’un écart. Par conséquent, les objets avec une valeur d’index pair spécifient des tirets, tandis que les objets avec une valeur d’index impaire spécifient des écarts.

Shape les objets ont également une StrokeDashOffset propriété de type double, qui spécifie la distance dans le modèle de tirets où commence un tiret. L’échec de la définition de cette propriété entraîne l’établissement Shape d’un plan solide.

Les formes en pointillés peuvent être dessinées en définissant à la fois les propriétés et StrokeDashOffset les StrokeDashArray propriétés. La StrokeDashArray propriété doit être définie sur une ou plusieurs double valeurs, avec chaque paire délimitée par une virgule unique et/ou un ou plusieurs espaces. Par exemple, « 0.5 1.0 » et « 0.5,1.0 » sont tous deux valides.

L’exemple XAML suivant montre comment dessiner un rectangle en pointillés :

<Rectangle Fill="DarkBlue"
           Stroke="Red"
           StrokeThickness="4"
           StrokeDashArray="1,1"
           StrokeDashOffset="6"
           WidthRequest="150"
           HeightRequest="50"
           HorizontalOptions="Start" />

Dans cet exemple, un rectangle rempli avec un trait en pointillés est dessiné :

Dashed rectangle.

Fin de ligne de contrôle

Une ligne comporte trois parties : capuchon de début, corps de ligne et limite de fin. Les majuscules de début et de fin décrivent la forme au début et à la fin d’une ligne ou d’un segment.

Shape les objets ont une StrokeLineCap propriété, de type PenLineCap, qui décrit la forme au début et à la fin d’une ligne ou d’un segment. L’énumération PenLineCap définit les membres suivants :

  • Flat, qui représente une limite qui ne s’étend pas au-delà du dernier point de la ligne. Cette valeur est comparable à aucune limite de ligne et correspond à la valeur par défaut de la StrokeLineCap propriété.
  • Square, qui représente un rectangle qui a une hauteur égale à l’épaisseur de trait et une longueur égale à la moitié de l’épaisseur de ligne.
  • Round, qui représente un demi-cercle qui a un diamètre égal à l’épaisseur de ligne.

Important

La StrokeLineCap propriété n’a aucun effet si vous la définissez sur une forme qui n’a aucun point de début ou de fin. Par exemple, cette propriété n’a aucun effet si vous l’avez définie sur un Ellipse, ou Rectangle.

Le code XAML suivant montre comment définir la StrokeLineCap propriété :

<Line X1="0"
      Y1="20"
      X2="300"
      Y2="20"
      StrokeLineCap="Round"
      Stroke="Red"
      StrokeThickness="12" />

Dans cet exemple, la ligne rouge est arrondie au début et à la fin de la ligne :

Line caps.

Jointures de ligne de contrôle

Shape les objets ont une StrokeLineJoin propriété, de type PenLineJoin, qui spécifie le type de jointure utilisé aux sommets de la forme. L’énumération PenLineJoin définit les membres suivants :

  • Miter, qui représente des sommets angulaires réguliers. C’est la valeur par défaut de la propriété StrokeLineJoin.
  • Bevel, qui représente les sommets biseautés.
  • Round, qui représente les sommets arrondis.

Remarque

Lorsque la StrokeLineJoin propriété est définie Mitersur , la StrokeMiterLimit propriété peut être définie sur une valeur pour double limiter la longueur des jointures de trait dans la forme.

Le code XAML suivant montre comment définir la StrokeLineJoin propriété :

<Polyline Points="20 20,250 50,20 120"
          Stroke="DarkBlue"
          StrokeThickness="20"
          StrokeLineJoin="Round" />

Dans cet exemple, le polyligne bleu foncé a des jointures arrondies à ses sommets :

Line joins.