Partager via

Xamarin.Forms Formes

  • Article

Il Shape s’agit d’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.

Xamarin.FormsLes formes sont disponibles dans l’espace Xamarin.Forms.Shapes de noms sur iOS, Android, macOS, les plateforme Windows universelle (UWP) et Windows Presentation Foundation (WPF).

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.
  • 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.

Les propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être les cibles de liaisons de données et mises en forme avec un style.

Xamarin.Forms définit un certain nombre d’objets qui dérivent de la Shape classe. Il s’agit Ellipsede : , , LinePolygonPath, Polyline, et .Rectangle

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 :

Peindre des formes

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 Xamarin.Forms Pinceaux. Pour plus d’informations sur les valeurs valides Color , consultez Couleurs dans Xamarin.Forms.

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 Xamarin.Forms système de disposition, en raison d’un WidthRequest paramètre explicite ou HeightRequest 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 :

Formes étirées

Dessiner des formes en pointillés

Les objets Shape ont une propriété StrokeDashArray 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é :

Rectangle en pointillés

Contrôler les extrémités des lignes

Une ligne comprend trois parties : l’extrémité de début, le corps de la ligne et l’extrémité 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 :

Majuscules de ligne

Contrôler les jonctions de lignes

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 :

Jointures de ligne