Boite de dialogue en WPF avec MessageBox

Ah les boites de dialogue ! Elles sont incontournables en informatique, elles permettent à l’application de … dialoguez avec l’utilisateur. Ce peut être un simple message avec un seul bouton pour fermer le fenêtre, ou une demande de confirmation avec deux boutons Ok ou Annuler, mais ça peut être plus élaboré.

Une premier exemple de MessageBox simple

On va supposer que la boite de dialogue apparait suite à un clic droit de la souris sur une cellule, donc on va mettre le code suivant dans une méthode :

private void TextBlock_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
    MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?", "Ask for delete", MessageBoxButton.YesNoCancel, MessageBoxImage.Question, MessageBoxResult.No);
    switch (result)
    {
        case MessageBoxResult.Yes:
        statusText.Text = "Suppression acceptée !";
            break;

        case MessageBoxResult.No:
            statusText.Text = "Suppression refusée !";
            break;

        case MessageBoxResult.Cancel:
            statusText.Text = "Suppression annulée!";
            break;
    }
}

Nous avons la boite de dialogue suivante assez complète :

En effet, la méthode MessageBox.Show (qui est une méthode static) prend dans l’exemple 5 arguments. Le minimum est de un argument. Voici par ordre de décroissance les possibilité de personnalisation de la MessageBox

     
MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?", "Ask for delete", MessageBoxButton.YesNoCancel, MessageBoxImage.Question, MessageBoxResult.No);

MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?", "Ask for delete", MessageBoxButton.YesNoCancel, MessageBoxImage.Question);

MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?", "Ask for delete", MessageBoxButton.YesNoCancel);
         
MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?", "Ask for delete");

MessageBoxResult result = MessageBox.Show("Voulez vous effacer cet enregistrement?");

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 !

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 :

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.

Les popups (à ne pas confondre avec les Dialog Box) sont utiles pour confirmer qu’une action s’est déroulée bien ou non. Vous avez juste à cliquer pour que la popup se ferme.

Commençons par construire une application WPF de façon classique.

<Window x:Class="WpfApplication3.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:WpfApplication3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
<Popup Margin="10,10,0,13" Name="Popup1" HorizontalAlignment="Left"   
 VerticalAlignment="Top" Width="194" Height="200" IsOpen="True">  
       <TextBlock Name="MonTextBlock"   
             Background="LightBlue" >  
        texte de popup   
       </TextBlock>  
</Popup>

    </Grid>
</Window>

La valeur de l’attribut IsOpen à True veut dire qu’il est visible. Ce que l’on veut faire par exemple c’est de rendre la popup visible avec un bouton et de mettre un bouton dans le popup pour fermer le popup, donc on va jouer sur la propriété IsOpen. Quand on lance l’application ça donne ça:

Vous aurez remarqué que j’ai mis les attributs HorizontalOffset et VerticalOffset, donnés en valeur relatives, sinon la popup est en bas à gauche de la fenêtre de l’application.

Je vous invite à jouer sur les différents attribut. Mais celui qui nous intéresse le plus est l’attribut IsOpen. En effet je m’en sers pour des confirmation d’insertion de données dans une table, j’ai besoin d’être informé quand l’insertion s’est fait avec succès. Quitte à cliquer un bouton supplémentaire pour fermer la popup.

Utiliser le code behind pour ouvrir/fermer la popup

//le nom de la popup est popup1
// pour ouvrir le popup
popup1.IsOpen = True;

//pour fermer le popup
popup1.Isopen = False;

A ne pas confondre avec la propriété popup1.IsVisible qui est en fait un simple getter.

Vou saimeriez aussi savoir comment faire une boite de dialogue

WPF pour créer des applications Windows Desktop

WPF en gros pour faire court c’est une application desktop avec des fenêtres. WPF est le successeur de Winform, personnellement je ne connais pas du tout Winform, disons que c’est la génération avant WPF. On va faire avec WPF, c’est une façon de programmer MVVM (Model-View-ViewModel). En gros ça veut dire qu’il y a une liaison entre le visuel et le modèle de données (les données elles-même appelé ViewModel), si vous modifiez une valeur sur l’interface graphique, cela va se répercuter dans la variable. Cette dernière variable peut être modifiée programmatiquement.

La programmation MVVM existe aussi sur le web, j’en ai pas mal fait avec AngularJS. L’avantage est une simplification de la mise à jour des données entre l’interface et la base de données.

Création d’une application WPF dans VisualStudio

Pour tout projet C#, vous êtes obligé de passer par VisualStudio, je ne pense pas qu’il y ait d’autres alternatives, c’est tant mieux ainsi, on va se concentrer mieux.

Concevoir une fenêtre en WPF

La différence avec une application est la présence d’une interface graphique, qui dit interface graphique de nos jour dit langage xml, dans le cas de WP, Microsoft a pondu une version de xml qui s’appelle le XAML.

A partir de là vous avez le choix de concevoir votre interface de manière graphique avec la souris, ou d’écrire directement en XAML, pour avoir un controle plus fin, mais les deux sont équivalent. Vous devez jongler entre les deux pour voir de quoi il retourne. A terme le design graphique vous permettra d’aller plus vite, mais la programmation en XAML va vous permettre de caler les éléments au pixel près.

Avec VisualStudio, les deux fenêtres graphique et textuelle se mettent à jour automatiquement dès qu’on modifie un élément d’une des deux fenêtres. Donc si vous êtes débutant, c’est un bon moyen d’apprendre.

Comment faire vivre l’interface graphique?

C’est bien beau de faire une belle interface graphique, quoique vous aurez des surprises car avec le glisser déplacer ce n’est pas si évident, en plus il y a énormément de composants, mais comment allons nous attacher du code à un bouton par exemple?

Il y a deux fichiers, MainWindow.xaml et MainWindow.xaml.cs, celui qui a l’extension cs correspond au code C#, donc vous y écrirez toutes les fonctions, on appelle le code derrière un bouton un code-behind tout simplement. Regardez comment le XAML et le code C# sont liés.

A chaque élément est attaché une fonction, par exemple, pour un bouton :

<Button x:Name="button1" Content="Meteo Toulouse" HorizontalAlignment="Center" Margin="10,10,10,0" VerticalAlignment="Top" Width="75" Click="GetMeteoToulouse_Click" />

On a un attribut Click dont la valeur est égale à GetMeteoToulouse_Click. et dans le code-behind, dans le fichier MainWindow.xaml.cs est automatiquement inséré un code du type :

  private void GetMeteoToulouse_Click(object sender, RoutedEventArgs e)
 { 
   //.......
   // code c# ici
 }

Cette fonction prend en argument deux paramètres. En WPF, il y a la notion très importante d’événement (RoutedEvent, mais en fait c’est un event), un click sur un bouton est un événement, une mise à jour d’une valeur est un événement, il faut donc bien comprendre comment les événements sont gérés.

Si le bouton est cliqué, c’est la méthode ci-dessus qui va s’exécuter.

Pour faire simple voici le code du XAML:

<Window x:Class="WpfApplication3.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:WpfApplication3"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <WrapPanel x:Name="wrapPanel1" Height="100" Width="100"/>
        <Label x:Name="label" 
               HorizontalAlignment="Stretch" 
               Margin="10,202,37,10" 
               FontSize="20"
               Padding="5"
               Loaded="label_Loaded" 
               VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Height="107">
        </Label>

        <ScrollViewer HorizontalAlignment="Left" Height="195" Margin="10,80,0,0" VerticalAlignment="Top" Width="497">
            <StackPanel Grid.Row="0" Height="110" Orientation="Horizontal" RenderTransformOrigin="0.5,0.5">
                <StackPanel.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform Y="-30"/>
                    </TransformGroup>
                </StackPanel.RenderTransform>
                <Button x:Name="button" ToolTip="Un café?" Content="Shrink Label Text" HorizontalAlignment="Center" Margin="10,10,0,60" VerticalAlignment="Top" Width="100" Click="button_Click_1"/>
                <Button x:Name="button1" Content="Meteo Toulouse" HorizontalAlignment="Center" Margin="10,10,10,0" VerticalAlignment="Top" Width="75" Click="GetMeteoToulouse_Click" />
            </StackPanel>
        </ScrollViewer>

    </Grid>
</Window>

et le code behind :

using System;
using System.Windows;
using System.Windows.Controls;
using System.IO;
using System.Windows.Media.Imaging;

namespace WpfApplication3
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        public MainWindow()
        {
            InitializeComponent();
        }

        private void label_Loaded(object sender, RoutedEventArgs e)
        {
            var label = sender as Label;

        }


        /// <summary>
        /// demande le temps qu'il fait pour Toulouse
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void GetMeteoToulouse_Click(object sender, RoutedEventArgs e)
        {
            //get weather !
            var url = "http://api.openweathermap.org/data/2.5/weather?q=Toulouse&APPID=ici-la-cle-api";
            var webrequest = (System.Net.HttpWebRequest)System.Net.WebRequest.Create(url);

            using (var response = webrequest.GetResponse())
            using (var reader = new StreamReader(response.GetResponseStream()))
            {
                var result = reader.ReadToEnd();

                var jObject = Newtonsoft.Json.Linq.JObject.Parse(result);
                this.label.Content = ((string)jObject["weather"][0]["main"]);
                //Console.WriteLine((string)jObject["weather"][0]["icon"]);
                //Console.WriteLine(Convert.ToString(Math.Round((float)jObject["main"]["temp"] - 273.15)));

                //on va chercher l'image sur le serveur de l'api
                var image = new Image();
                var fullFilePath = @"http://openweathermap.org/img/w/"+ (string)jObject["weather"][0]["icon"] + ".png";

                BitmapImage bitmap = new BitmapImage();
                bitmap.BeginInit();
                bitmap.UriSource = new Uri(fullFilePath, UriKind.Absolute);
                bitmap.EndInit();

                image.Source = bitmap;
                wrapPanel1.Children.Add(image);

            }
        }

    }
}

Cette application est un peu codé à la rache, mais est fonctionnelle, il y a juste la clé API de OpenWeather qu’il faut créer pour avoir accès aux informations.

J’ai fait beaucoup de regex dans ma vie avec le langage de programmation PHP, mais avec le C# je m’aventure dans de nouvelles contrées, le but est de scraper des pages web en C# (nouveau défi !) et de rester dans l’environnement .NET (SQLServer, IIS, WPF etc). Je suppose que vous avez déjà des connaissances élémentaires avec les expressions régulières.

Expression régulière en C#

Globalement, c’est la même chose qu’en PHP, mais il y a des subtilités syntaxiques. L’objet de  ce post est plutôt montrer comment écrire une application console pour tester rapidement un script qui va parser des chaine avec du regex. On ne verra sans doute pas de différence vu que ce que je présente est assez élémentaire.

Utiliser IsMatch pour matcher une séquence

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Text.RegularExpressions;
namespace scraper
{
    class Program
    {
        // http://lgmorand.developpez.com/dotnet/regex/
        static void Main(string[] args)
        {
            // TODO : match, replace, capture
            
            String chaine = "numéro de téléphone est  06 55 32 22";
            String telephone = "06 88 95 31 22";



            Regex matchPhone = new Regex(@"^[\d]+$");

            
            var test = matchPhone.IsMatch(telephone);
            

            Console.WriteLine("le resultat du match est " + remplace);
            Console.ReadLine();
        }
    }
}

Si nous faisons F5 pour lancer cette application, nous aurons comme sortie d’écran :

le resultat du match est False

En effet la chaine telephone est composé d’espace. Pour avoir le résultat à True, il faut enlever les espaces dans le numéro de téléphone (à moins de matcher aussi les espaces).

Utiliser Replace pour remplacer une chaine de caractères

using System;
using System.Text.RegularExpressions;
namespace scraper
{
    class Program
    {
        // http://lgmorand.developpez.com/dotnet/regex/
        static void Main(string[] args)
        {
            // TODO : match, replace, capture

            String chaine = "numéro de téléphone est  06 55 32 22";
            String telephone = "06 88 95 31 22";



            Regex myRegex = new Regex("^[a-z]$");
            Regex matchPhone = new Regex(@"téléphone");

            var remplace = matchPhone.Replace(chaine, "mobile");

            Console.WriteLine("le remplacement regex a donné " + remplace);
            Console.ReadLine();
        }
    }
}

En jouant ce code vous aurez à al sortie le texte « téléphoneé remplacé par mobile.

le remplacement regex a donné : numéro de mobile est  06 55 32 22

La variable « remplace » contient la  nouvelle chaine.

Capturer une chaine

Nous allons maintenant faire ce pour quoi le rege est le plus utile : extraire une chaine satisfaisant une condition et la stocker éventuellement dans une variable.

using System;
using System.Text.RegularExpressions;
namespace scraper
{
    class Program
    {
        // http://lgmorand.developpez.com/dotnet/regex/
        static void Main(string[] args)
        {
            // TODO : match, replace, capture
              String input = "numéro de téléphone est  0655322288";

            Regex matchDigit = new Regex(@"[\d]+");

            // match
            Match match = matchDigit.Match(input);
            if (match.Success)
            {
                string s = match.Groups[1].Value;
                Console.WriteLine("le match regex a donné : " + match);

            } else
            {
                Console.WriteLine("Pas de match trouvé");
            }
            Console.ReadLine();
        }
    }
}

Vous avez en sortie :

le match regex a donné : 0655322288

Maintenant on sait capturer avec des parenthèses (un classique) une chaine, on va passer à l’autre volet du scraping, le téléchargement d’une page web, le tout en C# bien sûr !

PLUS : Capturer avec les groupes nommés

Il vous est possible d’attribuer u nom au groupe que vous avez capturé. C’est pratique. Voyons comment on peut réécrire l’expression régulière de tout à l’heure.

fgfg