Cours VB.NET

Date de mise à jour : 05/12/2010

XI-A. Définition : WPF, XAML, SilverLight
XI-B. Créer une interface WPF avec Expression Blend
XI-B-1. Ouvrir Expression Blend
XI-B-2. Écrire du code VB
XI-B-3. Passer l'interface dans VB
XI-C. Créer une interface WPF avec Visual Studio
XI-D. Le XAML
XI-D-1. Définition du XAML
XI-D-2. Balisage
XI-D-3. Case, espace, tabulation
XI-D-4. Attribut, Propriété
XI-D-5. Élément racine
XI-D-6. Code 'Behind', évènements
XI-D-7. Extension de balisage
XI-D-8. Espace de noms
XI-D-9. Remarque importante

XI-A. Définition : WPF, XAML, SilverLight

Les WPF sont un nouveau systeme d'affichage.

A partir du Framework 3.0 et dans le Framework 3.5 (VB 2008), dans Visual Basic, on peut utiliser deux manières de dessiner l'interface utilisateur:

- Avec les Windows Forms qui utilisent GDI+ et travaillent sur des Bitmaps.

- Avec WPF qui utilise un moteur de rendu vectoriel et des accélérations matériels (Direct X) pour afficher. Cela permet d'afficher de la 2D, de la 3D, des animations, des documents, des dessins vectoriels ou BitMap, de l'audio, de la vidéo; de plus l'affichage étant vectoriel, il n'y a pas de dépendance avec les dimensions de l'écran.

Que signifie WPF?

Windows Presentation Foundation (ex 'avalon').

Les WPF fonctionnent dans l'édition VB Express 2008, il y a même un designer WPF orienté développeur permettant de créer une interface WPF 'simple'. On peut charger VB Express 2008 et le Framework 3.5 en français (usage gratuit) pour utiliser les WPF.

Il existe aussi un logiciel autonome nommé 'Expression Blend' qui permet de dessiner l'interface en WPF, ce logiciel payant est orienté graphiste et permet de créer des interfaces complexes qui pourront ensuite être utilisées en VB.net , en C#...

Que signifie XAML?

XAML= "eXtensible Application Markup Language", en français: "langage à balise d'applications extensibles" est un langage utilisant la syntaxe XML et permettant de définir des interfaces d'applications. En d'autres termes, quand vous dessinez une interface utilisateur en WPF, elle est enregistrée en XAML.

Rapport avec SILVERLIGHT?

Silverlight est en fait un sous-ensemble de WPF allégé pour être portable et utilisé par les navigateurs Web. C'est une alternative à Flash, un plugin léger, de moins de 2 mégas en version 1.0, qui s'installe sur le poste utilisateur et complète le navigateur (IE, Firefox) avec une interface graphique ayant une partie des capacités graphiques de WPF permettant des applications Internet riches, réalisant des interfaces intégrant des animations, des vidéos. - Se programme en JavaScript. Utilise XAML pour décrire l'interface graphique, - Graphisme 2D vectoriel avec changement de taille des objets. - Fonctionne avec Ajax, donc JavaScript, DOMet XMLHttpRequest. Silverlight fonctionne aussi en mode local sous environnement .NET. Sur le Web, les composantes sont accessibles par le biais de Active X sous Internet Explorer tandis que Firefox et les autres navigateurs utilisent le système de plugin de Mozilla.

Ou trouvez de la documentation?

Msdn WPF: la bible

(http://msdn.microsoft.com/fr-fr/library/ms754130.aspx)

XI-B. Créer une interface WPF avec Expression Blend

Expression Blend est un logiciel autonome permettant de créer des interfaces WPF, il est très puissant et orienté graphiste. Les interfaces pourront ensuite être utilisées dans Visual Studio. On peut aussi créer une interface Wpf dans VB 2008, mais Vb est plutôt orienté développeur. Écrit par Microsoft, Expression Blend, coûte quelques centaines d'euros.

XI-B-1. Ouvrir Expression Blend

Expression Blend est téléchargable gratuitement sur le Web en version démo 30j. Lancer Expression Blend: Faire menu 'Fichier', 'Nouveau Projet'.

Choisir Application standard, dérouler la liste langage pour choisir 'Visual Basic' puis 'Ok'.

On se retrouve dans un nouvel environnement, avec un formulaire nommé 'Window1'

On est en mode 'design', mais si on veut, on peut voir le code XAML correspondant à l'interface en cliquant sur l'onglet vertical à droite.

On peut mettre dans le formulaire Window1 des objets visuels. La barre d'outils à gauche permet de choisir un objet et de le mettre dans le formulaire: cliquer sur l'objet puis sur le formulaire appuyer sur le bouton gauche de la souris, déplacer, lâcher. Si on clique droit sur un des objets dans la barre, on a accès à plusieurs objets différents.

Exemple:Ci dessous, on a mis un bouton et un RichTextBox.

Quand le focus est sur un objet, on a accès aux propriétés de cet objet en cliquant sur l'onglet 'Propriétés' à droite:

On a une quantité phénoménale de propriétés. Pour modifier le texte afficher sur le bouton, on peut faire menu "Objet" puis "Modifier le texte" ou sur le bouton faire click droit puis "Modifier le texte". Le texte sur le bouton passe en mode édition.

XI-B-2. Écrire du code VB

On peut écrire du code VB à partir de Blend. Dans la fenêtre de projet à droite, dérouler Window1.xaml qui correspond au formulaire, puis double-cliquer sur Window1.xaml.vb, VB 2008 s' ouvre et vous avez accès aux procédures évènement, vous pouvez écrire du code VB.

XI-B-3. Passer l'interface dans VB

A partir d'Expression Blend il faut enregistrer le projet:

menu 'Fichier' puis 'Enregistrer'

Puis on peut 'récupérer' l'interface WPF dans VB 2008: ouvrir VB 2008, charger le Projet WPF( on passe automatiquement par le mode d'importation)

La belle interface WPF se charge dans VB 2008. Il suffit de double-cliquer sur le bouton et d'entrer le code dans les procédures évènements.

XI-C. Créer une interface WPF avec Visual Studio

A partir de VB 2008, on peut utiliser les WPF.

Le concepteur WPF de Visual Basic est optimisé pour le développement de logiciel (Expression Blend programme extérieur, est plutôt orienté conception graphique). Voyons comment faire une interface utilisateur avec les WPF dans Visual Basic Express 2008.

Ouvrir VB 2008. Faire menu 'Fichier', 'Nouveau', 'Projet'.

On choisit 'Application WPF',puis on clique sur 'Ok'; on se retrouve dans un nouvel environnement:

Il y a le 'designer' en haut qui permet de dessiner l'interface que verra l'utilisateur. Le designer génère le code XAML, on le voit en bas, il décrit l'interface en XAML. On peut aussi écrire directement du XAML en bas, ce qui modifie l'interface dans le designer. Les formulaires et contrôles sont différents de ceux des Windows Forms, ainsi que les propriétés!!

Le logiciel a crée un formulaire vide nommé 'Window1'. Nous pouvons ajouter un bouton par exemple, pour cela on clique sur le bouton dans les outils à gauche puis sur le formulaire, on appuie (bouton gauche de la souris), on déplace puis on lâche. Le bouton apparaît.

En bas à droite, on a la fenêtre de propriétés du bouton. Les contrôles font partie de l'espace de nom System.Windows.Controls.

Dans la version Express on peut créer une interface simple, mais pour une interface extrêmement élaborée (dégradé de couleur, animation...) il faut mieux utiliser Expression Blend. On peut aussi écrire du code XAML pour faire du graphisme élaboré.

Si on double-clique sur un bouton, par exemple, on se retrouve dans la procédure évènement correspondante:

On se rend compte que les évènements là aussi ne sont pas les mêmes que pour les Windows Forms.

Les propriétés du projet (menu 'Projet', 'Propriétés de..') sont là aussi un peu différentes.

Conclusion: le XAML permet de décrire l'apparence de l'application, tandis que les évènements sont gérés par un langage .NET classique comme le Visual Basic.

XI-D. Le XAML

XI-D-1. Définition du XAML

XAML= "eXtensible Application Markup Language", en français: "langage à balise d'applications extensibles". Il s'agit d'un langage XML permettant de définir des interfaces d'applications des WPF (dans Silverlight, VB 2008). En d'autres termes, quand vous dessinez une interface utilisateur en WPF, elle est enregistrée en XAML.

Le code XAML respecte la syntaxe XML (voir le chapitre sur le format XML dans les annexes.); il est enregistré dans un fichier ayant l'extension .xaml.

XI-D-2. Balisage

XAML est un langage 'balisé'.

Qu'est ce qu'une balise ? 'Élément Sémantique de base' des langages de balisage. En XML une balise est un 'mot clé', un élément, comprise entre crochets qui possède un nom et parfois des attributs. En XAML l'élément est le nom d'un objet visuel (Buttom, TextBlock..)d'une propriété de cet objet visuel (Background,Content..), ou de tout élément intervenant dans lUI (Une Brush, un ListItem..) .

Toutes les balises doivent être ouvertes puis refermées . On retrouvera donc toujours une balise de début
et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom du la balise qui est précédé du signe /.

Exemple:


<Button>
</Button>

On peut combiner balise de début et de fin:


<Button />

Cela suffit à afficher un bouton.

Les balises peuvent être intriquées:


<Grid>
 <Button> 
 </Button>
</Grid>

La dernière balise ouverte doit être la première fermée.

XI-D-3. Case, espace, tabulation

XAML est sensible à la Case: majuscules et minuscules ne sont pas équivalentes. Les espaces et tabulations sont ignorés.

Attention donc quand on tape du code XAML: 'grid' ou 'click' ne sont pas acceptés, il faut taper 'Grid' et 'Click'.

XI-D-4. Attribut, Propriété

Un objet visuel a des propriétés: la couleur de fond, les dimensions d'un bouton, le texte dans un TextBlock sont les propriétés d'un bouton par exemple. Il y a différentes manières d'indiquer les valeurs d'une propriété d'un objet en XAML.

1- Les propriétés des objets visuels peuvent s'écrire sous forme d' attributs. Un attribut est le nom d'une propriété de la balise souvent associé à une valeur, il est mis dans la balise d'ouverture après le nom de la balise:


<Button Background="Blue" Foreground="Red" Content="C'est un bouton"/>

Ici dans un bouton, on a utilisé les attributs Background, Foreground Content, pour indiquer la couleur du fond, du texte et le texte à afficher dans le bouton. A un attribut est attribué une valeur, cette valeur qui est entre guillemets est une simple String. On remarque que la syntaxe est simple mais on ne peut même que des valeurs simples.

2- Les propriétés des objets visuels peuvent aussi s'écrire sous forme d'objet balisé. Dans un format alternative appelée "Property element syntax" (syntaxe d'élément propriété), qui étend la syntaxe de XML. Une propriété a aussi une balise de début et de fin, la syntaxe est celle de l'XML c'est à dire de la forme


<TypeName.Property>

Voyons par exemple la propriété Background d'un bouton:


<Button.Background>
</Button.Background>

L'intérêt de cette syntaxe est qu'entre les 2 balises, on peut mettre d'autres balises ou mettre un élément complexe(comme une Brush par exemple).

Voici l'exemple de notre bouton:


<Button>
<Button.Background>
<SolidColorBrush Color="Blue"/>
</Button.Background>
<Button.Foreground>
<SolidColorBrush Color="Red"/>
</Button.Foreground>
<Button.Content>
C'est un bouton
</Button.Content>
</Button>

3- Propriété par défaut.

Pour le texte affiché dans un bouton, on a vu qu'on pouvait l'écrire avec l'attribut content.


<Button Content="Cliquez ici !"/>

et aussi sous forme d'objet.


<Button>
<Button.Content>
C'est un bouton
</Button.Content>
</Button>

Mais comme Content est la propriété par défaut des boutons, on peut l'écrire aussi comme cela:


<Button>Cliquez ici !</Button>

De même la propriété 'Text' d'un TextBlock peut s'écrire ainsi:


<TextBlock>
Hello!
</TextBlock>

On parle ici d'élément de contenu.

Remarque: On a accès dans un objet aux propriétés qui sont héritées de la classe de base: Par exemple dans un bouton , on a accès à la propriété BackGround qui est une propriété héritée de 'control'.

XI-D-5. Élément racine

Il doit y avoir un élément racine (root) et un seul dans un fichier xaml, il contient tous les autres. En VB c'est une fenêtre (Window).


<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
</Window>

La balise Root a des attributs spécifiques:

x:Class="Window1"

Indique la Classe partielle de la fenêtre. Quand le code est compilé c'est la class qui fait le lien avec le code VB.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Indique l'espace de nom par défaut. Puis l'espace de nom XAML ( 'xmlns:' permet en effet d'inclure un espace de nom).

Une fenêtre Window ne pouvant contenir qu'un objet, VB y met une grid dedans; la grid est un conteneur qui lui peut contenir plusieurs objets.


<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" >
<Grid >
</Grid>
</Window>

Pour Expression Blend dans une 'Windows' il y a un 'FlowPanel'.

Pour Silverlight l'élément root (correspondant à une page) est UserControl (on m'a dit!).


<UserControl x:Class="MySilverlight.Page"
xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
>
<Grid Background="OldLace">
<!--more content here-->
</Grid>
</UserControl>

Pour un objet comme une Window il ne peut y avoir qu'un objet enfant.

Pour un Panel (Conteneur permettant de positionner les contrôles comme StackPanel, DockPanel..), il peut y avoir plusieurs enfants (donc plusieurs objets contenus dans le Panel). Ils sont dans la collection Children du Panel, dont la balise est :


<StackPanel.Children>

Exemple d'un StackPanel contenant 2 boutons.


<StackPanel>
<StackPanel.Children>
<Button>
<Button.Content>
Click Me
</Button.Content>
</Button> 
<Button>
<Button.Content>
Re Click Me
</Button.Content>
</Button>
</StackPanel.Children>
</StackPanel>

Cette balise Children peut être omise.


<StackPanel>
<Button>
<Button.Content>
Click Me
</Button.Content>
</Button> 

<Button>
<Button.Content>
Re Click Me
</Button.Content>
</Button>
</StackPanel>

XI-D-6. Code 'Behind', évènements

L'interface est en XAML et le code (dit code behind)lié aux évènements est en VB. Lorsqu'un fichier XAML est compilé, l'emplacement du fichier code-behind pour chaque page XAML est identifié en spécifiant un espace de nom et une classe en tant qu'attributs x:Class de l'élément racine de la page XAML.

Soit la fenêtre Window2, elle correspond à une classe partiele par x:Class="Window2" (ici on a donné seulement un nom de Class, on aurait pu ajouter un espace de nom, un namespace, de la forme MonEspaceDeNom.Window2).


<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
<Button Name="Button2">
</Button>
</Grid>
</Window>

On y ajoute un Bouton.

Si on double-click sur ce bouton, on se retrouve dans le code behind en VB qui a été crée automatiquement dans le fichier window2.xaml.vb:


Partial Public Class Window2

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
_Handles Button2.Click

End Sub

End Class

On note qu'il y a création d'une seconde classe partielle nommé Window2 qui contient le code lié à l'évènement click.

On aurait pu créer soit même la gestion des évènements en nommant la procédure liée au 'Click' du bouton dans le code XAML:


<Button Name="Button1" Click="MyButtonClick">

Il faudra ensuite créer une Sub MyButtonClick en VB.


Partial Public Class Window2

Private Sub MyButtonClik()

End Sub

End Class

ou en ajoutant les paramètres:


Partial Public Class Window2

Private Sub MyButtonClik(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 

End Sub

End Class

sender est l'objet qui a déclenché l'évènement.

e est de type RoutedEventArgs et contient les arguments de l'évènement.

On remarque que pour pallier à la disparition des 'groupes de contrôles' de VB6, et pour que le click sur plusieurs boutons exécute la même Sub, on peut indiquer Click="MyButtonClick" pour plusieurs boutons.


<Button Name="Button1" Click="MyButtonClick">
<Button Name="Button2" Click="MyButtonClick">

XI-D-7. Extension de balisage

On a vu qu'un attribut avait une valeur sous forme de String, mais il peut aussi avoir comme valeur une extension.

Les principales extensions sont les Binding et les ressources.

Les caractères { et } indiquent une extension de balisage (markup extension).

Exemple d'une extension, ici une ressource (staticResource).


<Border Style="{StaticResource PageBackground}">

Exemple d'une extension avec ici une liaison de données (Binding).


<TextBlock Text="{Binding Title}" />

Préfixe x:

x:Key.

Définit une clé unique pour chaque ressource dans un ResourceDictionnary, autrement dit, donne un 'nom' unique à la ressource; pour utiliser cette ressource, on l'appellera par son nom: Créons une ressource pour une grid, c'est un LinearGradientBrush que l'on 'nomme' "FunkyBrush" (c'est une clé unique).


<Grid.Resources>
    <LinearGradientBrush x:Key="FunkyBrush">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
</Grid.Resources>

Ensuite on peut l'utiliser dans la grid:


<Button Background="{StaticResource FunkyBrush}">Click Me</Button>

Code complet:


<Grid>
  <Grid.Resources>
    <LinearGradientBrush x:Key="FunkyBrush">
      <GradientStop Color="Yellow" Offset="0" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
  </Grid.Resources>
  <Button Background="{StaticResource FunkyBrush}">Click Me</Button>
</Grid>

x:Class.

Définit l'espace de nom et le nom d'une classe, permet de faire le lien avec le code exécutable VB (code-behind).

Pour une fenêtre Windows, correspond au nom de la fenêtre.


<Window x:Class="Window1">

x:code.

Permet de mettre dans le code XAML du code VB qui agit sur l'UI.


<Button Click="Clicked"  Name="Button1">
<x:Code>


Sub Clicked(sender As Object,e As RoutedEventArgs )
  button1.Content = "Hello World"
End Sub


</x:Code>
</Button>

XI-D-8. Espace de noms

On a vu que dans l'élément racine, on pouvait inclure un espace de nom grâce à 'xmlns:' et ainsi donner accès à des objets extérieurs .

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Indique l'espace de nom XAML.

On va maintenant voir comment inclure d'autres espaces de nom dans le code xaml avec quelques exemples.

On peut vouloir inclure un autre espace de nom (WindowsForms par exemple), pour pouvoir utiliser le DataGrid des WindowsForms. C'est un bel exemple de l'intégration d'un contrôle non WPF dans l'interface WPF.

Dans le code Xaml de la Window, il faut importer les espaces de nom correspondant au WindowsForms:


xmlns:wfint="clr-namespace:System.Windows.Forms.Integration;assembly=WindowsFormsIntegration"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

Remarquons qu'on a donné un nom, un alias à l'espace de nom 'wf' dans la seconde ligne grâce à 'xmlns:wf'.

Ensuite, toujours en Xaml on utilise une DataGrid:


<wfint:WindowsFormsHost Height="100" Width="200">
   <wf:DataGrid x:Name="myDataGridWF"><wf:DataGrid>
<wfint:WindowsFormsHost>

Remarquons aussi qu'on utilise la syntaxe 'Espacedenom.Objet' avec 'wf:DataGrid'.

On peut vouloir avoir accès aux objets qui sont dans l'application, mais pas dans l'espace xaml.
On a par exemple un module de class écrit en Vb avec une classe nommée 'Names', si on veut l'utiliser dans le code xaml, il va donc falloir inclure l'espace de nom "clr-namespace:NomDuProgramme" en lui donnant un nom d'alias ('local' ici); ensuite on pourra utiliser 'local:Names' pour avoir accès à cette classe dans le code xaml (dans l'exemple on l'utilise dans une ressource; pour créer une ressource, on verra celà plus tard):


    <Window x:Class="Window1"
    ....
    xmlns:Local="clr-namespace:NomDuProgramme"
    >

    
    <Window.Resources>
        <local:Names  x:Key="ListData"/>
    </Window.Resources>
</Window>

XI-D-9. Remarque importante

Il est important de comprendre que tout le code écrit en XAML peut aussi être écrit en VB.


<Button Name="MonBouton">Ok</Button>

dans la fenêtre xaml crée un bouton; on peut aussi créer ce bouton dans le code VB:


Dim MonBouton As New Button
MonBouton.Content = "Ok"

Précédent Sommaire Suivant

Les sources présentés sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.