Syntaxe XAML pour les tracés

Parcourir l'exemple

La syntaxe de balisage de chemin d’accès .NET Multi-Platform App UI (.NET MAUI) vous permet de spécifier de manière compacte des géométries de chemin dans XAML.

La syntaxe de balisage de chemin d’accès est spécifiée en tant que valeur de chaîne pour la propriété Path.Data :

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

La syntaxe de balisage de chemin d’accès est composée d’une valeur FillRule facultative et d’une ou plusieurs descriptions de figure. Cette syntaxe peut être exprimée comme suit : <Path Data="[fillRule] figureDescription [figureDescription] * " ... />

Dans cette syntaxe :

• fillRule est un FillRule facultatif qui spécifie si la géométrie doit utiliser la règle de remplissage EvenOdd ou Nonzero. F0 est utilisé pour spécifier la règle de remplissage EvenOdd, tandis que F1 est utilisé pour spécifier la règle de remplissage Nonzero. Pour plus d’informations sur les règles de remplissage, consultez Règles de remplissage.
• figureDescription représente une figure composée d’une commande de déplacement, de commandes de dessin et d’une commande de fermeture facultative. Une commande de déplacement spécifie le point de départ de la figure. Les commandes de dessin décrivent le contenu de la figure et la commande de fermeture facultative ferme la figure.

Dans l’exemple ci-dessus, la syntaxe de balisage de chemin spécifie un point de départ à l’aide de la commande de déplacement (M), une série de lignes droites à l’aide de la commande de ligne (L), puis ferme le chemin avec la commande de fermeture (Z).

Dans la syntaxe de balisage de chemin d’accès, les espaces ne sont pas requis avant ou après les commandes. De plus, deux nombres n'ont pas besoin d'être séparés par une virgule ou un espace blanc, mais cela ne peut être réalisé que lorsque la chaîne est non ambiguë.

Conseil

La syntaxe de balisage de chemin d’accès est compatible avec les définitions de chemin d’accès d’image Graphique vectoriel évolutif (SVG), ce qui permet de porter des graphiques depuis le format SVG.

Bien que la syntaxe de balisage de chemin d’accès soit destinée à être utilisée dans XAML, elle peut être convertie en objet Geometry dans le code en appelant la méthode ConvertFromInvariantString dans la classe PathGeometryConverter :

Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");

Commande de déplacement

La commande de déplacement spécifie le point de départ d’une nouvelle figure. La syntaxe de cette commande est : M startPoint ou m startPoint.

Dans cette syntaxe, startPoint est une structure Point qui spécifie le point de départ d’une nouvelle figure. Si vous répertoriez plusieurs points après la commande de déplacement, une ligne est tracée jusqu’à ces points.

M 10,10 est un exemple de commande de déplacement valide.

Commandes de dessin

Une commande draw peut se composer de plusieurs commandes shape. Les commandes de dessin suivantes sont disponibles :

• Ligne (L ou l).
• Ligne horizontale (H ou h).
• Ligne verticale (V ou v).
• Arc elliptique (A ou a).
• Courbe de Bézier cubique (C ou c).
• Courbe de Bézier quadratique (Q ou q).
• Courbe de Bézier cubique lisse (S ou s).
• Courbe de Bézier quadratique lisse (T ou t).

Chaque commande de dessin est spécifiée avec une lettre non sensible à la casse. Lorsque vous entrez séquentiellement plusieurs commandes du même type, vous pouvez omettre l’entrée de commande en double. Par exemple, L 100,200 300,400 équivaut à L 100,200 L 300,400.

Commande de ligne

La commande de ligne crée une ligne droite entre le point actuel et le point de terminaison spécifié. La syntaxe de cette commande est : L endPoint ou l endPoint.

Dans cette syntaxe, endPoint est un Point qui représente le point de terminaison de la ligne.

L 20,30 et L 20 30 sont des exemples de commandes de ligne valides.

Pour plus d’informations sur la création d’une ligne droite en tant qu’objet PathGeometry, consultez Créer un LineSegment.

Commande de ligne horizontale

La commande de ligne horizontale crée une ligne horizontale entre le point actuel et l’axe des x spécifié. La syntaxe de cette commande est : H x ou h x.

Dans cette syntaxe, x est un double qui représente la coordonnée x du point de terminaison de la ligne.

H 90 est un exemple de commande horizontal line valide.

Commande de ligne verticale

La commande de ligne verticale crée une ligne verticale entre le point actuel et la coordonnée y spécifiée. La syntaxe de cette commande est : V y ou v y.

Dans cette syntaxe, y est un double qui représente l’axe des y du point de terminaison de la ligne.

V 90 est un exemple de commande vertical line valide.

Commande arc elliptique

La commande arc elliptique crée un arc elliptique entre le point actuel et le point de terminaison spécifié. La syntaxe de cette commande est : A size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint ou a size rotationAngle isLargeArcFlag sweepDirectionFlag endPoint.

Dans cette syntaxe :

• size est un Size qui représente le rayon en x et y de l’arc.
• rotationAngle est un double qui représente la rotation de l’ellipse, en degrés.
• isLargeArcFlag doit être défini sur 1 si l’angle de l’arc doit être de 180 degrés ou supérieur, sinon il doit être défini sur 0.
• sweepDirectionFlag doit être défini sur 1 si l’arc est tracé dans une direction à angle positif, sinon il doit être défini sur 0.
• endPoint est un Point vers lequel l’arc est tracé.

A 150,150 0 1,0 150,-150 est un exemple de commande d’arc elliptique valide.

Pour plus d’informations sur la création d’un arc elliptique en tant qu’objet PathGeometry, consultez Créer un ArcSegment.

Commande de courbe de Bézier cubique

La commande de courbe de Bézier cubique crée une courbe de Bézier cubique entre le point actuel et le point de terminaison spécifié à l’aide des deux points de contrôle spécifiés. La syntaxe de cette commande est : C controlPoint1 controlPoint2 endPoint ou c controlPoint1 controlPoint2 endPoint.

Dans cette syntaxe :

• controlPoint1 est un Point qui représente le premier point de contrôle de la courbe, qui détermine la tangente de départ de la courbe.
• controlPoint2 est un Point qui représente le deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est tracée.

C 100,200 200,400 300,200 est un exemple de commande de courbe de Bézier cubique valide.

Pour plus d’informations sur la création d’une courbe de Bézier cubique en tant qu’objet PathGeometry, consultez Créer un BezierSegment.

Commande de courbe de Bézier quadratique

La commande de courbe de Bézier quadratique crée une courbe de Bézier quadratique entre le point actuel et le point de terminaison spécifié à l’aide du point de contrôle spécifié. La syntaxe de cette commande est : Q controlPoint endPoint ou q controlPoint endPoint.

Dans cette syntaxe :

• controlPoint est un Point qui représente le point de contrôle de la courbe, qui détermine les tangentes de début et de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est tracée.

Q 100,200 300,200 est un exemple de commande quadratic Bezier curve valide.

Pour plus d’informations sur la création d’une courbe de Bézier quadratique en tant qu’objet PathGeometry, consultez Créer un QuadraticBezierSegment.

Commande de courbe de Bézier cubique lisse

La commande de courbe de Bézier cubique lisse crée une courbe de Bézier cubique entre le point actuel et le point de terminaison spécifié à l’aide du point de contrôle spécifié. La syntaxe de cette commande est : S controlPoint2 endPoint ou s controlPoint2 endPoint.

Dans cette syntaxe :

• controlPoint2 est un Point qui représente le deuxième point de contrôle de la courbe, qui détermine la tangente de fin de la courbe.
• endPoint est un Point qui représente le point vers lequel la courbe est tracée.

Le premier point de contrôle est supposé être le reflet du deuxième point de contrôle de la commande précédente, par rapport au point actuel. S’il n’y a pas de commande précédente ou si la commande précédente n’était pas une commande de courbe de Bézier cubique ou une commande de courbe de Bézier cubique lisse, le premier point de contrôle est censé coïncider avec le point actuel.

S 100,200 200,300 est un exemple de commande de courbe de Bézier lisse valide.

Commande de courbe de Bézier quadratique lisse

La commande de courbe de Bézier quadratique lisse crée une courbe de Bézier quadratique entre le point actuel et le point de terminaison spécifié à l’aide d’un point de contrôle. La syntaxe de cette commande est : T endPoint ou t endPoint.

endPoint est un Point qui représente le point vers lequel la courbe est tracée.

Le point de contrôle est supposé être la réflexion du point de contrôle de la commande précédente par rapport au point actuel. S’il n’existe aucune commande précédente ou si la commande précédente n’était pas une courbe de Bézier quadratique ou une commande de courbe de Bézier quadratique lisse, le point de contrôle est censé coïncider avec le point actuel.

T 100,30 est un exemple de commande de courbe de Bézier quadratique lisse valide.

Commande de fermeture

La commande de fermeture termine la figure actuelle et crée une ligne qui connecte le point actuel au point de départ de la figure. Par conséquent, cette commande crée une jointure de ligne entre le dernier segment et le premier segment de la figure.

La syntaxe de la commande de fermeture est : Z ou z.

Valeurs supplémentaires

Au lieu d’une valeur numérique standard, vous pouvez également utiliser ces valeurs spéciales respectant la casse :

• Infinity représente double.PositiveInfinity.
• -Infinity représente double.NegativeInfinity.
• NaN représente double.NaN.

En outre, vous pouvez également utiliser la notation scientifique ne respectant pas la casse. Par conséquent, +1.e17 est une valeur valide.