Cours VB.NET

Image non disponible


précédentsommairesuivant

XI-F. Les différents contrôles

XI-F-1. Les Conteneurs

Les conteneurs peuvent contenir plusieurs contrôles et permettent de les positionner.

XI-F-1-a. Les Grid

En WPF une Grid est un conteneur, contenant des cellules servant à aligner les contrôles (et pas une grille de données comme dans les Windows forms).

Aller chercher un 'Grid' dans la boite à outils à gauche et la mettre dans une fenêtre vide.

Image non disponible

Cela donne dans le code XAML:

 
Sélectionnez

<Grid Margin="12,20,9,10" Name="Grid1" />

En fait dans VB quand on ajoute une fenêtre vide à un projet, la fenêtre contient déjà une grid.

Pour ajouter des lignes et des colonnes dans la grille, il faut cliquer dans les barres bleutées horizontales ou verticales et positionner les traits.

Image non disponible

On voit dans le code XAML les largeurs des colonnes et les hauteurs des lignes.

 
Sélectionnez

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="74*" />
<RowDefinition Height="84*" />
<RowDefinition Height="121*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="28*" />
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="176*" />
</Grid.ColumnDefinitions>
</Grid>

On peut aussi vouloir définir le nombre de ligne et de colonne sans définir leurs largeurs: 3 lignes, 2 colonnes.

 
Sélectionnez

<Grid>
      <Grid.RowDefinitions>
       <RowDefinition/>
       <RowDefinition/>
       <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
    </Grid>

On peut ensuite ajouter des contrôles dans les cellules de la grille pour les positionner.

Pour chaque contrôle ajouté dans une cellule de la grid, on définira ses marges et son ancrage.

Ici on va ajouter une ListBox en bas à droite de la grille( en allant la chercher dans la boite à outils et en la déposant avec la souris), voyons ce que cela donne dans le code xaml.

 
Sélectionnez

<Grid Height="279" Name="Grid1" Width="272">
<Grid.RowDefinitions>
<RowDefinition Height="74*" />
<RowDefinition Height="84*" />
<RowDefinition Height="121*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37*" />
<ColumnDefinition Width="28*" />
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="176*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="3" Grid.Row="2" Margin="22,26,21,19" Name="ListBox1">
<ListBoxItem>toto</ListBoxItem>
<ListBoxItem>lululu</ListBoxItem>
</ListBox>
</Grid>

ListBox Grid.Column="3" Grid.Row="2" indiquent dans quelle cellule est la ListBox.

Attention la première colonne est Column=0 et la première ligne est Row=0.

On aurait pu ajouter Grid.ColumnSpan=2 pour indiquer que la ListBox occupe 2 colonnes (la 3 et la 4 dans ce cas).

Il existe aussi Grid.RowSpan pour étendre le contrôle sur plusieurs lignes de la Grid.

La aussi Margin="22,26,21,19" indique les distances au conteneur autour de la ListBox.

Dans la définition des dimensions, '*' signifie 'autant que possible, 'Auto' force à prendre la taille des éléments qu'elle contient.

 
Sélectionnez

<RowDefinition Height="*" />
<RowDefinition Height="Auto" />

Comment faire la même chose en VB? la Grid1 étant présente, ajoutons une ListBox comme ci dessus:

 
Sélectionnez

Dim lb As New ListBox
lb.Margin = New Thickness(22, 26, 11, 19)
Grid.SetColumn(lb, 3)
Grid.SetRow(lb, 2)
Grid1.Children.Add(lb)

Il existe aussi une UniformGrid qui reste similaire à la Grid à la seule différence que dans un UniformGrid les colonnes et les lignes ont forcément la même taille.

Enfin il y a à notre disposition un GridSplitter, qui ressemble au SplitContainer des WindowsForms, il permet de redimensionner les lignes et colonnes pendant de l'exécution de l'application.

XI-F-1-b. Les StackPanel

Arrange les contrôles sur une même ligne qui peut être horizontale ou verticale.

(On parle d'empilement)

En VB:

 
Sélectionnez

Dim instance As StackPanel

En XAML:

 
Sélectionnez

<StackPanel> Children </StackPanel>

La valeur par défaut de Orientation du StackPanel est Vertical, aussi les contrôles seront positionnés de haut en bas. L'attribut Orientation="Horizontal" permet de mettre les contrôles enfant de gauche à droite.

Image non disponible

On a ajouté dans le StackPanel un TextBlock et 3 boutons.

En XAML:

 
Sélectionnez

<StackPanel Orientation="Horizontal">
<TextBlock Margin="6" Padding="3" HorizontalAlignment="Center"
FontFamily="Verdana" FontSize="12" FontWeight="Bold">
Faire un choix:
</TextBlock>
<Button Margin="3,8,3,4" Padding="2">Option 1</Button>
<Button Margin="3,4,3,4" Padding="2">Option 2</Button>
<Button Margin="3,4,3,4" Padding="2">Option 3</Button>
</StackPanel>

On voit qu'il suffit de mettre les objets dans le StackPanel.

Ils seront empilés

En VB, voici un autre exemple, qui peut être collé dans la Sub New de Window1:

 
Sélectionnez

Dim StackPanel As New StackPanel

StackPanel.Orientation = System.Windows.Controls.Orientation.Horizontal

StackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Right

StackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Center

Dim MyButton1 As New Button

Dim MyButton2 As New Button

MyButton1.Content = "bouton1"

MyButton2.Content = "bouton2"

StackPanel.Children.Add(MyButton1)

StackPanel.Children.Add(MyButton2)

Me.content= StackPanel

On a instancié des boutons que l'on ajoute à la collection Children du StackPanel.

Enfin, on est probablement dans une Window completement vide, on met donc le StackPanel dans la propriété Content de Me (c'est à dire de la Window ici).

Cela donne

Image non disponible

La dimension du bouton est définie par la dimension de son texte.

Si on modifie la hauteur de la fenêtre, on remarque que les boutons sont repositionnés automatiquement toujours au centre de la hauteur grâce au VerticalAlignment. c'est l'avantage du Layout.

On peut insérer un bouton3 supplémentaire à une position définie:

 
Sélectionnez

Dim MyButton3 As New Button
MyButton3.Content = "bouton3"
StackPanel.Children.Insert(1, MyButton3)  '1 indique la position d'insertion.

Le bouton2 est automatiquement repositionné.

Image non disponible

XI-F-1-c. Les WrapPanel

Le WrapPanel est une variante ou les éléments sont mis à la suite l'un de l'autre mais ou il y a "retour à la ligne" quand on atteint la limite du conteneur.

Exemple : affichons les fichiers du répertoire c: dans un WrapPanel existant:

 
Sélectionnez

Dim WrapPanel As New WrapPanel
Dim dirs() As String = Directory.GetFiles("C:\")
For Each f As String In dirs
Dim file As New FileInfo(f)
Dim lbl As New Label
lbl.Width = 100
lbl.Content = file.Name.ToString
WrapPanel.Children.Add(lbl)
Next
Me.Content = WrapPanel
Image non disponible

L'intérêt de ce contrôle est que si on élargit la fenêtre, l'affichage est automatiquement reformaté ( Il passe de 2 à 3 colonnes ici).

XI-F-1-d. Les DockPanel

Arrange les contrôles soit horizontalement soit verticalement mais en plus les contrôles sont dockés (attachés) à un des bords.

Cela remplace la propriété 'Dock' des windowsForms.

Dans un DockPanel, on met 2 boutons.

On peut utiliser dans la fenêtre de propriété des boutons la propriété DockPanel.Dock:

Pour le premier bouton DockPanel.Dock="Left" met le premier bouton contre le bord gauche.

Pour le second bouton DockPanel.Dock="Left" met le second bouton à gauche contre le premier.

Bel exemple d'une propriété des boutons attachée au DockPanel.

Image non disponible

En XAML cela donne:

 
Sélectionnez

<DockPanel>
    <Button DockPanel.Dock=&#8220;Left&#8220;>Button</Button>
    <Button DockPanel.Dock=&#8220;Left&#8220;>Button</Button>
</DockPanel>

Ne pas oublier qu' on peut donner à Width et à Height la valeur "Auto" afin que le contrôle occupe la totalité de la largeur ou de la hauteur restante.

XI-F-1-e. Les Canvas

Il existe un contrôle Canvas qui permet de positionner des contrôles en indiquant leurs coordonnées (comme dans les Windows Forms), mais il n'y a pas de repositionnement automatique quand on modifie les dimensions de la fenêtre, ce qui limite son intérêt.

On positionne les contrôles avec Canvas.Top et Canvas.Left qui se trouve dans le code de chaque contrôle enfant.

En XAML:

 
Sélectionnez

<Canvas>
<Image Source="MyImage.gif" Canvas.Left="100" Canvas.Top="50"/>
<CheckBox Canvas.Top="80" Canvas.Left="0">Check Me</CheckBox>
<RadioButton Canvas.Top="0" Canvas.Left="80">Yes</RadioButton>
</Canvas>

Les Grid, DockPanel StackPanel, WrapPanel gèrent le positionnement automatique des enfants; pas Canvas. Cela veut dire que si la taille de la fenêtre change, les panneaux vont automatiquement modifier la position des éléments enfants.
Certains panneaux, comme DockPanel ou Grid, peuvent aussi affecter la taille de leurs enfants.

XI-F-1-f. Les Onglets

Plutôt que d'utiliser des fenêtres MDI on utilise des onglets (TabControl).

 
Sélectionnez

<TabControl Height="Auto" HorizontalAlignment="Stretch" Name="TabControl1" VerticalAlignment="Stretch" Width="Auto" Margin="5,28,5,5">
            <TabItem Header="TabItem1" Name="TabItem1">
                <Grid />
            </TabItem>
        </TabControl>
Image non disponible

Dans le TabControl chaque onglet correspond à un TabItem, la propriété Header permettant d'afficher le titre de l'onglet, Le TabItem a aussi une propriété Content dans laquelle on peut mettre une Grid ou un StackPanel.

Les onglets peuvent être à droite, à gauche, en haut ou en bas; Ici à gauche:

 
Sélectionnez

<TabControl TabStripPlacement="Left" Margin="0, 0, 0, 10">
  
</TabControl>

XI-F-2. Les Boutons et RepeatButton

XI-F-2-a. Les 'Button'

Pour ajouter un bouton, 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.

Image non disponible

En bas à droite, on a la fenêtre de propriétés du bouton.

Le nom du contrôle est en haut, après 'Name'.

Dans le designer, la propriété 'Content' contient le texte à afficher sur le bouton.

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

Image non disponible

Créons un bouton avec du code XAML:

Il faut taper dans la fenêtre XAML:

 
Sélectionnez

<Button>Ok</Button>

Cela crée un bouton sur lequel est affiché 'Ok'. Il apparaît en haut.

Faisons plus complet:

 
Sélectionnez

<Button Height="39" Margin="40,51,118,0" Name="Button1" VerticalAlignment="Top" Click="OnClick5">Ok</Button>

Voyons le détail de cette ligne:

La basile 'Button' crée un bouton.

Name="Button1" indique le nom du contrôle dans le designer.

VerticalAlignment="Top" indique que le contrôle est ancré en haut (il reste toujours à la même distance du bord sur lequel il est ancré. Valeur possible:Top, Bottom, Center.

HorizontalAlignment="Left" même chose pour l'alignement horizontal.

Margin définit la distance par rapport aux bords.

Image non disponible

Width="50" Height="30" indiquent les dimensions du bouton (largeur, hauteur).

On peut aussi ajouter MinWidth MinHeight MaxWidth et MaxHeight qui indiquent les tailles minimales et maxilales.

On aurait pu utiliser l'attribut Content="Ok" pour mettre un texte dans le bouton.

Click="OnClick5" indique que l'action de cliquer sur le bouton déclenche la procédure OnClick5.

Cela crée automatiquement, dans le code VB, la routine suivante:

 
Sélectionnez

Sub OnClick5(ByVal sender As Object, ByVal e As RoutedEventArgs) 
End Sub 

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

e contient les arguments de l'évènement, remarquons que e est de type RoutedEventArgs (et pas EventArgs comme dans les Windows Forms).

Dans VB si on n'ajoute pas 'Click=...' dans le code XAML la routine Button1_Click est automatiquement créée.

On peut ajouter du code dans la routine, pour modifier les propriétés du bouton par exemple:

 
Sélectionnez

Sub OnClick5(ByVal sender As Object, ByVal e As RoutedEventArgs) 
 Button1.FontSize = 16 
 Button1.Content = "Ok Ok.." 
 Button1.Background = Brushes.Red 
End Sub 

Voici le bouton de départ et le bouton quand on a cliqué dessus.

Image non disponible

Pour mettre une image dans un bouton, pas de propriété 'Image'!! il faut avoir le fichier image et ajouter une balise Image:

 
Sélectionnez

<Button Height="38" Margin="94,22,14,0" Name="Button2" VerticalAlignment="Top" >
<Image Source="oktransp.GIF"></Image>
</Button>

Dans ce cas, pas de texte sur le bouton en même temps qu'une image: content="ok" est refusé car content ne peut contenir plus d'un objet et il y a déjà une image. Pour mettre un texte et une image dans le bouton, il faut mettre un conteneur comme une grid dans le bouton puis mettre dans les cellules de la grid le texte et l'image.

On a choisit un fichier GIF avec un fond 'transparent' ce qui permet de ne pas voir le fond de l'image.

Image non disponible

Comment mettre un texte et une Image dans un bouton?

Il faut mettre un StackPanel dans le bouton (puisque celui-ci ne peut contenir qu'un seul objet), dans ce StackPanel mettre un TextBlock et une Image. Le faire en tapant du code XAML (dans le designer VB c'est difficile de mettre un StackPanel dans un Button, il se met dessus et pas dedans, donc copier coller le code XAML). De plus l'image doit être dans les ressources: voirce chapitre.

 
Sélectionnez

<Button  Name="Button1">
            <StackPanel   Name="StackPanel">
                <TextBlock TextAlignment="Center">
                 Ok 
                </TextBlock>
                <Image Source="oktransp.GIF" Height="25.704" Width="127.092"> 
                </Image>
            </StackPanel>
            </Button>					

Cela donne:

Image non disponible

Voir aussi le chapitre sur les ressources.

Bouton par défaut et Cancel.

Le bouton par défaut est activé quand l'utilisateur tape sur 'Enter'. Pour indiquer que le bouton est 'par défaut' il faut ajouter l'attribut IsDefault.

 
Sélectionnez

<Button Name="okButton" Click="okButton_Click" IsDefault="True">OK</Button>

Le bouton cancel est activé quand l'utilisateur tape sur 'Echap'. Pour indiquer que le bouton est 'Cancel' il faut ajouter l'attribut IsCancel.

 
Sélectionnez

<Button Name="cancelButton" IsCancel="True">Cancel</Button>

Bouton avec touche d'accès rapide (raccourci):

Il faut autoriser dans le ContentPresenter la reconnaissance des AccesKey puis dans le texte du bouton mettre un '_' avant la lettre désirée:

 
Sélectionnez

<Button Margin="0,0,30,15" Name="Button1" HorizontalAlignment="Right" Width="62" 
Height="51" VerticalAlignment="Bottom">
<ContentPresenter RecognizesAccessKey="True" Content=" new _button"/>
</Button>

Ici le raccourci 'ALT B' déclenchera un click sur le bouton.

Autre exemple d'un bouton contenant du texte avec du gras de l'italique et ayant un ToolTip contenant une image et du texte:

 
Sélectionnez

 <Button Margin="0,0,271,183">
            <Button.ToolTip>
                <StackPanel Orientation="Horizontal">
                    <Image Source="c:/test.jpg" Margin="3"/>
                    <TextBlock> <Run FontWeight="Bold">Aide contextuelle</Run> <LineBreak/> Un Tooltip formaté avec des images</TextBlock>
                </StackPanel>
            </Button.ToolTip>
            <TextBlock>Exemple de <Run FontWeight="Bold">bouton</Run> avec <Run FontStyle="Oblique">du formatage !</Run></TextBlock>
        </Button>

Cela donne:

Image non disponible

Avec Expression Blend on peut créer des boutons d'aspect plus complexe avec par exemple un gradient de couleur, le code Xaml est beaucoup plus complexe. Exemple correspondant au bouton situé en haut de la page:

 
Sélectionnez

<Button HorizontalAlignment="Left" Margin="25,47,0,0" VerticalAlignment="Top" Width="159" Height="47" 
Name="Button1" RenderTransformOrigin="0.5,0.5">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFF0E5E3" Offset="0.505"/>
<GradientStop Color="#FFC6C5D7" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>

Créons un bouton avec du code VB:

 
Sélectionnez

Dim myButton As New Button                    'Création du bouton
myButton.Content = "ok"                       'Afficher 'Ok' dans le bouton
myButton.Background = Brushes.AliceBlue       'Fond en bleu
grid.Children.Add(myButton)                   'Ajouter le bouton à la grid
AddHandler myButton.Click, AddressOf click    'Indiquer que le click sur le bouton
                                              'doit exécuter la Sub nommée 'Click'

On remarque que comme on crée par code, il faut soit même écrire la gestion des évènements.

Quand on crée le bouton en mode designer, et que l'on double-click sur le bouton, la routine myButton_Click est automatiquement affichée.

Utiliser les évènements:

L'évènement principalement utilisé est le Click(): quand l'utilisateur clique sur le bouton la procédure.

 
Sélectionnez

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

est exécutée.

Cette procédure contient le code qui doit être exécuté lorsque l'utilisateur clique sur le bouton.

Le bouton peut être sélectionné grâce à un clic de souris, à la touche ENTRÉE ou à la BARRE d'espacement si le bouton a le focus.

XI-F-2-b. RepeatButton

C'est comme un bouton mais quand on click dessus et qu'on tient le bouton gauche appuyé, il déclenche l'évènement click plusieurs fois.

 
Sélectionnez

<RepeatButton Width="100" DockPanel.Dock="Top" Delay="500" Interval="100" Click="Increase">  
</RepeatButton>

Delay indique à quel moment démarrer l'évènement Click.

Interval indique l'intervalle entre chaque déclenchement.

Click= indique la sub évènement déclenchée par le Click.

Exemple de la routine évènement qui affiche le nombre d'évènement dans un champ text.

 
Sélectionnez

Sub Increase(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    Num = CInt(valueText.Text)
    valueText.Text = ((Num + 1).ToString())
End Sub

XI-F-3. Les contrôles contenant du texte

Les contrôles permettant de voir ou de modifier du texte sont:

  • Les Labels
  • Les TextBlock
  • Les TextBox
  • Les RichTextBox
  • Les PasswordBox

XI-F-3-a. Les Labels


Permettent d'afficher du texte, non modifiable et qui ne peut pas prendre le focus mais accepte les raccourcis clavier.

Création d'un label en XAML:

 
Sélectionnez

<Label Name="MonLabel" FontSize="20"> 
        Ceci est un cours de programmation
</label>  

Cela affiche le texte "Ceci est un cours de programmation"

Le nom du label "MonLabel", n'est pas affiché, il sert à accéder à l'élément à partir d'un programme.

Dans le code VB la propriété 'Content' permet de modifier le texte affiché.

 
Sélectionnez

Montexte.Content= "nouveau texte" 

Les labels permettent de créer des 'raccourcis clavier'.

Il y a une propriété nommée Taget qui définit l'élément qui reçoit le focus lorsque l'utilisateur appuie sur la touche d'accès rapide de l'étiquette:

Target="{Binding ElementName=listbox1}" indique que c'est listbox1 qui recevra le focus.

Pour indiquer la touche d'accès rapide (de raccourci) mettre un '_' avant la lettre désirée dans le texte du label.

Exemple: _Liste des noms

Cela donne:

 
Sélectionnez

<Label Target="{Binding ElementName=listbox1}" Name="MonLabel" >_Liste des noms</Label>

Quand on appuie sur Alt, le L de 'Liste des noms' se souligne indiquant que ALT L est un raccourci clavier.

Si l'utilisateur appuie toujours sur ALT et en même temps sur L, le focus passe sur la ListBox1.

Le label est souvent utilisé à coté d'un autre contrôle de saisie pour lequel il indique la fonction.

Les dimensions du contrôle ne s'adapte pas au texte.


XI-F-3-b. Les TextBlock


Permettent d'afficher du texte sur un formulaire sans possibilité de le modifier. Il est bien adapté pour afficher une ou au maximum quelques lignes.

Pas de raccourci clavier ici mais on peut utiliser le gras, l'italique, les liens Hypertexte.

Prendre un TextBlock dans les outils et le mettre dans un formulaire:

Image non disponible

Pour mettre rapidement un petit texte dedans, utiliser la propriété Text.

En VB:

 
Sélectionnez

TextBlock1.Text= "Mon texte"

Ici pas de texte enrichi.

Le cadre gris ne sera pas affiché.

Cela donne en Xaml:

 
Sélectionnez

<TextBlock> 
Mon texte 
</TextBlock>

On peut utiliser les balises Bold (gras), Italic (Italique) pour 'enrichir' le texte.

 
Sélectionnez

<TextBlock Name="textBlock1" TextWrapping="Wrap"> 
<Bold>TextBlock</Bold> est fait pour <Italic>afficher</Italic> du texte. 
</TextBlock>

On peut rajouter plein d'attributs: Background="AntiqueWhite" TextAlignment="Center"

En VB pour mettre du texte enrichi, on utilise la collection InLine:

 
Sélectionnez

Dim textBlock1 = new TextBlock()
textBlock1.TextWrapping = TextWrapping.Wrap
textBlock1.Background = Brushes.AntiqueWhite
textBlock1.TextAlignment = TextAlignment.Center
textBlock1.Inlines.Add(new Bold(new Run("TextBlock")))
textBlock1.Inlines.Add(new Run(" est fait pour "))
textBlock1.Inlines.Add(new Italic(new Run("afficher")))
textBlock1.Inlines.Add(new Run(", du texte "))

Les dimensions du contrôle ne s'adapte pas au texte.

XI-F-3-c. Les TextBox

Permettent d'afficher du texte, il est modifiable par l'utilisateur.

La police de caractère, sa taille, la couleur, l'enrichissement des caractères affectent la totalité du texte. Il n'est pas possible d'enrichir (gras, italique..) une partie du texte seulement.

Image non disponible

Créons un TextBox en XAML:

 
Sélectionnez

<TextBox></TextBox>

Donnons lui un nom:

 
Sélectionnez

<TextBox Name="TextBox1"></TextBox>

Mettons un texte dedans:

 
Sélectionnez

<TextBox Name="TextBox1">Ceci est le texte</TextBox>

En VB:

 
Sélectionnez

Dim TextBox1 As New TextBox

TextBox1.Text contient le texte affiché dans la textBox. AppendText permet d'ajouter du texte.

TextBox1.IsReadOnly=True interdit les modifications du texte.

TextBox1.MaxLines et TextBox1.MinLines permettent de définir si le TextBox est multilignes.( S'ils sont égales à 1, on a une seule ligne).

TextBox1.AcceptEnter=True et TextBox1.AcceptTab=True autorise respectivement le passage à la ligne quand on tape 'Enter' et l'insertion de tabulation. Si AcceptEnter=False, on ne peut saisie qu'une seule ligne.

VerticalScrollBarVisibility=True affiche une scroll bar verticale.

TextBox1.MaxLength permettent de définir le nombre de caractères. 0 pour saisie illimitée.

TextBox1.Clear efface le texte.

TextBox1.LineCount donne le nombre de lignes TextBox1.GetLineText(2) indique le contenu de la ligne numéro 2 (sans oublier que la première ligne est la ligne 0).

Si l'utilisateur a sélectionné du texte, il est dans TextBox1.SelectedText.

TextBox1.SelectionStart, TextBox1.SelectionLength indique la position du premier caractère sélectionné (le premier caractère du texte étant le caractère 0) et le nombre de caractères sélectionnés. On peut utiliser ces propriétés pour sélectionner du texte avec du code ou utiliser TextBox1.Select(3, 2), il existe enfin SelectAll .

Si TextBox1.SpellCheck.IsEnabled = True le correcteur d'orthographe est opérationnel: il souligne les fautes et un click droit permet de voir une liste des corrections possibles:

Image non disponible

TexBox.LineDown, LineUp permettent de faire défiler le texte en bas ou en haut . Il existe aussi LineLeft et LineRight PageDown, PagUp, PageRight, PageLeft.

TexBox1.ScrollToHome ScrollToEnd, ScrollToLine permettent de déplacer le texte visible.

On peut aussi utiliser TexBox1.Undo, Redo, Cut, Copy, Paste.

Si le texte est modifié cela déclenche:

 
Sélectionnez

Private Sub TextBox1_TextChanged(ByVal sender As System.Object, ByVal e As _
System.Windows.Controls.TextChangedEventArgs) _ 
Handles TextBox1.TextChanged
End Sub

Quand l'utilisateur frappe une touche cela déclenche les évènements KeyDown puis KeyUp (pas de keyPress!!)

 
Sélectionnez

Private Sub TextBox1_KeyUp(ByVal sender As Object, ByVal e As System.Windows.Input.KeyEventArgs) _
Handles TextBox1.KeyUp
    If e.Key = Key.OemComma Then ...
End Sub 

On note que la Sub KeyUp a un paramètre e de type System.Windows.Input.KeyEventArgs qui a la propriété Key qui contient la touche tapée. Malheureusement e.Key est en lecture seule!! on ne peut donc pas modifier le caractère tapé!!

XI-F-3-d. Les RichTextBox

Rich Text veut dire 'Texte enrichi'

Le contrôle RichTextBox permet d'afficher, d'entrer et de manipuler du texte mis en forme. Il effectue les mêmes tâches que le contrôle TextBox, mais il peut également afficher des polices, des couleurs pour une partie du texte et des liens, charger du texte et des images incorporées à partir d'un fichier, ainsi que rechercher des caractères spécifiques.

Toutes les propriétés de correction d'orthographe des TextBox s'appliquent aux RichTextBox.

Les RichTextBox en WPF n'affichent pas du RTF comme dans les WindowsForms mais des 'FlowDocument' qui sont en Xml.

En Xaml c'est simple, un FlowDocument est de la forme :

 
Sélectionnez

<FlowDocument>
</FlowDocument>

Dedans il y a des 'Paragraph', dans les paragraphes il y a le texte à afficher et l'enrichissement à l'aide de balise (Bold par exemple).

 
Sélectionnez

<FlowDocument>
<Paragraph>
Ceci est un texte avec une partie
<Bold>en gras</Bold>
</Paragraph>
</FlowDocument>

On le met dans une RichTextBox:

 
Sélectionnez

<RichTextBox>
<FlowDocument>
<Paragraph>
Ceci est un texte avec une partie
<Bold>en gras</Bold>
</Paragraph>
</FlowDocument>
</RichTextBox>

Cela donne:

Image non disponible

Le texte est éditable, modifiable.

Dans le code, en VB, cela se complique:

Il faut instancier un FlowDocument, un Paragraph, ajouter une ligne au paragraphe puis ajouter le paragraphe au Blocks du FlowDocument. Enfin il faut affecter à la propriété Document du RichTextBox le FlowDocument.

 
Sélectionnez

Dim doc As New FlowDocument
Dim para As New Paragraph
para.Inlines.Add("Ceci est un texte")
doc.Blocks.Add(para)
RichTextBox1.Document = doc

Si on veut ajouter l'enrichissement , il faut instancier un Bold, y ajouter le texte, ajouter au paragraphe puis au Block!!

 
Sélectionnez

Dim doc As New FlowDocument
Dim para As New Paragraph
para.Inlines.Add("Ceci est un texte avec une partie")
Dim b As New Bold
b.Inlines.Add("en gras")
para.Inlines.Add(b)
doc.Blocks.Add(para)
RichTextBox1.Document = doc

Sélectionner la totalité du texte:

 
Sélectionnez

Dim tr As New TextRange(RichTextBox1.Document.ContentStart, RichTextBox1.Document.ContentEnd)
MessageBox.Show(tr.Text)

C'est du texte non enrichi!!

load save print

Créons un RichTextBox et 3 boutons pour enregistrer lire dans un fichier le texte ou pour l'imprimer.

 
Sélectionnez

<RichTextBox Name="richTB">  
<FlowDocument> 
  <Paragraph> <Run>Paragraph 1</Run> </Paragraph>  
</FlowDocument>  
</RichTextBox> 
  <Button Click="SaveRTBContent">Enregistre texte </Button> 
  <Button Click="LoadRTBContent">Charge texte</Button> 
  <Button Click="PrintRTBContent">Imprime texte</Button>  

Voici le code VB (donné par microsoft) contenant les 3 routines permettant les 3 actions.

 
Sélectionnez

Imports System 
Imports System.IO 
Imports System.Windows 
Imports System.Windows.Controls 
Imports System.Windows.Documents 
Imports System.Windows.Media 
Namespace SDKSample 

    Public Partial Class SaveLoadPrintRTB 
        Inherits Page 
       ' Handle "Save RichTextBox Content" button click. 

        Private Sub SaveRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs) 
             ' Send an arbitrary URL and file name string specifying 
            ' the location to save the XAML in. 

            SaveXamlPackage("C:\test.xaml") 
        End Sub 

        

       ' Handle "Load RichTextBox Content" button click. 

        Private Sub LoadRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs) 
            ' Send URL string specifying what file to retrieve XAML 
            ' from to load into the RichTextBox. 

            LoadXamlPackage("C:\test.xaml") 

        End Sub 

        

        ' Handle "Print RichTextBox Content" button click. 

        Private Sub PrintRTBContent(ByVal sender As Object, ByVal args As RoutedEventArgs) 

            PrintCommand() 

        End Sub 

        

       ' Save XAML in RichTextBox to a file specified by _fileName 

        Private Sub SaveXamlPackage(ByVal _fileName As String) 
            Dim range As TextRange 
            Dim fStream As FileStream 
            range = New TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd) 
            fStream = New FileStream(_fileName, FileMode.Create) 
            range.Save(fStream, DataFormats.XamlPackage) 
            fStream.Close() 
        End Sub 

        

       ' Load XAML into RichTextBox from a file specified by _fileName 

        Private Sub LoadXamlPackage(ByVal _fileName As String) 
            Dim range As TextRange 
            Dim fStream As FileStream 
            If File.Exists(_fileName) Then 
            range = New TextRange(richTB.Document.ContentStart, richTB.Document.ContentEnd) 
            fStream = New FileStream(_fileName, FileMode.OpenOrCreate) 
            range.Load(fStream, DataFormats.XamlPackage) 
            fStream.Close() 
        End If 

        End Sub 

        

       ' Print RichTextBox 

        Private Sub PrintCommand() 
        Dim pd As New PrintDialog() 
        If (pd.ShowDialog() = True) Then 
        'use either one of the below 
        pd.PrintVisual(TryCast(richTB, Visual), "printing as visual") 
        pd.PrintDocument((DirectCast(richTB.Document, IDocumentPaginatorSource).DocumentPaginator), _
        "printing as paginator")         
        End If 
        End Sub 

    End Class 

End Namespace 

XI-F-3-e. Les PasswordBox

Permet de saisir un mot de passe.

la propriété PasswordChar détermine le caractère affiché à la place des caractères tapés.

En XAML:

 
Sélectionnez

<PasswordBox Name="pwdBox" MaxLength="64" PasswordChar="#" PasswordChanged="PasswordChanged" />

Ici le fait de taper un mot de passe déclenche la Sub PasswordChanged.

En VB on récupère le mot de passe dans:

 
Sélectionnez

pwdBox.Password

XI-F-4. Les cases à cocher et RadioButton

XI-F-4-a. Case à cocher

Créons une case à cocher:

Image non disponible

C'est une CheckBox. L'utilisateur peut la cocher ou non en cliquant dessus.

Dans le designer, la propriété Content contient le texte à afficher à coté de la case.

Les évènements les plus utiles sont :Checked et Unchecked.

 
Sélectionnez

Private Sub CheckBox1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
_Handles CheckBox1.Checked

End Sub
 
Sélectionnez

Private Sub CheckBox1_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) 
_Handles CheckBox1.Checked

End Sub

Il y a aussi l'évènement Click qui est exécuté lorsqu'on click sur la case.

 
Sélectionnez

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

    If CheckBox1.IsChecked = True Then MsgBox("c'est coché&#8218; maintenant")

End Sub

On note que la propriété IsChecked permet de voir si la case est cochée ou non.

XI-F-4-b. RadioButton

Les RadioButton peuvent être cochés ou non.

Image non disponible

ils sont généralement regroupés pour offrir aux utilisateurs un choix unique parmi plusieurs options, un seul bouton à la fois peut être coché. Si on clique sur un RadioButton dans un groupe, on le sélectionne, cela de-sélectionne les autres.

Vous pouvez regrouper des contrôles RadioButton en les plaçant dans un parent commun ou en leur attribuant un nom de groupe.

Quand un RadioButton est sélectionné, l'événement Checked est déclenché. Comme le montre l'exemple de code suivant, si votre application doit prendre une action quand la sélection de RadioButton change, vous pouvez gérer l'événement Checked.

 
Sélectionnez

<RadioButton Name="MyRadioBUtton" 
            IsChecked="True"
            Checked="Myroutine"
            GroupName="MyGroupe">
 Texte    
</RadioButton>

XI-F-5. Les Listes

Une ListBox est un contôle WPF qui contient une collection de ListBoxItem. Chaque ListBoxItem a une propriété 'Content'.

Créons une listBox:

On va la chercher dans la boite à outils et on la dépose ici sur une grid.

Image non disponible

Dans la fenêtre XAML, cela donne:

 
Sélectionnez

<ListBox  Name="ListBox1" /> 

Pour être plus complet, il y a aussi les attributs donnant la position de la ListBox dans la Grid et les marges autour:

 
Sélectionnez

<ListBox Grid.Column="3" Grid.Row="2" Margin="22,26,21,19" Name="ListBox1" /> 

Grid.Column="3" Grid.Row="2" indiquent les coordonnées de la cellule de la grid.

On peut ajouter des éléments dans la ListBox en mode conception dans le Designer.

Dans la fenêtre "propriétés" de la ListBox cliquer sur le bouton en face de Items. Cela ouvre une fenêtre permettant d'ajouter des éléments à la ListBox

Image non disponible

Le bouton "Ajouter" permet d'ajouter des ListBoxItem, chacun ayant des propriétés. La propriété "Content" indique ce que contient chaque ListBoxItem, ici le texte qui sera affiché.

Cela modifie le code XAML en ajoutant les ListBoxItem.

 
Sélectionnez

<ListBox Grid.Column="3" Grid.Row="2" Margin="22,26,21,19" Name="ListBox1">
<ListBoxItem>toto</ListBoxItem>
<ListBoxItem>lululu</ListBoxItem>
</ListBox>

Pour créer une ListBox puis ajouter des éléments à la ListBox dans le code VB:

 
Sélectionnez

Private Sub Window1_Loaded
Dim ListBox1 As ListBox
ListBox1.Items.Add("toto")
ListBox1.Items.Add("lulu")
Grid.Children.Add(ListBox1)
End Sub
Image non disponible

La ListBox à des procédures évènements dans le code VB. 'MouseDoubleClick' par exemple:

 
Sélectionnez

Private Sub ListBox1_MouseDoubleClick(ByVal sender As Object, ByVal e As _
System.Windows.Input.MouseButtonEventArgs) _
Handles ListBox1.MouseDoubleClick

'ici on affiche dans un messagebox l'item sur lequel l'utilisateur à clické.

MsgBox(ListBox1.SelectedItem.ToString)

End Sub

On remarque que l'élément sélectionné est SelectedItem.

Il y a aussi la procédure:

 
Sélectionnez

Private Sub ListBox1_SelectionChanged 

Comment modifier la couleur de fond de l'élément sélectionné?

 
Sélectionnez

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green" /> 

Mettre des boutons, des cases à cocher dans une listBox:

Les ListBoxItem d'une ListBox ont une propriété nommé 'Content' qui peut contenir un objet: du texte mais aussi une CheckBox, c'est ça la puissance des WPF.

Les CheckedListBox n'existent pas en WPF? On va les créer dans un ListBox1:

 
Sélectionnez

Private Sub Window1_Loaded
For i As Integer = 0 To 10
Dim chk As New CheckBox
chk.content = "Option " + i.ToString
Me.ListBox1.Items.Add(chk)
Next
End Sub
Image non disponible

De la même manière; on peut créer une liste de boutons...

On peut aussi modifier fortement l'affichage des éléments dans un ListBox. Ici par exemple plutôt que d'afficher bêtement une liste de nom, je vais les afficher dans un cadre coloré en fonction du sexe grâce à un modèle de données (Data Template). Voir le chapitre sur les ressources

Image non disponible

ListBox Horizontale:

Un ListBox a une propriété ItemsPanel qui permet de définir un ItemsPanelTemplate qui contrôle la disposition des éléments du ListBox. Une méthode consiste à créer un style ListBox et à définir la propriété ItemsPanel:

A mettre dans les ressources de la fenêtre.

 
Sélectionnez

<Style TargetType="ListBox">
  <Setter Property="ItemsPanel">
    <Setter.Value>
      <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center"/>
      </ItemsPanelTemplate>
    </Setter.Value>
  </Setter>
</Style>

XI-F-6. Les boîtes de dialogue

Les projet WPF permettent d'utiliser des MessageBox et InputBox et des PrintDialog, pour le reste il faut ruser car nativement il n'y a rien d'autre!! (erreur de jeunesse de WPF?)

XI-F-6-a. MessageBox

Fenêtre de dialogue permettant de fournir un message, un titre, des boutons, une image (icône) et éventuellement de retourner une information:

Pas de problème dans un projet WPF, MessageBox appartient à System.Windows.Controls.

Ressemble au MessageBox des 'Windows Forms' sauf qu'on parle d'image et non d'icône, qu'il y a un argument de moins (celui de l'aide) et que les paramètres n'ont pas le même nom parfois!!.

Dans le code VB, on utilise la méthode Show pour afficher la boite.

 
Sélectionnez

MessageBox.Show("mon text", "titre", MessageBoxButton.YesNo, MessageBoxImage.Exclamation, _ 
MessageBoxResult.OK)

On doit fournir le texte à afficher, on peut aussi fournir le titre dans la barre, le type de bouton , le type d'image et le bouton par défaut, une option d'affichage.

Exemple:

Afficher simplement un texte d'information:

 
Sélectionnez

MessageBox.Show("Error")
Image non disponible

Affiche une box avec le message et un bouton 'Error', pas de valeur de retour.

Afficher une question et voir sur quel bouton l'utilisateur a cliqué:

 
Sélectionnez

Dim rep As String = MessageBox.Show("Annuler", "Attention", MessageBoxButton.OKCancel, 
_MessageBoxImage.Exclamation, MessageBoxResult.OK, MessageBoxOptions.RightAlign)
Image non disponible

Le nom du bouton cliqué par l'utilisateur (de type MessageBoxResult) est retourné dans Rep qui est une String .

On peut ensuite tester sa valeur:

 
Sélectionnez

If rep = MessageBoxResult.OK Then

..

End If

Paramètres

TexteAAfficher

Obligatoire. Expression String affichée comme message de la boîte de dialogue (longueur maximale 1 024 caractères comme dans les WIndows Forms?). N'oubliez pas d'insérer un retour chariot si le texte est long, cela crée 2 lignes.

Titre

Expression String affichée dans la barre de titre de la boîte de dialogue. Si l'argument Titre est omis, il n'est rien affiché (voir premier exemple).

TypeBouton

-le nombre et le type de boutons à afficher (MessageBoxButton sans 's' maintenant):

  • MessageBoxButton.OK = Un seul bouton 'Ok'
  • MessageBoxButton.YesNo = Deux boutons 'Oui' 'Non'
  • MessageBoxButton.OkCancel = 'Ok' et 'Annuler'
  • MessageBoxButton.YesNoCancel :
Image non disponible

Image

-l'icône à utiliser

  • MessageBoxImage.Error
  • MessageBoxImage.Exclamation
  • MessageBoxImage.Information
  • MessageBoxImage.Question
Image non disponible

et aussi

  • MessageBoxImage.Asterisk
  • MessageBoxImage.Hand
  • MessageBoxImage.Warning
  • MessageBoxImage.Stop
  • MessageBoxImage.None

L'identité du bouton par défaut.

  • MessageBoxResult.Ok
  • MessageBoxResult.Cancel

Les options

MessageBoxOptions.RightAlign

Comme d'habitude, il suffit de taper MessageBox.Show( pour que VB proposer les paramètres).

Retour de la fonction :

Retourne une constante de type MessageBoxResult ( et non plus DialogResult comme dans les Windows Forms) qui indique quel bouton à été pressé.

  • MessageBoxResult.Yes
  • MessageBoxResult.No
  • MessageBoxResult.Cancel
  • MessageBoxResult.Retry
  • MessageBoxResult.Ok

XI-F-6-b. InputBox

Pose une question, retourne une String contenant la réponse tapée par l'utilisateur.

Pas de problème dans un projet WPF, InputBox appartient à System.Windows.Controls.

 
Sélectionnez

Dim Nom As String

Nom = InputBox("Bonjour", "Tapez votre nom ?")
Image non disponible

XI-F-6-c. PrintDialog

Pas de problème dans un projet WPF, PrintDialog appartient à System.Windows.Controls. (Ne pas confondre avec PrintDialog de System.Windows.Forms) Cette Classe va plus loin que l'ancienne car elle permet donc d'afficher la boite de dialogue mais aussi d'imprimer. On peut faire l'un ou l'autre ou les 2. Il faut instancier une PrintDialog qui permet d'afficher la boite de dialogue 'Imprimer' avec ShowDialog et/ou d'imprimer avec la méthode PrintDocument.

Exemple:

On crée un bouton ayant comme texte 'Imprimer' en XAML.

 
Sélectionnez

<Button Height="33" Margin="41,0,68,12" Name="Button1" >Imprimer</Button>

Dans le code, on affiche la boite de dialogue d'impression.

 
Sélectionnez

Private Sub Button1_Click

Dim pDialog As New PrintDialog()

pDialog.PageRangeSelection = PageRangeSelection.AllPages

pDialog.UserPageRangeEnabled = True

'Affiche la PrintDialog, retourne True si l'utilisateur a cliquer sur 'Imprimer'..

Dim print As Boolean = pDialog.ShowDialog()

If print = True Then

'Ici routine d'impression avec pDialog.PrintDocument(,)

End If

End Sub
Image non disponible

XI-F-6-d. OpenFileDialog

Fenêtre de dialogue permettant de choisir un fichier à ouvrir:

Image non disponible

Elle n'existe pas en Wpf on va donc utiliser la boite de dialogue standard de Windows.

Il faut donc importer l'espace Microsoft.Win32 en haut du module pour pouvoir l'utiliser!!

 
Sélectionnez

Imports Microsoft.Win32 

Puis, par exemple quand on clique sur le bouton Buttom1, cela ouvre la boite de dialogue permettant de choisir un fichier.

 
Sélectionnez

Private Sub Button1_Click

Dim dlg As New OpenFileDialog

dlg.ShowDialog()

Dim fichier As String = dlg.FileName

End Sub

Le nom du fichier à ouvrir est dans la propriété FileName.

On peut ajouter un filtre et un chemin initial:

 
Sélectionnez

Dim dlg As New OpenFileDialog()

' Filter by Word Documents
dlg.Filter = "Word Documents|*.doc"
dlg.ItinialDirectory = "c:\"
dlg.ShowDialog()

XI-F-6-e. SaveFileDialog

Fenêtre de dialogue permettant de choisir un nom de fichier d'enregistrement. Elle n'existe pas en Wpf. Il faut importer l'espace Microsoft.Win32 en haut du module pour pouvoir l'utiliser!!

 
Sélectionnez

Imports Microsoft.Win32

Puis, par exemple quand on clique sur le bouton Buttom1, ouvrir la boite de dialogue permettant de choisir un fichier.

 
Sélectionnez

Private Sub Button1_Click

Dim dlg As New SaveFileDialog

dlg.ShowDialog()

Dim fichier As String = dlg.FileName

'Ici routine d'enregistrement à écrire

End Sub

XI-F-6-f. FolderBrowserDialog

Fenêtre de dialogue permettant de choisir un répertoire:

Image non disponible

Elle n'existe pas en Wpf et n'est pas dans Win32. Pour cela on va faire de l'interopérabilité entre WPF et Windows Forms:

Il faut ajouter dans les références (menu 'Projet', 'Propriétés de..'; onglet 'Références' bouton 'Ajouter') System.Windows.Forms

Il faut importer l'espace System.Windows.Forms en haut du module pour pouvoir l'utiliser!!

On aurait pu écrire :Imports System.Windows.Forms mais comme certains éléments sont dans plusieurs espaces de nom et entraînent des ambiguïtés, on va importer avec un alias (swf qui sera l'alias de System.Windows.Forms) :

 
Sélectionnez

Imports swf = System.Windows.Forms 

Puis, par exemple quand on clique sur le bouton Buttom1, on ouvre la boite de dialogue permettant de choisir un répertoire.

 
Sélectionnez

Private Sub Button1_Click

Dim dlg As New swf.FolderBrowserDialog

dlg.ShowDialog()

Dim fichier As String = dlg.SelectedPath

MessageBox.Show(fichier)

End Sub

De la même manière on peut ouvrir

FontDialog

PrintPreviewDialog

ColorDialog

Ce n'est pas du WPF!!

XI-F-7. Les Menus et ToolBar

La balise Menu permet de créer un menu, les MenuItem permettent d'ajouter les items des menus et sous-menus. Le Header permet de donner le libellé du menu.

 
Sélectionnez

<Grid>

        <Menu>
            <MenuItem Header="Calcul">
                <MenuItem Header="Calcul somme"/>
                <Separator/>
                <MenuItem Header="Calcul différence"/>
            </MenuItem>
        </Menu>
    


       ... 
    </Grid>

Ici on a un menu 'Calcul' et 2 sous-menus 'Calcul somme' et 'Calcul différence'.
Le fait d'ajouter un MenuItem dans un MenuItem crée un sous-menu.
On remarque que ,bien sur ,le menu est dans le conteneur principal, ici une grid.

La balise 'Separator' permet d'ajouter une ligne de séparation entre les sous-menus.

On peut ajouter une touche de raccourci:

 
Sélectionnez

<MenuItem Header="_Find" InputGestureText="Ctrl+F"/>

Il faut gérer l'évènement 'Click' du menu pour que quand l'utilisateur du logiciel clique sur un item cela exécute une routine:

 
Sélectionnez

 <Menu>
        
            <MenuItem Header="Calcul">
                <MenuItem Header="Calcul total"
                Click="Total_Click"/>
            </MenuItem>

</Menu>

Quand on clique sur le sous-menu 'Calcul total' la Sub Total_Click s'exécute (Elle est dans le code VB).

 
Sélectionnez

 Private Sub Total_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        MsgBox("hello")
 End Sub

On peut ajouter facilement des sous-menus couper, copier, coller (grâce à 'Command') et des sous-menus coché/décoché (grâce à 'IsCheckable="True"'):

 
Sélectionnez

 <Menu>
        <MenuItem Header="_Edition">
            <MenuItem Command="ApplicationCommands.Copy"/>
            <MenuItem Command="ApplicationCommands.Cut"/>
            <MenuItem Command="ApplicationCommands.Paste"/>
        </MenuItem>
        <MenuItem Header="_Font">
            <MenuItem Header="_Gras" IsCheckable="True"
              Checked="Bold_Checked"
              Unchecked="Bold_Unchecked"/> 
            <Separator/>
            <MenuItem Header="_Italic" IsCheckable="True"
              Checked="Italic_Checked"
              Unchecked="Italic_Unchecked"/>
            </MenuItem>
            <MenuItem Header="Calcul">
                <MenuItem Header="Calcul total"
              Click="Total_Click"/>
                <Separator/>
                <MenuItem Header="Calcul différence" IsCheckable="True"
              Checked="Italic_Checked"
              Unchecked="Italic_Unchecked"/>
            </MenuItem>

        </Menu>

Il faut des Sub nommées 'Bold_Checked', 'Bold_Unchecked', 'Italic_Checked'.

On peut ajouter un style au menu pour en modifier l'aspect: Ici grâce à un Style, on va modifier la couleur de fond de tous les MenuItem:

 
Sélectionnez

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
        <Style  TargetType="{x:Type MenuItem}">
            <Setter Property = "Background" Value= "LightBlue"/>
        </Style>
</Window.Resources>
Image non disponible

On peut modifier le Style quand un évènement se déclenche: Si le 'Target' est le survol du MenuItem, mettre le texte en rouge:

 
Sélectionnez

<Window.Resources>
        <Style  TargetType="{x:Type MenuItem}">
            <Style.Triggers>
                <Trigger Property="MenuItem.IsMouseOver" Value="true">
                    <Setter Property = "Foreground" Value="Red"/>
                    <Setter Property = "FontSize" Value="12"/>
                    <Setter Property = "FontStyle" Value="Italic"/>
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>

Comment ajouter une image à un MenuItem?

 
Sélectionnez

<MenuItem Header="Calcul total"
              Click="Total_Click">
        <MenuItem.Icon>

    <Image Source="c:/test.jpg" Width="20" Height="20" ToolTip="Calcul" ToolTipService.HasDropShadow="True"/>

        </MenuItem.Icon>
</MenuItem>
Image non disponible

En plus on a mis un ToolTip sur l'image!!

Pour les ToolBar on utilise la basile ToolBarTray qui permet de positionner les ToolBar. La position de chaque ToolBar est dépendante de la Band (de haut en bas) et de la BandIndex qui permet de définir des groupes dans la band.
Dans chaque ToolBar on met des boutons.

 
Sélectionnez

       <Grid>
        <ToolBarTray >
            <ToolBar Band="1" BandIndex="1">
                <Button Click="Total_Click" ToolTip="Open">
                    <Image Source="C:/test.JPG" Height="52" Width="78" />
                </Button>
                <Button>
                    <Image Source="C:/test1.JPG" />
                </Button>
                <Button>
                    <Image Source="c:/test2.jpg" />
                </Button>
            </ToolBar>
            <ToolBar Band="2" BandIndex="1">
                <Button>
                    <Image Source="c:/test3.jpg" />
                </Button>
                <Button>
                    <Image Source="c:/test4.jpg" />
                </Button>
            </ToolBar>
            <ToolBar Band="2" BandIndex="2">
                <Button>
                    <Image Source="c:\test.jpg" />
                </Button>
                <Button>
                    <Image Source="c:/test.jpg" />
                </Button>
                <Separator/>
                <Button>
                    <Image Source="c:/test.jpg" />
                </Button>
                <Button>
                    <Image Source="c:/test.jpg" />
                </Button>
            </ToolBar>
        </ToolBarTray>
 </Grid>

Ici on a 2 bands, 2 groupes de boutons dans la seconde band, on peut ajouter des séparators.

Image non disponible

Dans le premier bouton (uniquement pour ne pas alourdir l'exemple) on gére l'évènement Click et on ajoute un ToolTip.

XI-F-8. Les DataGrid

Les datagrid sont des grilles du style tableur, ou on peut afficher des données.

XI-F-8-a. Le DataGrid des WindowsForms

On peut 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:

 
Sélectionnez

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

Ensuite, toujours en Xaml on met la DataGrid:

 
Sélectionnez

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

Enfin, on peut l'utiliser en VB:

 
Sélectionnez

DataTable dt = new DataTable()
dt.Columns.Add("Colonne 1", typeof(string))
dt.Columns.Add("Colonne 2", typeof(string))
dt.Rows.Add("Ligne1")
myDataGridWF.DataSource = dt         

XI-F-8-b. Le DataGrid WPF

Dans les WPF du Framework 3.5, pas de DataGrid WPF.

Microsoft en propose un gracieusement dans les ToolKit.

Il faut avoir installer la mise à jour SP1 du Framework 3.5, charger le ToolKit ( à cette adresse: "http://www.codeplex.com/wpf/Release/ProjectReleases.aspx?ReleaseId=15598"), puis l'installer.

Dans le Framework 4 , à partir de vb 2010 le DataGrid est déjà là; Il n'y a rien à installer.

Ensuite dans la boite à outils on a:

Image non disponible

On peut maintenant déposer un DataGrid dans la Window. Cela ajoute le code Xaml suivant:

 
Sélectionnez

<my:DataGrid  Name="DataGrid1" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit" />

On va maintenant, grâce à un binding, remplir la DataGrid avec une ObservableCollection de NomPerson:

Dans un module de classe on ajoute la ObservableCollection 'Names' (voir le code dans le chapitre sur le binding). Puis on ajoute le code VB qui instancie MyNames et qui relie DataGrid et MyNames:

 
Sélectionnez

Class Window1
    Public MyNames As New Names

Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) _
Handles MyBase.Loaded
        DataGrid1.DataContext = MyNames
    End Sub

Enfin on ajoute dans le code xaml de la grid le ItemsSource:

 
Sélectionnez

<my:DataGrid  Name="DataGrid1" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit"   
ItemsSource="{ Binding }"/>					

Et là, en exécution , la grille se remplit automatiquement:

Image non disponible

Si on ajoute un élément à la collection avec le code VB suivant, la DataGrid est mise à jour ( c'est l'avantage de la ObservableCollection).

 
Sélectionnez

MyNames.Add(New NomPerson("toto", "Zorro"))

XI-F-9. Image, Video, Son

Comment mettre une image dans un contrôle?
Avec la balise 'Image':

 
Sélectionnez

<Button  HorizontalAlignment="Left" Margin="4,0,0,0" Name="Button1" VerticalAlignment="Top" Width="150"  Height="100">
    <Image Source="{Binding Source=test.JPG}" />
</Button>

Le fichier test.jpg doit être dans le répertoire 'Document/Visual Studio 2010/Projet/MonProje/MonProjet' avec les .vb

On peut aussi utiliser les ressources pour mettre l'image (voir chapitre Ressources).

XI-F-10. Formes

On peut ajouter un bord autour d'un conteneur (ou d'un contrôle):

 
Sélectionnez

<Border BorderBrush="Black" BorderThickness="2"  CornerRadius="20">
                <TextBlock Background="LightGray" Margin="2,4">Rectangle</TextBlock>
</Border>

L'attribut CornerRadius permet d'arrondir les angles.

On peut afficher des rectangles, lignes, ellipses, polygones, paths.
L'exemple montre un rectangle avec un bord, des angles arrondis.
Une ligne oblique, une ellipse, un triangle, puis grâce à Path qui est très puissant mais très complexe un cercle.
Enfin une image limitée par une ellipse.

 
Sélectionnez

  <StackPanel Margin="0,0,-37,-84">
            <Border BorderBrush="Black" BorderThickness="2" Margin="10" CornerRadius="20">
                <TextBlock Background="LightGray" Margin="2,4">Rectangle</TextBlock>
            </Border>
           
            <Rectangle
    Width="100"
    Height="50"
    Fill="Blue"
    Stroke="Black" StrokeThickness="3"
    RadiusX="20" RadiusY="20"
    Canvas.Left="10"
    Canvas.Top="100"/>
    

            <TextBlock Background="LightGray" Margin="2,4">Ligne oblique</TextBlock>
            <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />
    
            <TextBlock Background="LightGray" Margin="2,4">Ellipse</TextBlock>
            <Ellipse Fill="Green" Height="77" Width="503" />
            
            <TextBlock Background="LightGray" Margin="2,4">Polygone</TextBlock>
            <Polygon Points="10,110 60,10 110,110" 
    Fill="Blue" />
            <TextBlock Background="LightGray" Margin="2,4">Path</TextBlock>
            <Path Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="10,50">
                            <LineSegment Point="200,70" />
                        </PathFigure>
                    </PathGeometry>
                    
                </Path.Data>
            </Path>

            <Path Fill="Gold" Stroke="Black" StrokeThickness="1">
                <Path.Data>
                    <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
                </Path.Data>
            </Path>
            <Image
  Source="c:\test.jpg"
  Width="200" Height="150" HorizontalAlignment="Left">
                <Image.Clip>
                    <EllipseGeometry
      RadiusX="50"
      RadiusY="50"
      Center="50,75"/>
                </Image.Clip>
            </Image>


        </StackPanel>
Image non disponible

Voici un exemple en code vb:

 
Sélectionnez

Dim monEllipse As New Ellipse()
monEllipse.Stroke = Brushes.Black
monEllipse.Fill = Brushes.DarkBlue
monEllipse.HorizontalAlignment = HorizontalAlignment.Left
monEllipse.VerticalAlignment = VerticalAlignment.Center
monEllipse.Width = 70
myEllipse.Height = 95
maGrid.Children.Add(monEllipse)

précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.