Developpement Windows Phone - partie 17

  • Article

Graphiques

Cet article fait partie d’une série d’articles sur le développement Windows Phone. Il s’agit d’une traduction des articles se trouvant sur la MSDN.

Sommaire

Bien débuter et fondamentaux

Visuels et média

Travailler avec les données

Sondes et autres fonctionnalités spécifiques au téléphone

Data Binding

La plupart des applications Windows Phone affichent des données dans les contrôles. Dans de nombreux cas, les données sont des objets business tels que des actions en bourse, des titres de news ou des images. En plus, vous voulez souvent autoriser l'utilisateur à sélectionner un élément depuis une liste puis afficher les détails relatifs à cet élément dans un autre contrôle comme par exemple une zone de texte.

Ce tutoriel montre comment lier un contrôle à un simple élément et comment lier un contrôle de liste à une collection d'éléments, De plus, vous verrez au sein de cet article comment personnaliser l'affichage des éléments, comment implémenter une vue détaillée basée sur une sélection et comment convertir les données avant de les afficher.

Ce tutoriel contient les sections suivantes:

Graphiques

Dans Windows Phone 7, il existe plusieurs options pour créer des formes et les dessiner à l’écran. Ce tutoriel introduit les formes telles que les ellipses, les rectangles, les polygones et les chemins. Il se concentre sur la création de graphique en utilisant du XAML.

Remarque

Si vous faites beaucoup de graphiques, vous voudrez probablement utiliser un outil WYSIWYG tel que Expression Blend pour Windows Phone. Un outil WYSIWYG génère juste le XAML, et c’est pourquoi comprendre le fonctionnement interne du XAML est intéressant.

Ce tutoriel contient les sections suivantes:

Introduction aux graphiques

Il existe deux ensembles de classes qui définissent une région d’espace : Shape et Geometry. La principale différence entre ces classes est qu’un Shape a un pinceau (brush) associé et peut être affiché à l’écran, tandis qu’un objet Geometry définit simplement une région d’espace et n’est pas affiché. Vous pouvez voir un Shape comme un UIElement avec ses limites définies par un Geometry. Ce tutoriel ne parlera que des classes Shape.

Les différentes classes Shape sont Line, Ellipse, Rectangle, Polygon, Polyline, et Path. Path est intéressant dans le sens où il permet de définir une forme de votre choix.

Pour qu’un objet Shape soit affiché à l’écran, un objet Brush doit lui être associé. La propriété Fill du Shape est définie sur l’objet Brush désiré. Les différents types de pinceaux de Silverlight pour Windows Phone sont: SolidColorBrush, LinearGradientBrush, RadialGradientBrush, et ImageBrush.
Pour plus d’informations sur les classes Shape et Geometry, lisez les sujets suivants sur MSDN:

Ellipses

Pour créer une Ellipse basique, spécifiez simplement les propriétés Width, Height, et un Brush pour la propriété Fill.

L’exemple suivant créé une Ellipse avec une largeur (Width) de 300 pixels, une hauteur (Height) de 300 pixels, et utilise un objet SBlue de type SolidColorBrush pour sa propriété Fill.

XAML

  1. <Ellipse Fill="Blue"
  2. Height="300"
  3. Width="300">

Displays an Ellipse

Rectangles et contours

Silverlight vous autorise à arrondir les coins d’un Rectangle. Pour créer des coins arrondis, specifies une valeur pour les propriétés RadiusX et RadiusY. Ces propriétés spécifient les axes X et Y d’une ellipse qui définit la courbe des coins. La valeur maximum de la propriété RadiusX est la valeur de Width divisée par deux et la valeur maximum de la propriété RadiusY est celle de Height divisée par deux.

Toutes les classes Shape ont des propriétés Stroke et StrokeThickness. Stroke spécifie le pinceau (Brush) qui est utilisé pour peindre la bordure de la forme. StrokeThickness spécifie l'épaisseur de cette bordure.

Remarque

Un objet Line affiche seulement un objet Stroke, et non l’objet Fill, car il n'a pas d'espace intérieur. Pour afficher une ligne (Line), assurez-vous que les propriétés Stroke et StrokeThickness sont spécifiées.

Dans l'exemple suivant, on créé un Rectangle avec une largeur Width de 100 et une hauteur Height de 50. Il utilise un pinceau SolidColorBrush pour le remplissage Fill et un pinceau noir pour le contour Stroke. La propriété StrokeThickness est définie sur 3 pixels et les propriétés RadiusX et RadiusY sur 10, ce qui donne au Rectangle des coins arrondis.
L'image suivante montre un Rectangle avec des coins arrondis affichés sur un Windows Phone.

Get Microsoft Silverlight

XAML

  1. <Rectangle Fill="SteelBlue"
  2. Height="275"
  3. Width="350"
  4. Stroke="AliceBlue"
  5. StrokeThickness="15"
  6. RadiusX="40"
  7. RadiusY="30">
  8. </Rectangle>

Displays a Rectangle

Polygones

Un Polygon est une forme avec une limitation définie par un nombre arbitraire de points. La limitation est créée en connectant une ligne entre un point et le suivant, le dernier point étant relié au tout premier. La propriété Points définie la collection de points qui forment cette limitation. En XAML, vous définissez les points avec une liste séparée par des points. En code, vous utilisez un objet PointCollection, collection à laquelle vous ajoutez les points un par un.

L'exemple suivant créé un Polygon avec quatre points définis sur (10,200), (60,140), (130,140), et (180,200). Il utilise un pinceau bleu (SolidColorBrush) pour son remplissage (Fill). Aucun Stroke n'est défini et il est donc possible d'arranger les points pour que rien ne soit affiché. Si un Stroke est défini, au moins une ligne ou un point aussi fin que le Stroke est défini. Utilisez les sliders dans l'exemple pour expérimenter avec les coordonnées des différents points. Notez également que si vous cochez la case Stroke le dernier point est connecté au premier.

  Get Microsoft Silverlight

Polylines

Un objet Polyline est similaire à un Polygon dont les limites de la forme sont définies par une série de point. La principale différence entre un Polyline et un Polygon est que le dernier point d'un Polyline n'est pas connecté au premier point. La propriété Fill d'un Polyline peint toujours l'intérieur de la forme même si les extrémités des limites (ou Stroke) ne se touchent pas.

Comme avec un Polygon, la propriété Points définie la collection de points qui forment les limitations. En XAML, vous définissez les points avec une liste séparée par des virgules. En code, vous utilisez un objet PointCollection dans lequel vous ajoutez chaque Point pour former la collection.

L'exemple suivant créé un Polyline avec quatre points définis sur (10,200), (60,140), (130,140), et (180,200). La propriété Fill n'est pas définie mais un Stroke l'est. Notez que le dernier et le premier point ne sont pas connectés comme ils le sont pour un Polygon. Utilisez les slides dans cet exemple pour expérimenter avec les coordonnées des différents points. Comparez les différences entre un Polyline et Polygon lorsque les cases Fill et Stroke sont cochées

  Get Microsoft Silverlight

Paths

Un objet Path est la forme (Shape) la plus versatile parce qu’elle vous permet de définir une géométrie arbitraire. Pourtant, avec cette liberté vient également une complexité accrue. Cette section vous montre comment créer un Path basic en XAML. Pour voir cet objet en profondeur, lisez les articles MSDN Path Markup Syntax et Shapes and Drawing.

La géométrie d’un chemin est définie avec la propriété Data. La propriété Data peut être définie sur un objet Geometry ou en XAML. Pour définir un chemin en XAML, vous utilisez la syntaxe de "path markup".

L'exemple suivant créé un Path qui est basé sur une courbe de Bezier et un segment. L'attribut Data commence avec la commande Move, indiqué par un M, qui établit un point de départ pour le path. La lettre majuscule M indique une position absolue pour le nouveau point courant. La lettre majuscule M indique une position absolue du point courant. Un “m” minuscule indique une position relative. Le premier segment est une courbe de Bézier cubique qui commence à (100,200) et finit à (400,175), et qui est dessinée en utilisant les points de contrôle (100,25) et (400,350). Ce segment est indiqué par la commande C dans les attributs de Data. Une fois encore, la lettre majuscule C indique un chemin en position absolue, la lettre minuscule indique un chemin relatif.

Le second segment commence avec une commande (H) de ligne horizontale, qui signifie une ligne dessinée à partir de la fin du précédent segment (400,175) vers un nouveau point (280,175). Parce qu'il s'agit d'une commande de ligne horizontale, la valeur spécifiée est une coordonnée X (ordonnée).

Remarque

Les paramètres de données des path sont sensibles à la casse.

XAML

  1. <Path Stroke="DarkGoldenRod"
  2. StrokeThickness="3"
  3. Data="M 100,200 C 100,25 400,350 400,175 H 280" /

L'image suivante montre le Path, affiché dans un Windows Phone.

Displays a Path

Le thread graphique

Une des différences entre Silverlight pour Windows Phone et Silverlight pour navigateur Web est que les graphiques du téléphone (et quelques animations) s'exécutent dans un thread différent. Pour la plupart des scénarii, vous n'aurez pas besoin de vous en soucier car le système le fait pour vous. Mais si votre application possède un grand nombre de graphiques, il existe des considérations de design et de performance qu'il vous faudra prendre en compte.

Pour plus d'informations à propos du thread de composition, lisez la MSDN Graphics in Silverlight for Windows Phone.

Pour plus d’informations sur les performances lisez l'article Performance Considerations in Applications for Windows Phone.

Voir aussi

Cliquez ici pour revenir au sommaire de la liste d’articles