- Commençons par exécuter Visual Studio 2008 (menu Démarrer/Programmes/Microsoft Visual Studio 2008).

- Cliquez ensuite sur Fichier/Nouveau/Projet et sélectionnez le projet de type Application WPF. Si vous ne le voyez pas, assurez-vous que la version du framework .NET ciblé est bien supérieure à 2.0. En effet, Windows Presentation Foundation n’est disponible qu’à partir de la version 3.0 du framework.NET. Dans l’exemple, nous ciblerons la version 3.5.

- Commençons par exécuter Visual Studio 2008 (menu Démarrer/Programmes/Microsoft Visual Studio 2008).

- Cliquez ensuite sur Fichier/Nouveau/Projet et sélectionnez le projet de type Application WPF. Si vous ne le voyez pas, assurez-vous que la version du framework .NET ciblé est bien supérieure à 2.0. En effet, Windows Presentation Foundation n’est disponible qu’à partir de la version 3.0 du framework.NET. Dans l’exemple, nous ciblerons la version 3.5.

Il est possible d’afficher l’arborescence des contrôles composant l’interface de l’application en ouvrant la fenêtre « Document Outline » par le menu View/Other Windows/Document Outline.

La conception (manière de positionner les différents éléments) de l’interface en WPF est la première chose à laquelle il est nécessaire de réfléchir. En WPF, pas de limites : nous pouvons concevoir une interface identique à celle de Windows (menus, boutons, champs de saisie) ou alors, une interface qui peut ressembler à une page Web… L’important est de comprendre comment nous souhaitons présenter l’information visuelle à l’utilisateur afin d’organiser en conséquence les éléments visuels.

Pour les développeurs VB6 ou Windows Forms ou autres concepteurs d’interfaces type Windows, les contrôles étaient déplacés à l’édition puis positionner par rapport à des grilles d’ancrage. En WPF, nous utiliserons davantage les contrôles dits « containers » ou conteneurs pour organiser les éléments visuels et construire notre interface. Par défaut, le concepteur WPF crée un tableau (lignes/colonnes) pour répartir les éléments visuels. Vous pouvez visualiser la déclaration de la table ou grille dans le code XAML sous la forme des tags . Nous remarquerons au passage que la syntaxe sous-jacente de déclaration de l’interface, le XAML, est basée sur XML. Si le conteneur par défaut ne vous convient pas, vous pouvez tout à fait supprime la grille et déclarer un conteneur d’un autre type.

Pour notre application de paramétrage des couleurs, nous allons vouloir offrir à l’utilisateur la possibilité de modifier les valeurs RGB des couleurs, de visualiser son paramétrage, mais aussi de modifier l’opacité. Ces 5 fonctions visuelles seront réparties 4 colonnes et 2 lignes de la manière suivante :

Dans le concepteur WPF, déplacez le curseur de la souris sur la bande épaisse supérieur de la grille. Une ligne verticale symbolisant la séparation de deux colonnes devrait apparaître. Cliquez pour créer les colonnes.

Refaites la même opération pour les autres colonnes puis pour les lignes à l’aide du trait épais sur la partie gauche.

Vous pouvez régler chaque colonne/ligne du tableau afin de donner un espacement identique en utilisant la souris et en cliquant/déplaçant sur une ligne de bord de colonne/ligne.

Il est aussi possible de modifier les propriétés des éléments par la fenêtre de propriétés de Visual Studio. Vous remarquerez le nombre important de propriétés sur les éléments WPF qui vous permettent de créer des interfaces riches.

Vous pouvez aussi modifier directement le code XAML pour changer les propriétés des éléments visuels ou en rajouter. Vous remarquerez dans ce cas la prise en charge de l’IntelliSense par Visual Studio pour vous aidez à écrire le code XAML.

Nous allons maintenant enrichir l’interface avec des contrôles disponibles dans la boîte à outils.

Cliquez et déplacez un contrôle de type « Slider ».

Positionnez le contrôle Slider sur la première colonne du tableau.

Dans la fenêtre des propriétés, modifiez la propriété « Orientation » à « Vertical ».

- Dans le code XAML, modifiez le nom du contrôle. Par exemple « sliderR ».

- Dans le code XAML, supprimez tout le code concernant la propriété « Margin » afin que le contrôle prenne toute la place de la colonne et ligne dans laquelle il est positionné.

- Faites de même avec deux autres sliders. Le code XAML ci-dessous doit ressembler à celui que vous avez écrit dans Visual Studio :

HorizontalAlignment="Center" />

- Ajoutant ensuite un autre slider pour paramétrer l’opacité dans la dernière ligne du tableau. Le code XAML que vous devez obtenir :

Name="sliderOpacity" VerticalAlignment="Center" />

Notez la propriété VerticalAlignment qui permet de paramétrer l’alignement vertical du contrôle dans son contrôle parent à savoir la ligne du tableau qui le contient (ici, la ligne 1 ; les indices des tableaux commencent toujours à 0).

- Enfin, pour finir, ajoutons un rectangle qui nous permettra de visualiser la couleur paramétrée. Ce rectangle se positionne dans la dernière colonne du tableau et prend place sur les 2 lignes. Le code XAML est le suivant :

- Appuyez sur « F5 » pour exécuter l’application ou sélectionner le menu Debug/Start Debugging.

Ajout de code pour gérer l’interface

Comme nous l’avons vu, l’application, pour le moment, ne fait pas grand-chose. Nous allons ajouter un peu de code pour changer la couleur du rectangle en combinant les 3 composantes R,G et B en fonction des valeurs des « sliders » correspondant. Pour cela, nous allons commencer par gérer l’événement lorsque la valeur du « slider » change.

- Dans la partie code XAML, positionnez-vous juste avant le tag fermant de la déclaration du sliderR.

- Tapez sur la barre d’espace : L’intelliSense devrait apparaître. Sélectionnez l’événement « ValueChanged » afin qu’il soit ajouté dans le code XAML.

- Double-cliquez sur l’ajout d’un nouveau gestionnaire d’événement. La déclaration « sliderR_ValueChanged » est ajoutée.

- Cliquez avec le bouton droit de la souris sur la déclaration du gestionnaire d’événement et sélectionnez « Navigate to Event Handler ». Vous voici dans le code C#.

- Nous allons modifier le nom du gestionnaire d’événement car celui-ci va resservir pour les sliders G et B, puis nous ajoutons du code pour modifier la couleur du rectangle d’affichage. Le code C# que vous devriez obtenir est le suivant :

private void sliderColor_ValueChanged(object sender,
RoutedPropertyChangedEventArgs e)
{
Slider slider = sender as Slider;

switch (slider.Name)
{
case "sliderR":
_red = slider.Value;
break;
case "sliderG":
_green = slider.Value;
break;
case "sliderB":
_blue = slider.Value;
break;
default:
break;
}
colorOutput.Fill = new SolidColorBrush(Color.FromRgb(Convert.ToByte(_red),
Convert.ToByte(_green),
Convert.ToByte(_blue)));

}

- N’oubliez pas de modifier le nom du gestionnaire de l’événement dans le code XAML. Vous pouvez alors ajouter la même déclaration dans les deux autres sliders G et B.
ValueChanged="sliderColor_ValueChanged"/> ValueChanged="sliderColor_ValueChanged"/> ValueChanged="sliderColor_ValueChanged"/>

- Et pour finir sur cette partie, il convient de modifier les propriétés des 3 sliders de couleur de la manière suivante :
a. Value="0"
b. Minimum="0"
c. Maximum="255"

La déclaration finale en XAML des 3 sliders est donc la suivante :

ValueChanged="sliderColor_ValueChanged" Value="0" Minimum="0" Maximum="255" /> ValueChanged="sliderColor_ValueChanged" Value="0" Minimum="0" Maximum="255"/> ValueChanged="sliderColor_ValueChanged" Value="0" Minimum="0" Maximum="255"/>

- Exécuter votre application en l’état en appuyant sur la touche « F5 ».

Nous avons vu dans la partie précédente comment, sur le déclenchement d’un événement, nous pouvions modifier l’aspect de l’interface par le code. Mais WPF offre des mécanismes très puissants de liaison entre les données et permet, par exemple, de lier la valeur d’une propriété d’un contrôle à une autre propriété d’un autre contrôle.

L’exemple suivant illustre la liaison de l’opacité aux propriétés du rectangle sans écrire de code C# :

- Revenez dans la partie code XAML du concepteur WPF de Visual Studio et localiser le contrôle rectangle.

- Modifier le code XAML du rectangle de la manière suivante :

La liaison, ou Binding, est une technique que l’on retrouve dans beaucoup d’exemples WPF et qui permettent de construire des expressions dynamiques de manière simple et sans code. Un designer peut tout à fait créer une animation sans requérir de techniques de développement.

- Modifier ensuite le code du contrôle sliderOpacity de la manière suivante :

Name="sliderOpacity" Value="1" Minimum="0" Maximum="1" />

Note : Nous avons modifié les propriétés Value, Minimum et Maximum. Par défaut, nous conservons le pas d’incrément qui est de 0,1 (propriété SmallChange).

- Exécuter à nouveau l’application pour voir le résultat final.

Dans ce tutoriel de découverte de la conception d’interfaces riches WPF avec Visual Studio 2008, nous avons créé une petite application de paramétrage des couleurs. Nous avons manipulé un contrôle container de type Grid. Ce contrôle permet de répartir les éléments de l’interface sous la forme d’un tableau. Ensuite, nous avons positionné les différents éléments visuels sur le tableau et modifié leurs propriétés. Enfin, nous avons ajouté un rectangle pour afficher le rendu de la couleur paramétré avec les différents « sliders » composants l’interface et permettant de jouer sur la composition RGB mais aussi sur l’opacité. Une partie du comportement de l’interface a été codée tandis que nous avons montré la puissance et la simplicité des mécanismes de liaison que nous retrouvons à différents endroits dans WPF. Au travers de cet exemple, nous avons montré la simplicité, la facilité et la rapidité de conception d’une interface riche en WPF avec Visual Studio 2008.

Frédéric QUEUDRET
CTO de la société Mpoware, accélérateur d’innovation. Société française d’édition de logiciels et de prestations de services sur la création d’outils de productivité pour les développeurs Visual Studio.

http://www.mpoware.com