Programmation WPF. Une première application WPF

Transcription

1 19 Programmation WPF Les applications WPF représentent une alternative complémentaire aux traditionnelles applications Windows Forms. Capables d être exécutées sous Windows 7, Vista, Windows Vista SP1 et supérieur, Windows XP SP2 et supérieur et Windows Server 2003 SP1 et supérieur, ces applications utilisent le langage XAML et de nouvelles API graphiques pour manipuler simplement des objets 2D et 3D vectoriels et des éléments multimédias. Ce chapitre laisse entrevoir les immenses possibilités des applications WPF. Si vous êtes un programmeur web, rassurez-vous : la plupart des possibilités offertes par WPF sont communes au tout nouveau langage Silverlight (anciennement WPF/e pour WPF everywhere). Une première application WPF Lancez la commande Nouveau/Projet dans le menu Fichier. Choisissez.NET Framework 4 dans la liste déroulante Framework. Sous Modèles installés, développez Visual Basic, cliquez sur Windows puis sur Application WPF (voir Figure 19.1), puis validez en cliquant sur OK. Livre VisualBasic.indb /07/10 16:49

2 414 Visual Basic 2010 Figure 19.1 Vous êtes sur le point de créer une nouvelle application WPF. Quelques instants plus tard, Visual Studio revêt un aspect quelque peu inhabituel (voir Figure 19.2). Figure 19.2 L environnement de développement est différent de celui utilisé pour les projets WinForm.

3 Chapitre 19 Programmation WPF 415 L interface de l application est définie dans le volet central (Concepteur). Très classiquement, il suffit d y déposer un ou plusieurs contrôles issus de la Boîte à outils de Visual Studio. Au fur et à mesure de l agencement de l interface, le volet Design est modifié en conséquence. Ce volet contient la description de l interface en langage XAML. Info Si vous le souhaitez, vous pouvez y insérer des instructions XAML manuellement, mais il faut avouer qu il est bien plus simple de passer par le volet du concepteur. Attention Le concepteur WPF de Visual Studio Express ne fonctionne que partiellement. Si vous voulez tirer pleinement parti de cette fonctionnalité, vous devrez vous rabattre sur une version commerciale de Visual Studio. Pour vous faire une première idée de la programmation WPF, nous allons créer un blocnotes qui mémorisera tout ce que vous tapez au clavier. Définissez une nouvelle application WPF. Ajoutez un contrôle TextBox et deux contrôles Button au concepteur et modifiez leurs tailles et emplacement pour obtenir un agencement visuel comparable à celui de la Figure Figure 19.3 Le concepteur WPF, après avoir placé et redimensionné les contrôles. À titre d information, voici le code XAML créé a partir du concepteur : <Window x:class="window1" xmlns=" xmlns:x=" Title="Window1" Height="300" Width="300"> <Grid>

4 416 Visual Basic 2010 <TextBox Margin="16,17,14,56" Name="TextBox1" /> <Button Height="31" HorizontalAlignment="Left" Margin="17,0,0,11" Name="Button1" VerticalAlignment="Bottom" Width="87">Effacer</Button> <Button Height="31" HorizontalAlignment="Right" Margin="0,0,15,11" Name="Button2" VerticalAlignment="Bottom" Width="96">Quitter</Button> </Grid> </Window> Cliquez successivement sur les deux boutons et modifiez leur propriété Content pour les renommer en "Effacer" et "Quitter" (voir Figure 19.4). Figure 19.4 Les deux boutons ont été renommés. Vous allez maintenant définir le code de l application. Lancez la commande Code dans le menu Affichage ou appuyez sur la touche de fonction F7. Sélectionnez Window1Evénements dans la liste déroulante Nom de la classe et Loaded dans la liste déroulante Nom de la méthode. La procédure Window1_Loaded est automatiquement créée : Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows. RoutedEventArgs) Handles Me.Loaded End Sub Cette procedure est l équivalent Windows Form de Form1_Load(). Vous allez la compléter avec les lignes de code suivantes : Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows. RoutedEventArgs) Handles Me.Loaded tout = "" Try FileOpen(1, "c:\test\memo.txt", OpenMode.Input) While Not EOF(1)

5 Chapitre 19 Programmation WPF 417 texte = LineInput(1) tout = tout + texte + Chr(13) + Chr(10) End While TextBox1.Text = tout Catch Finally FileClose(1) End Try End Sub Cette procédure lit le contenu du fichier texte c:\test\memo.txt : tout = "" Try FileOpen(1, "c:\test\memo.txt", OpenMode.Input) While Not EOF(1) texte = LineInput(1) tout = tout + texte + Chr(13) + Chr(10) End While Ce contenu est affecté à la propriété Text du contrôle TextBox1 : TextBox1.Text = tout Puis le fichier texte est fermé : Catch Finally FileClose(1) End Try Pour completer cette procedure, définissez les variables String tout et texte en début de listing : Class Window1 Dim tout As String Dim texte As String Vous allez maintenant définir les procédures événementielles associées au clic sur les deux boutons. Sélectionnez Button1 dans la liste déroulante Nom de la classe et Click dans la liste déroulante Nom de la méthode, puis complétez la procédure Button1_Click() comme suit : Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System. Windows.RoutedEventArgs) Handles Button1.Click TextBox1.Text = "" End Sub

6 418 Visual Basic 2010 Cette procédure se contente d effacer le contenu de contrôle TextBox1. Sélectionnez Button2 dans la liste déroulante Nom de la classe et Click dans la liste déroulante Nom de la méthode, puis complétez la procédure Button2_Click() comme suit : Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System. Windows.RoutedEventArgs) Handles Button2.Click Try FileOpen(1, "c:\test\memo.txt", OpenMode.Output) Print(1, TextBox1.Text) Catch Finally FileClose(1) End Try End End Sub Comme vous pouvez le voir, cette procédure sauvegarde le contenu du contrôle textbox dans le fichier texte c:\test\memo.txt : Try FileOpen(1, "c:\test\memo.txt", OpenMode.Output) Print(1, TextBox1.Text) Puis referme le fichier texte : Catch Finally FileClose(1) End Try Info Pour définir la procédure événementielle d un bouton, il est également possible de double-cliquer dessus dans le volet du concepteur. Le gabarit de la procédure est alors automatiquement créé. Le programme est entièrement opérationnel. Appuyez sur la touche de fonction F5 pour l exécuter (voir Figure 19.5). Info Si vous redimensionnez la fenêtre de l application (et c est là un des gros avantages des applications WPF), les contrôles seront automatiquement redimensionnés à la volée.

7 Chapitre 19 Programmation WPF 419 Figure 19.5 Une ligne de texte a été mémorisée dans le contrôle TextBox. Les contrôles WPF par défaut Cette section fait le tour des contrôles disponibles par défaut dans une application WPF. Icône Contrôle Fonction Border Button Canvas CheckBox ComboBox ContentControl DockPanel DocumentViewer Ellipse Expander Bordure autour d un contenu. Permet à l utilisateur d effectuer une action lorsqu il clique sur le bouton. Définit une zone dans laquelle des éléments enfants peuvent être positionnés à l aide des coordonnées relatives à la zone du Canvas Case à cocher. Contrôle de sélection assorti d une liste déroulante qui peut être affichée ou masquée d un clic sur la flèche du contrôle. Conteneur destinée à héberger un type unique de contenu. Définit une zone où les éléments enfants peuvent être réorganisés horizontalement ou verticalement l un par rapport à l autre. Conteneur pouvant héberger un objet FixedDocument. Trace une ellipse. Ce contrôle est composé d un en-tête et d une fenêtre réductible affichant un contenu.

8 420 Visual Basic 2010 Icône Contrôle Fonction Frame Grid GridSplitter GroupBox Image Label ListBox ListView MediaElement Menu PasswordBox ProgressBar RadioButton Rectangle RichTextBox ScrollBar ScrollViewer Separator Slider StackPanel Contrôle de contenu qui prend en charge la navigation. Grille flexible qui se compose de lignes et de colonnes. Répartit l espace entre les lignes ou les colonnes d un contrôle Grid. Zone de groupe, utilisée pour rassembler plusieurs contrôles. Affiche une image. Affiche un texte sur un formulaire. Liste déroulante. Ce contrôle regroupe une liste d éléments. Conteneur audio ou vidéo. Menu Windows. Contrôle dédié à la saisie d un mot de passe. Indique la progression d une opération. Bouton radio. Permet à l utilisateur de choisir un élément dans un ensemble où les différents éléments sont mutuellement exclusifs. Trace un rectangle. Conteneur de documents riches de type FlowDocument. Barre défilante vertical ou horizontale. Zone dont le contenu peut défiler. Séparateur de contrôles. Ce contrôle permet de sélectionner une valeur dans une plage. Permet d empiler des contrôles enfants, verticalement ou horizontalement.

9 Chapitre 19 Programmation WPF 421 Icône Contrôle Fonction StatusBar TabControl TextBox ToolBar ToolBarPanel ToolBarTray Treeview ViewBox WindowsFormsHost WrapPanel Contrôle barre d état. Arrange le contenu visual sous la dorme d un tableau. Zone de texte utilisée pour saisir le texte entré au clavier par l utilisateur. Contrôle barre d outils. Permet d organiser les divers éléments inclus dans un contrôle ToolBar. Gère la disposition des éléments contenus dans un contrôle ToolBar. Ce contrôle affiche une arborescence dans laquelle les divers éléments peuvent être pliés et dépliés. Décorateur de contenu utilisé pour ajuster un contrôle enfant afin d occuper l espace disponible. Conteneur de contrôle Windows Forms dans une page WPF. Ce contrôle positionne séquentiellement, de gauche à droite, des éléments enfants. Manipuler des éléments multimédias Le contrôle MediaElement permet de manipuler des éléments multimédias vidéo (au format avi, jpg, mpg ou.wmv) et audio (au format mid ou wma). Ces éléments peuvent se trouver sur l ordinateur, sur un des ordinateurs d un réseau local ou sur Internet. Dans cette mini-application, nous allons utiliser un contrôle MediaElement pour jouer : un diaporama web au format wmv ; un fichier local au format mid. Créez une nouvelle application WPF, insérez un contrôle MediaElement, deux contrôles RadioButton et deux contrôles Button sur la feuille de l application. Positionnez, redimensionnez et modifiez la propriété Content de ces contrôles pour obtenir quelque chose comme à la Figure 19.6.