Dans le post précédent nous avons vu plusieurs types de contrôle. Aujourd'hui je vous propose de faire le tour de quelques uns des contrôles que contient Silverlight 2. Ces contrôles seront accompagnés d'une simple description, puis schématisés par du code Xaml / C# et le rendu visuel correspondant. 

Le Canvas:

Le Canvas est un élément container qui permet de positionner des contrôles de manière absolue à l'aide de coordonnées en X,Y. Pour cela, il faut utiliser les AttachedProperties Canvas.Top et Canvas.Left sur le contrôle enfant. Une autre propriété intéressante est Canvas.ZIndex qui comme son nom l'indique permet de placer l'élément selon l'axe des Z, c'est à dire au premier plan  ou au contraire en arrière plan. Plus le ZIndex est grand et plus l'élément sera au premier plan.

Le Grid:

Le Grid qui est également un container permet d'organiser  les contrôles dans des lignes et colonnes , comme on ferait avec un tableau. Pour l'utiliser il faut déclarer autant de lignes et de colonnes que nécessaire. Si on a deux lignes et une seule colonne on peut omettre la définition de la colonne. Idem dans le cas où on aurait une ligne et deux colonnes, la définition de la ligne n'est pas obligatoire.

Pour donner la largeur ou hauteur qu'elles sont autorisées à utiliser, il existe plusieurs notations:

• * => largeur / hauteur en fonction de la place restante. Si vous avez un grid avec une hauteur de 40 et que les deux premières lignes ont une hauteur de 10. La dernière prendra automatiquement 20.
• 2* => largeur / hauteur proportionnelle.
• auto => largeur / hauteur en fonction de la taille des contrôles
• 150 => largeur / hauteur fixe

Pour indiquer quel contrôle va dans quelle ligne / colonne on spécifie au niveau du contrôle à positionner les AttachedProperties Grid.Row et Grid.Column. Attention la première ligne / colonne commence à l'index 0. Il existe également les propriétés Grid.ColumnSpan et Grid.RowSpan utilisées pour  merger de 1 à n lignes / 1 à n colonnes.

A noter également que par défaut un contrôle prendra toute la place qui lui est offerte. Pour empêcher ce comportement, il suffit d'indiquer une largeur et une hauteur à notre contrôle.

Enfin dernier point, le grid à une propriété nommée ShowGridLines qui permet d'afficher le contour des lignes et colonnes ce qui facilite la visualisation lors du développement.

Le StackPanel:

Comme pour le Grid et le Canvas, le Stackpanel est un container, dans lequel on peut ajouter des contrôles UIElement. Par défaut, tout contrôle présent se positionnera verticalement. Pour les afficher horizontalement, rien de bien compliqué, il suffit de modifier la propriété Orientation et de la mettre en Horizontal.

Le ToggleButton:

Le ToggleButton est un ContentControl permettant de gérer jusqu'à trois états si la proprité IsThreeState est mise à true.

• Checked
• Unchecked
• Indeterminate

Si l'état du contrôle est Indeterminate la propriété IsChecked renvoie null

Le toggle est la classe de base pour plusieurs contrôles dont la checkbox et le radiobutton

Le Border:

Comme son nom l'indique, l'élément border permet de créer une bordure. On peut également lui indiquer un background soit en passant à  la propriété Background le nom d'une couleur, soit en passant un objet comme un ImageBrush. Ce contrôle ne peut contenir qu'un seul élément enfant. Pour mettre un border autour d'un ensemble de contrôles, on peut utiliser par exemple un Stackpanel et mettre tous les autres contrôles dedans.

Le Slider:

Le slider est un composant permettant de sélectionner une valeur dans une plage de valeurs. Il est possible de définir une valeur minimum et maximum. Pour choisir une valeur on peut le faire à l'aide de la souris ou bien à l'aide du clavier avec les boutons page suivante / page précédente. Pour l'utilisation au clavier il est recommandé de configurer les propriétés LargeChange et SmallChange qui indique de combien d'éléments on avance ou on recule dans la plage.

Par défaut le slider est horizontal. Comme pour le StackPanel il a la propriété Orientation qui nous autorise à modifier son orientation horizontale en verticale selon les besoins.  On peut également changer la propriété IsDirectionReversed pour créer par exemple un slider décroissant.

Les formes géométriques:

Il existe différentes formes géométriques qui peuvent être utilisées pour faire des interfaces, des animations plus ou moins complexes. Voici plusieurs exemples en Xaml.

Le rectangle

L'ellipse

Le path

Le path permet la création de lignes et de courbes pour réaliser des formes pleines comme des triangles ou totalement aléatoires. La complexité de ce type de forme fait que le designer la créera le plus souvent avec un outil adéquate comme Blend. Le résultat est stocké dans la propriété Data. Data peut également être déterminé par un enfant unique comme EllipseGeometry, LineGeometry ou encore PathGeometry.

Exemple de données dans Data:

• L: LineSegment
• C: PolyBesierSegment Curve
• A: ArcSegment

Voilà pour notre tour sur quelques contrôles, il en existe plein d’autres, dont voici une liste non exhaustive, mais je laisse votre curiosité pour aller les étudier, après tout c’est le meilleur moyen d’apprendre !!

• Calendar
• Checkbox
• ComboBox
• Image
• Button
• TextBlock
• TextBox
• RadioButton
• PasswordBox
• DataGrid
• TabControl
• MultiScaleImage
• MediaElement
• ScrollViewver.

Je vous conseille également de visiter le site Silverlight ToolKit