1-Mise en place

Mots clés Technorati : projet ensisa thiry Imededdine talbi kawtar zahi wpf xaml c# programmation ecole nationale supérieure d’ingénieurs sud alsace mulhouse Layout StackPanel WrapPanel DockPanel Grid

Présentation de l’espace de travail

D’abord on va présenter l’EDI et les différentes fenêtres. On va utilise pour coder Microsoft Visual C# 2008 Express Edition, cette version est gratuite pour les étudiants vous la télécharger ici . Après l’installation et le lancement de Visual C#, on crée un nouveau Projet d’une Application WPF.( Figure 1)
On trouve alors deux fenêtres principales : une fenêtre qui permet l’ajout et l’édition du code XAML ainsi qu’une autre qui joue le role d’un Designer graphique( Figure 2 ). Il y aussi la boite à outils qui permet de rajouter de nombreux composants et contrôles ce qui fait gagner du temps lors de l’écriture du code XAML.
La deuxième fenêtre est celle qui permet l’édition du code C# ( Figure 3 ).

Premier pas

La création d’un nouveau projet WPF Application ouvre les fenêtres déjà citées : Dans le Designer WPF on trouve une fenêtre simple, ce qui correspond dans l’éditeur XAML à:

<Window x:Class=”WpfApplication1.Window1″
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
Title=”Window1″ Height=”300″ Width=”300″>
<Grid>
</Grid>
</Window>

C’est un code simple dans lequel on déclare notre fenêtre et on précise ses dimensions. Le tag Window définit les deux namespaces minimaux que sont :

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” : namespace concernant l’ensemble des contrôles de bases
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” : namespace concernant les propriétés et extensions utilisées par le parser XAML.

Le code équivalent en C# est le suivant :

namespace WpfApplication1
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
}
}

Mise en page

WPF possède un ensemble de panneaux ( panels ) de mise en page, ils permettent de manipuler tous les éléments composants les interfaces d’utilisateurs. Chaque panel est simple d’utilisation mais leur combinaison crée un systme de mise trés puissant.

Les principeaux panneaux sont :

• StackPanel
• WrapPanel
• DockPanel
• Grid
• UniformGrid
• Canvas

StackPanel :

C’est un simple panneau qui range les éléments d’une interface dans une rangée ou une colonne. StackPanel ne permet pas de ménager toute une interface mais elle très utile pour les petites opérations. Prenons l’exemple suivant :

<StackPanel Background=”Gray”>
<TextBlock Margin=”4″> Ville</TextBlock>
<ComboBox Margin=”4″/>
<TextBlock Margin=”4″>Etablissement</TextBlock>
<ComboBox Margin=”4″/>
<TextBlock Margin=”4″>Filière</TextBlock>
<ComboBox Margin=”4″/>
<Button Margin=”10″>Valider</Button>
<CheckBox Margin=”4″>Inscription</CheckBox>
<CheckBox Margin=”4″>Réinscription</CheckBox>
<CheckBox Margin=”4″>Réorientation</CheckBox>
</StackPanel>

Les éléments crée sont : 3 blocs textuels, 3 menus déroulant, et 2 boites à cocher. On remarque que ces éléments ont été disposé verticalement l’un aprés l’autre. La propriété Margin sert à définir l’espace qui est entre les éléments. Si on veut aligner ces éléments horizontalement, il faut rajouter :

<StackPanel Orientation=”Horizontal”>

Les éléments seront alors disposés horizontalement mais ceci nous révéle un inconvénient des StackPanel : quand il n’y a plus d’espace, les éléments sont disposés hors de l’espace dédiés.

WrapPanel :
Ce panneau fonctionne la même manière que le StackPanel mais il régle inconvénient mentionné pour ce dernier, c’est à dire, quand un élément dépasse l’espace alloué il est replacé directement à la ligne ou colonne suivante selon l’orientation du panneau. L’exemple suivant met en évidence ce qu’on vient de dire avec plusieurs boutons disposées horizontalement:

<WrapPanel Background=”FloralWhite”>
<Button Height=”29″ Width=”116″>un</Button>
<Button >deux</Button>
<Button Height=”29″ Width=”72″>trois</Button>
<Button Height=”29″ Width=”72″>quatre</Button>
<Button Height=”29″ Width=”72″>cinq</Button>
<Button Height=”29″ Width=”72″>six</Button>
</WrapPanel>

DockPanel :

DockPanel permet de remplir tout l’espace qu’on a le plus facilement possible, en effet, chaque élément est vers un coté de l’espace et s’il y en a plusieurs du meme coté ils seront rangés par ordre.

<DockPanel>
<Button DockPanel.Dock=”Left”>Gauche</Button>
<Button DockPanel.Dock=”Right”>Droite</Button>
<Button DockPanel.Dock=”Bottom”>Bas</Button>
<Button DockPanel.Dock=”Top”>Haut</Button>
<Button>Centre</Button>
</DockPanel>

Cet exemple montre comment les boutons sont disposés, les boutons droite et gauche ont pris toute la longueur des cotés parce qu’ils ont été déclarés en premier.

Grid :

Pour expliquer ce panneau, on va commencer à partir de cet exemple :

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>

Comme on le voit, Grid divise la fenêtre comme un échiquier, en ligne ( Row ) et en colonne( column ) à l’aide de ce qui forme des cases. Biensur cela n’apparait pas quand on compile le code. Par la suite, on place tous les éléments comme on le souhaite, dans notre cas, on va placer 5 boutons :
<Button Grid.Column=”0″ Grid.Row=”0″ Grid.ColumnSpan=”2″>A</Button>
<Button Grid.Column=”2″ Grid.Row=”0″ Grid.RowSpan=”2″>D</Button>
<Button Grid.Column=”0″ Grid.Row=”1″ Grid.RowSpan=”2″>B</Button>
<Button Grid.Column=”1″ Grid.Row=”1″ Grid.ColumnSpan=”1″>E</Button>
<Button Grid.Column=”1″ Grid.Row=”2″ Grid.ColumnSpan=”2″>C</Button>
</Grid>

La placement est donc simple ils suffit de préciser la ligne et la colonne à l’aide de Grid.Row et Grid.Column et le nombre de cases à remplir avec Grid.ColumnSpan et Grid.RowSpan.

On peut aussi définir la longueur et la largeur des rangées et des colonnes :

<ColumnDefinition Width=”50″/> ou <RowDefinition Height =”Auto”/>

UniformGrid :

UniformGrid est une Grid simplifiée, toutes ses cellules ont la même taille, cela nous épargne de préciser les informations concernant les rangées et les colonnes. On n’a même pas besoin d’utiliser le mot default car elle crée automatiquement les rangées et les colonnes. Le nombre de colonnes est égal au nombre de rangée et chaque cellule ne peut contenir qu’un seul  élément donc on n’a pas à définir quelle cellule contient quel élément. Son utilisation est donc simple et s’effectue de la façon suivante :

<UniformGrid  TextBlock.TextAlignment=”Center”>
        <Button Background=”SlateGray”>OK</Button>
        <Button Background=”LightGray”>Annuler</Button>
        <Button Background=”Gray”>Ignorer</Button>
        <Button Background=”Black” Foreground=”White”>Retour</Button>
</UniformGrid>

Canvas :

Si on veut malgré tout prendre un contrôle complet du positionnement des éléments, on doit  utiliser le Canvas. C’est le plus simple de tous les Layout, il permet de définir précisément le positionnement de chaque élément par rapport aux cotés du Canvas. Si on oublie de donner les coordonnées de la position d’un élément, il sera placé en haut à gauche. Voici un exemple simple d’un Canvas :

 

<Canvas Background=”AliceBlue”>
        <RadioButton Canvas.Left=”50″ Canvas.Top=”10″>Coucou</RadioButton>
        <RadioButton Canvas.Right=”50″ Canvas.Bottom=”10″>Hallo</RadioButton>
        <Ellipse Canvas.Left=”110″ Canvas.Top=”100″ Width=”40″ Height=”60″    Fill=”Aqua”></Ellipse>
</Canvas>