Premiers pas avec WPF dotNet

Par /

WPF est un framework pour développer des application Windows en client lourd. Donc si vous venez du monde du web, ça va vous changer, en effet ici, il n’est plus question de faire une application web, on est dans le traditionnel desktop. Même si le web a le vent en poupe, il ne faut pas oublier les application lourdes, et puis si vous êtes un programmeur digne du nom, vous serez assez curieux de voir comment on fait des application qui « tournent » sous Windows !

Contenu

WPF c’est quoi?

WPF Windows Presentation Foundation est un framework pour faire des applications graphique. Il contient des objets pour faire des fenêtres, des boutons, des scroll, bref tout ce qui est visuel. En plus de cela il contient les éléments pour associer des données et les afficher dans les éléments visuel, et enfin tout ce qu’il faut pour détecter des actions quand on clique sur certains éléments comme des boutons.

Anatomie d’une application WPF

Lorsqu’on crée un application WPF dans VisualStudio (il n’y a pas d’autres éditeurs en dehors, sauf celui de Jetbrain), on a une série de fichiers créés, dont deux notable, le fichier par défaut MainWindow.xaml et MainWindow.xaml.cs.

MainWindow.xaml est un fichier xml spécifique à WPF qui détaille le visuel et aussi le fonctionnel (pour l’heure on se suffira du visuel) de l’application. Une hiérarchie sous forme d’arbre pour visualiser le déroulé des composants, un peu à la manière du DOM d’un navigateur web.

<Window x:Class="LearnWPF.ItemsControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="ItemsControlPanelSample" Height="150" Width="250">
        <Grid Margin="10">
        </Grid>
</Window>

Puis voici le fichier MainWindow.xaml.cs qui est un fichier de code C#, appelé code behind, c’est le code métier en back office qui va faire fonctionner l’application WPF.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LearnWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class myItemsControl : Window
    {
        public myItemsControl()
        {
            InitializeComponent();
        }
    }
}

Il est important de voir la correspondance entre le fichier xaml et le fichier C#.

Le namespace qui est ici LearnWPF, que l’on peut voir dans le xaml, avec la notation pointée suivi du nom de la classe, LearnWPF.myItemsControl.

Dans le fichier code behind, on retouve ces références :

namespace LearnWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class myItemsControl : Window
    {
        public myItemsControl()
        {
            InitializeComponent();
        }
    }
}

On retrouve le namespace, la classe myItemsControl qui hérite de Window pour bénéficier de propriétés et méhodes, et aussi le constructeur.

Je poursuis l’exemple en enrichissant le fichier XAML afin d’expliquer certaines notions dans WPF.

Les ItemsControls dans WPF

C’est une notion fondamentale, ce sont les listbox, treeview, et les classes filles des ItemsControl sont les status bar, toolbar, menu.

Les ControlsPanel : qui dit panel dit layout

Ce sont les controls qui vont placer les autres éléments dans la fenêtre,autrement dit ils servent à faire le layout de l’application : Stackpanel (souvent utilisés), wrapPanel, Grid,TabPanel, Canvas.

La notation pointée dans le XAML

On peut faire beaucoup de choses dans le fichier XAML et j’ai mis un peu de temps à comprendre la notation pointée dans certains tags. Exemple ci-dessous :

<ItemsControl>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Content="{Binding}" Margin="0,0,5,5" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <system:String>Item #1</system:String>
                <system:String>Item #2</system:String>
                <system:String>Item #3</system:String>
                <system:String>Item #4</system:String>
                <system:String>Item #5</system:String>
            </ItemsControl>

Notez la notation pointée ItemsControl.ItemsPanel,  il faut faire le parallèle avec une classe, ici ItemsPanel est une propriété de la classe ItemsControl, et c’est comme ça qu’on sette une propriété en XAML !

Pour vous en convaincre, allons faire un tour dans la classe myItemsControl et faire travailler l’auto-complétion de code :

WPF itemspanel

Au passage servez vous de l’auto-complétion pour en apprendre plus sur les membre d’une classe c’est très intéressant !

Donc pour setter une propriété en XAML, on y met du XML logique même si ce n’est pas évident (on aurait pu penser à des attributs).

<ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
                <StackPanel /> 
        </ItemsPanelTemplate> 
 </ItemsControl.ItemsPanel>

Dans le XAML ci-dessus, on définit le template de ItemsControl avec un Stackpanel.

Retour en haut