Revue d’effectif des principaux contrôles

Introduction

Le chapitre précédent a permis de détailler ce que l’on peut nommer les contrôles de disposition. Le présent chapitre va donc s’intéresser à tous les autres contrôles : ceux qui servent à afficher des données, ceux qui servent à l’édition, ceux relatifs à la sélection et ceux relatifs à l’action utilisateur. Un dernier sous-chapitre sera consacré à un retour sur le fenêtrage et notamment au contrôle Window. Certains des contrôles abordés ici ont été utilisés dans les chapitres précédents (le moins possible), le présent chapitre étant destiné à détailler précisément chaque contrôle.

Les contrôles ici présentés sont classés par fonction selon les quatre catégories suivantes : les contrôles d’affichage, les contrôles d’édition, les contrôles de sélection de données et enfin, les contrôles d’action utilisateur.

Contrôles d’affichage

1. TextBlock

Même si tous les contrôles ont évidemment leurs utilités respectives, le TextBlock est l’un des contrôles fondamentaux de WPF. En effet, ce contrôle permet à peu près tous les formatages de texte d’une manière très évoluée. Syntaxiquement, l’affichage d’un TextBlock incluant une chaîne de caractères simple se présente ainsi :


<TextBlock Text="Ceci est un test"/>

La propriété Text étant la propriété par défaut, la ligne suivante est rigoureusement équivalente à la précédente :


<TextBlock>Ceci est un test</TextBlock>

a. TextTrimming

Cette propriété permet de mettre en page le contenu du contrôle. Ainsi TextTrimming permet de tronquer proprement le texte en cas de manque de place en indiquant l’existence de texte complémentaire en affichant trois petits points (...).

TextTrimming peut prendre les valeurs WordEllipsis (on tronque au niveau du dernier mot, CharacterEllipsis (on tronque au niveau du dernier caractère) ou None.

L’exemple suivant propose une variation de chacune des trois valeurs possibles sur la base de l’affichage de la chaîne de caractères : « Lorem ipsum dolor consectetur adipiscing ».


<Window x:Class="CH4_TEXTBLOCK.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ 
presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/ 
markup-compatibility/2006" 
        xmlns:local="clr-namespace:CH4_TEXTBLOCK" 
        mc:Ignorable="d" 
        Title="MainWindow" Height="180" Width="180"> 
    <Grid Margin="10"> 
         
        <Grid.ColumnDefinitions> 
          ...

Contrôles d’édition

Les contrôles d’édition permettent à l’utilisateur final d’ajouter et de modifier des données, contrairement aux deux familles de contrôles vues précédemment (disposition et affichage). Évidemment, le contour de chaque famille de contrôles est ici relativement flou : un contrôle d’édition se mue assez facilement en contrôle d’affichage et cette catégorisation a un sens avant tout éditorial permettant ici un classement clair par sous-chapitre.

Ici seront abordés les contrôles TextBox, PasswordBox et également RichTextBox.

1. TextBox

Le contrôle TextBox est le contrôle de référence dès qu’il s’agit d’éditer de la donnée. Sous bien des aspects, il ressemble à TextBlock. Par défaut, le contrôle ne permet pas de passage à la ligne mais une propriété permet de contrôler cet aspect : AcceptsReturn qui prend comme valeur True ou False.

L’exemple suivant propose ce contrôle avec cette propriété permettant le passage à la ligne :


<Window x:Class="CH4_TEXTBOX.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ 
presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/ 
markup-compatibility/2006" 
        xmlns:local="clr-namespace:CH4_TEXTBOX" 
        mc:Ignorable="d" 
        Title="CH4 - TextBox" Height="220"...

Contrôles de sélection de données

Le contrôle de sélection, c’est-à-dire un contrôle à même de donner à l’utilisateur à choisir parmi une collection de données, prend différentes formes en XAML : évidemment la ComboBox, mais également la CheckBox, le RadioButton, la TreeView, le Slider, les listes de sélection ainsi que les contrôles de sélection de dates.

1. ComboBox

La ComboBox permet la sélection d’une seule valeur dans une liste de données, ceci pour un encombrement minimal. Il est à noter que le contrôle ComboBox dérive du contrôle ItemsControl étudié dans le chapitre sur les contrôles de disposition, ComboBoxItem dérivant, lui, de ItemsControlItem.

Ci-dessous, un rapide exemple dont l’énoncé serait le suivant : insérer dans une fenêtre une ComboBox des jours de la semaine, avec le mercredi comme valeur par défaut (utilisation de la propriété IsSelected). Les deux jours du week-end doivent être signalés par une petite croix (une image) et sont par ailleurs de couleur différente.

Le code XAML est le suivant :


<Window x:Class="CH4_COMBOBOX.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ 
presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/ 
markup-compatibility/2006" 
        xmlns:local="clr-namespace:CH4_COMBOBOX" 
        mc:Ignorable="d" 
        Title="CH4 - ComboBox" Height="350" Width="525"> 
    <StackPanel Margin="10"> 
        <ComboBox Width="150" HorizontalContentAlignment="Left" 
HorizontalAlignment="Center"> 
            <ComboBoxItem>Lundi</ComboBoxItem> 
            <ComboBoxItem>Mardi</ComboBoxItem> 
  ...

Contrôles d’action utilisateur

Le principal contrôle d’action est le bouton (Button) déjà largement utilisé dans des exemples précédents. On peut également citer le menu (Menu) et le menu de contexte (ContextMenu).

L’exemple suivant reprend chacun des trois contrôles. Il comporte en effet :

Un menu classique.
Un bouton ouvrant une boîte de message sur le clic-gauche.
Un menu contextuel sur le clic droit.

De façon semblable à plusieurs contrôles étudiés auparavant, le Menu ou le ContextMenu se basent sur des propriétés MenuItem pour décrire les menus.

Fichier .xaml


<Window x:Class="CH4_ACTION.MainWindow" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/ 
markup-compatibility/2006" 
        xmlns:local="clr-namespace:CH4_ACTION" 
        mc:Ignorable="d" 
        Title="CH4 - actions" Height="150" Width="250"> 
    <StackPanel Orientation="Vertical"> ...

Retour sur le fenêtrage

L’inventaire précédent a permis de parcourir rapidement l’essentiel des contrôles utilisés en XAML. Reste à examiner la fenêtre elle-même (Window) avant de détailler dans le chapitre suivant, un des piliers de MVVM en WPF : le Binding.

Le propos ici va être la présentation de deux types de fenêtres : Window (déjà largement utilisé) et NavigationWindow.

1. Window

À propos de ce contrôle déjà connu, nous allons présenter deux aspects ici :

Des propriétés non encore explorées.
La prise en compte d’une fenêtre et de son lancement depuis l’application WPF elle-même.

a. Propriétés significatives

Voici les principales propriétés du contrôle :

Title : cette propriété, déjà abordée, permet de nommer la fenêtre. Elle s’affiche en haut de la fenêtre dans la barre de titre.
WindowState : cette propriété indique si la fenêtre doit être maximisée en taille, minimisée ou ne pas avoir de transformation de ce type. Les trois valeurs possibles sont Maximized, Minimized et Normal.
ResizeMode : cette propriété permet de définir les modes de redimensionnement de la fenêtre. Les valeurs possibles sont CanMinimize, CanResize, CanResizeWithGrip, NoResize.
ShowInTaskbar : la fenêtre courante doit-elle...