19 · PDF fileQuelques instants plus tard, Visual Studio revêt un aspect quelque peu...

19

Programmation WPF

Les applications WPF représentent une alternative complémentaire aux traditionnelles appli-cations 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 WPFLancez 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 413 15/07/10 16:49

© 2010 Pearson Education France – Visual Basic 2010 – Michel Martin

414 Visual Basic 2010

Figure 19.1Vous ê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.2L’environnement de développement est différent de celui utilisé pour les projets WinForm.



Chapitre 19 Programmation WPF 415

L’interface de l’application est définie dans le volet central (Concepteur). Très classique-ment, 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.

Si vous le souhaitez, vous pouvez y insérer des instructions XAML manuel-lement, mais il faut avouer qu’il est bien plus simple de passer par le volet du concepteur.

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 bloc-notes 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 19.3.

Figure 19.3Le 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid>

Info

Attention




<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.4Les 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)




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é :

CatchFinally 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érou-lante 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




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érou-lante 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

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).

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 redi-mensionnés à la volée.

Info

Info




Figure 19.5Une ligne de texte a été mémorisée dans le contrôle TextBox.

Les contrôles WPF par défautCette section fait le tour des contrôles disponibles par défaut dans une application WPF.

Icône Contrôle Fonction

Border Bordure autour d’un contenu.

Button Permet à l’utilisateur d’effectuer une action lorsqu’il clique sur le bouton.

Canvas Définit une zone dans laquelle des éléments enfants peuvent être posi-tionnés à l’aide des coordonnées relatives à la zone du Canvas

CheckBox Case à cocher.

ComboBox Contrôle de sélection assorti d’une liste déroulante qui peut être affi-chée ou masquée d’un clic sur la flèche du contrôle.

ContentControl Conteneur destinée à héberger un type unique de contenu.

DockPanel Définit une zone où les éléments enfants peuvent être réorganisés horizontalement ou verticalement l’un par rapport à l’autre.

DocumentViewer Conteneur pouvant héberger un objet FixedDocument.

Ellipse Trace une ellipse.

Expander Ce contrôle est composé d’un en-tête et d’une fenêtre réductible affichant un contenu.





Frame Contrôle de contenu qui prend en charge la navigation.

Grid Grille flexible qui se compose de lignes et de colonnes.

GridSplitter Répartit l’espace entre les lignes ou les colonnes d’un contrôle Grid.

GroupBox Zone de groupe, utilisée pour rassembler plusieurs contrôles.

Image Affiche une image.

Label Affiche un texte sur un formulaire.

ListBox Liste déroulante.

ListView Ce contrôle regroupe une liste d’éléments.

MediaElement Conteneur audio ou vidéo.

Menu Menu Windows.

PasswordBox Contrôle dédié à la saisie d’un mot de passe.

ProgressBar Indique la progression d’une opération.

RadioButton Bouton radio. Permet à l’utilisateur de choisir un élément dans un ensemble où les différents éléments sont mutuellement exclusifs.

Rectangle Trace un rectangle.

RichTextBox Conteneur de documents riches de type FlowDocument.

ScrollBar Barre défilante vertical ou horizontale.

ScrollViewer Zone dont le contenu peut défiler.

Separator Séparateur de contrôles.

Slider Ce contrôle permet de sélectionner une valeur dans une plage.

StackPanel Permet d’empiler des contrôles enfants, verticalement ou horizonta-lement.





StatusBar Contrôle barre d’état.

TabControl Arrange le contenu visual sous la dorme d’un tableau.

TextBox Zone de texte utilisée pour saisir le texte entré au clavier par l’utilisa-teur.

ToolBar Contrôle barre d’outils.

ToolBarPanel Permet d’organiser les divers éléments inclus dans un contrôle ToolBar.

ToolBarTray Gère la disposition des éléments contenus dans un contrôle ToolBar.

Treeview Ce contrôle affiche une arborescence dans laquelle les divers éléments peuvent être pliés et dépliés.

ViewBox Décorateur de contenu utilisé pour ajuster un contrôle enfant afin d’occuper l’espace disponible.

WindowsFormsHost Conteneur de contrôle Windows Forms dans une page WPF.

WrapPanel Ce contrôle positionne séquentiellement, de gauche à droite, des éléments enfants.

Manipuler des éléments multimédiasLe 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, redi-mensionnez et modifiez la propriété Content de ces contrôles pour obtenir quelque chose comme à la Figure 19.6.



19 · PDF fileQuelques instants plus tard, Visual Studio revêt un aspect quelque peu...

Documents

Transcript of 19 · PDF fileQuelques instants plus tard, Visual Studio revêt un aspect quelque peu...