Editions ENI Livres | Vidéos | e-Formations
XAML et la disposition graphique
Introduction
Lors de la création d’une interface, il est important de se pencher sur la conception graphique afin d’optimiser au mieux notre code.
Il faut que celui-ci soit le plus lisible possible et éviter au maximum de répéter les mêmes étapes.
Lors de cette étape de réflexion on pensera à gérer l’interface afin que celle-ci s’affiche sur tous types d’écrans et de la même façon si l’on redimensionne ou non la fenêtre, ce que l’on appelle une application responsive.
Le StackPanel
1. Qu’est ce qu’un StackPanel ?
Le StackPanel représente l’une des parties majeures dans la gestion de la disposition graphique, qu’il faut correctement maîtriser.
Il permet de spécifier simplement à quel endroit et comment afficher un Control dans une interface, mais également de grouper plusieurs Controls ensemble.
De ce fait, au lieu d’appliquer le même paramétrage sur chaque Control, il suffit d’appliquer ce paramétrage au StackPanel parent.
Tous les Controls situés dans ce StackPanel se verront donc attribuer le même paramétrage.
Ce paramétrage du StackPanel se fait par l’ajout et la modification d’attributs, que l’on a vus précédemment dans le chapitre XAML, le cœur de notre interface (Margin, Orientation, Visibility, Height, Width, HorizontalAlignment…).
2. Appliquer le même paramétrage
L’un des avantages du StackPanel, est la possibilité d’appliquer un même paramétrage à des Controls enfants de ce StackPanel.
Prenons l’exemple d’un StackPanel divisé en deux parties horizontales.
-
La partie de gauche permet d’afficher un intitulé, par exemple nom d’ordinateur.
-
La partie de droite permet d’afficher la valeur de l’intitulé. Par exemple, si mon ordinateur se nomme "PCDeDamien", nous aurons donc :
|
Bloc intitulé |
Bloc résultat |
|
Nom d’ordinateur |
PCDeDamien |
|
Utilisateur |
Damien |
|
Ville |
Paris |
|
|
damien.vanrobaeys@toto.com |
Au niveau disposition, cela peut se traduire sous la forme suivante :
Un StackPanel principal avec comme Orientation Horizontal et avec à l’intérieur :
-
Un StackPanel Intitule avec comme Orientation Vertical.
-
Un StackPanel Resultat avec comme Orientation Vertical.
Ci-dessous le code XAML pour traduire cela :
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
VerticalAlignment="Center">
<StackPanel Name="Intitule" Orientation="Vertical">
<Label Content="Nom d'ordinateur"/>
<Label Content="Utilisateur"/>
<Label Content="Ville"/>
<Label Content="Mail"/>
</StackPanel>
<StackPanel...Applications responsives avec le Grid
1. Qu’est-ce que le Grid ?
Le Grid est un dispositif graphique permettant de choisir où seront affichés les éléments et comment sera affichée l’interface.
Avec le Grid, vous pouvez par exemple choisir d’afficher votre logo en haut à gauche, votre titre en haut sur le reste de la fenêtre ou d’afficher certains Controls à un endroit bien spécifique.
En redimensionnant votre interface, vos Controls resteront affichés où ils doivent l’être.
2. Le fonctionnement du Grid
a. Compréhension
Dans les exemples présentés précédemment, tout le contenu de notre interface est inséré dans une balise Grid.
Pour comprendre le fonctionnement du Grid, il faut imaginer votre interface comme une grille.
Cette grille est composée de plusieurs cases et lignes.
Le Grid est composé en lignes et colonnes, comme une feuille.
Par défaut, comme dans nos exemples précédents, un Grid est composé d’une ligne et une colonne, donc tout le contenu de notre fenêtre.
Il est possible de créer autant de lignes et de colonnes que l’on souhaite.
L’exemple ci-dessous vous permettra de bien visualiser ce fonctionnement en lignes et colonnes.
Pour afficher les lignes de la grille, il faut ajouter l’attribut ShowGridLines configuré sur True, à notre Grid principal :
<Grid ShowGridLines="True"> b. Les définitions
Pour créer différentes lignes et colonnes, nous allons définir ce que l’on appelle des définitions en utilisant les paramètres ci-dessous :
-
RowDefinitions
-
ColumnDefinitions
Le bloc de définition est le suivant :
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions> Il faut ensuite définir les colonnes et lignes à ajouter.
Pour diviser une interface en trois lignes et quatre colonnes, il faut ajouter :
-
Dans le Grid.RowDefinition, trois lignes RowDefinition.
-
Dans le Grid.ColumnDefinitions, quatre lignes ColumnDefinition.
Le bloc de définition sera alors comme ci-dessous :
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/> ...DockPanel
1. Présentation du DockPanel
Le DockPanel est un Control qui permet d’accrocher ou d’ancrer un contenu dans les quatre positions de la fenêtre applicative (haut, bas, gauche et droite).
Ce Control nous permet de diviser notre fenêtre en zones différentes.
Si lors de l’écriture du code XAML aucune zone n’est spécifiée, le Control sera présent au centre de la fenêtre et remplira donc l’espace disponible.
2. Sa configuration
Pour créer un DockPanel, nous devons créer la balise XAML suivante :
<DockPanel>
---- ajouter vos Controls ----
</DockPanel> Par défaut, les objets présents dans notre Control DockPanel sont ajoutés à gauche, haut, droit, bas pour finir au centre.
Pour éviter cela, il est possible de modifier l’attribut DockPanel.Dock avec les valeurs suivantes :
-
Left
-
Top
-
Right
-
Bottom
Reprenons l’exemple sur le Grid avec le rendu suivant :
Voici le code XAML qui nous permet de positionner nos Controls.
Code de la partie gauche :
<Grid DockPanel.Dock="Left" Background="DodgerBlue" >
<StackPanel HorizontalAlignment="Center"
VerticalAlignment="Center">
<Label Content="Informations" Foreground="White"
FontWeight="Bold" FontSize="20">
<Label.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="90" />
<ScaleTransform ScaleX="-1" ScaleY="-1"/>
</TransformGroup>
</Label.LayoutTransform>
</Label>
</StackPanel>
</Grid> Code de la partie haute :...
Le WrapPanel
1. Présentation du WrapPanel
Le WrapPanel est un Control, permettant de rassembler des Controls XAML entre eux. Ces derniers seront positionnés les uns après les autres, horizontalement (par défaut) ou verticalement.
Si la fenêtre de l’application a une taille fixée horizontalement ou verticalement, les Controls vont s’adapter automatiquement à l’espace disponible.
Quand le WrapPanel utilise une orientation horizontale, tous les contrôles enfants se voient assigner une hauteur identique, basée sur le plus grand. Quand le WrapPanel utilise une orientation verticale, les contrôles enfants ont la même largeur, basée sur l’élément le plus large.
2. Son utilisation
Le code XAML de ce Control est assez simple :
<WrapPanel>
<Button>Button N°1</Button>
<Button>Button N°2</Button>
<Button>Button N°3</Button>
<Button>Button N°4</Button>
<Button>Button N°5</Button>
<Button>Button N°6</Button>
<Button>Button N°7</Button>
<Button>Button N°8</Button>
</WrapPanel>...