2-Les Contrôles

Un contrôle(control) est un composant qui fait partie de l’iterface d’utilisateur et qui produit un comportement interactif particulier. Il y a plusieurs types de contrôles comme les buttons , les text boxes , les radios buttons … En effet, les contrôles sont les blocks qui constituent une interface graphique.

WPF donne la possiblité de travailler sur le “look” ‘un contrôle, on peut régler le format des textes , la couleur de l’arrière plan … On peut aussi des modèles ( tempelate ) pour ajuster toute l’apparence d’un contrôle.

Dans ce chapitre, nous allons étudier les principaux contrôles en WPF qui sont :

• Button
• Slider & Scroll
• ProgressBar
• Text Control
• ToolTip
• GroupBox & Expander
• Menu

 

• Buttons :

Les boutons sont des contrôles qui dérive de la classe ButtonBase et que l’utilisateur peut cliquer dessus mais le résultat du clic dépend du type du bouton: un clic sur Radio Box exprime un choix alors qu’un clic sur un bouton simple a un effet immédiat. Il y a trois types de boutons :

                                  

Les boutons simple se déclare de la manière suivante :

<Button>Nom_Bouton</Button>

Quand on clique sur ce bouton, il doit faire une action sinon il ne sert à rien, la définition d’un événement ou une commande peut se faire en XAMl ou en C# mais pour les gérer on ne peut utiliser que C#, par exemple on veut céer un bouton qui copie un texte sélectionné, ainsi qu’un autre qui ferme la fenêtre, d’abord on définit les boutons en XAML :

<Grid>
        <Button Margin=”26,86,0,0″ Name=”button1″ Height=”23″ VerticalAlignment=”Top” Background=”Bisque” Click=”button1_Click” HorizontalAlignment=”Left” Width=”74″>_Test</Button>
        <Button Height=”23″ Margin=”0,86,31,0″ Name=”button2″ VerticalAlignment=”Top” Click=”button2_Click” HorizontalAlignment=”Right” Width=”74″>Close</Button>
    </Grid>

 On passe à C# soit en double-cliquant sur un des deux boutons ou en cliquant droit puis Afficher le code, chacun des deux boutons est associé à une méthode, alors pour le premier bouton on écrit :

private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(“Un bouton pour le projet lol”);
        }

et pour le deuxième :

private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

Le code final est :

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(“Un bouton pour le projet lol”);
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}

Vous remarquez que le nom du premier bouton est précédé par _ ce qui souligne la pramière lettre du nom après compilation, cela veut dire que l’action effectuée par le bouton peut être faite en appuyant sur Alt + la lettre souligne ( exemple : copier = Alt + C … ).

Les RadioButton et les CheckBox dérivent indirectement de la classe ButtonBase à l’intermédiaire de la classe ToggleButton. Cette classe définit une propriété IsChecked qui indique si le bouton est “checké” ou pas, elle renvoie True ou False ou bien Null si on se trouve dans une situation indéterminée.

Les RadioButtons sont généralement utilisé en groupe, ou un seul boutons doit être sélectionné. Le moyen le plus simple de les regrouper est d’utiliser un parent commun comme les StackPanel :

<StackPanel>
        <TextBlock Foreground=”BlueViolet” FontSize=”16″ FontFamily=”Times New Roman”>Ville</TextBlock>
        <RadioButton GroupName=”Ville”>Mulhouse</RadioButton>
        <RadioButton GroupName=”Ville”>Paris</RadioButton>
        <TextBlock Foreground=”BlueViolet” FontSize=”16″>Ecoles</TextBlock>
        <RadioButton GroupName=”Ecole”>ENSISA</RadioButton>
        <RadioButton GroupName=”Ecole”>ENSCMU</RadioButton>
        <RadioButton GroupName=”Ecole”>Polytechnique</RadioButton>
    </StackPanel>

GroupName regroupe les RadioButtons dans des sous groupes.

• Slider & Scroll :

Les Slider permettent d’ajuster une valeur à partir d’un ensemble de valeur à laide d’un curseur. le Scroll est similaire mais il permet de contrôler l’espace qu’on peut voir.

Ces deux contrôles dérivent de la classe RangeBase, ils ont les propriétés suivantes : Minimum, Maximum qui définissent les limites du champ, Value qui fixe la valeur courante. Le Slider a une taille fixe contrairement au Scroll qui s’adapte à la taille de la fenêtre.

• ProgressBar :

Un ProgressBar indique combien un processus a complété. C’est un rectangle qui se rempli par une barre colorée au fur et à mesure qu’on s’approche de terminer le processus. Ce contrôle est particulièrement utile quand une opération dure un moment non négligeable. Ce contrôle dérive aussi de la clase RangeBase. La taille de la barre est réglée par la propriété Value et le sens de progression est réglé à l’aide de la propriété FlowDirection( LeftoRight ou RightToLeft ). Exemple :

<ProgressBar Height=”16″ Margin=”37,46,40,0″ Background=”CadetBlue” Name=”progressBar1″ VerticalAlignment=”Top” FlowDirection= “LeftToRight”  Value=”40″ />

• Text Controls :

Il y a plusieurs contrôles qui permettent d’exploiter les textes, le plus simple est le TextBox. Ce contrôle a plusieurs propriétés telles que la propriété AcceptReturn ( True ou False ) qui autorise l’écriture sur plusieurs lignes et VerticalScrollBarVisibility/ VerticalScrollBarVisibility qui si elle prend la valeur “Visible” elle permet l’affichage du ScrollBar quand le texte dépasse la longueur ou la largeur du TextBox.

Il y a aussi le PasswordBox qui, comme son nom l’indique est une boite à texte masqué.

Vous avez sûrement remarqué qu’on ne peut pas changer l’apparence du texte tapé dans le TextBox, c’est pour cette raison que le RichTextBox existe il permet d’appliquer des changement comme l’Italique, Souligné … à l’aide des raccourcis clavier.

Ce qu’on vient de dire se résume avec ce code :

<Grid>
        <TextBlock Height=”28″ Margin=”65.947,0″ VerticalAlignment=”Top” > Ceci est un exmple de Text controls</TextBlock>
        <TextBox Margin=”0,23,0,0″ Height=”50″ AcceptsReturn=”True” VerticalAlignment=”Top”></TextBox>
        <PasswordBox Password=”Unsecure” Margin=”0,74,0,0″ Height=”50″ VerticalAlignment=”Top” />
        <RichTextBox xml:lang=”fr-FR” SpellCheck.IsEnabled=”True” Margin=”0,123,0,71″ />
    </Grid>

Avec Le RichTextBox, on peut même appliquer une vérification d’orthographe grâce à : xml:lang=”fr-FR” qui choisit le dictionnaire et SpellCheck.IsEnabled=”True” qui active  la vérification.

•   GroupBox & Expander :

GroupBoxet Expandet sont très similaires, tous les deux permettent de disposer un contenu horisontalement ou verticalement, et une en-tête. La différence princiaple entre que GroupBox affiche toujours son contenu alors que Expander peut le cacher en cliquer sur la flèche.

Ces deux contrôles dérivent de la classe HeaderedContentControl, donc on peut placer n’importe quel contenu à l’intérieur des ces deux contrôles comme dans cet exemple ;

<StackPanel Orientation=”Horizontal”>
        <GroupBox Header=”Ecoles d’ingénieurs” Margin=”2″ Background=”White”  Padding=”3″>
            <StackPanel Orientation=”Vertical”>
                <RadioButton Content=”ENSISA”/>
                <RadioButton Content=”ENSCMU”/>
                <RadioButton Content=”Polytechnique”/>
            </StackPanel>
        </GroupBox>
        <Expander Header=”Ecoles d’ingénieurs” IsExpanded=”True” Background=”White”>
           <StackPanel>
                <RadioButton Content=”ENSISA”/>
                <RadioButton Content=”ENSCMU”/>
                <RadioButton Content=”Polytechnique”/>
           </StackPanel>
        </Expander>
</StackPanel>

•  Menus :

La majorité des applications Windows disposent d’un menu qui se trouve généralement  en haut de la fenêtre . La définition du menu se fait de la manière suivante :

<Menu>
            <MenuItem Header=” Fichier “>
                <MenuItem Header=”Nouveau” Command=”New”/>
                <MenuItem Header=”Ouvrir” Command=”Open”/>
                <MenuItem Header=”Enregistrer” Command=”Save”/>
                <MenuItem Header=”Enregistrer sous”/>
                <Separator/>
                <MenuItem Header=”Mise en page”/>
                <MenuItem Header=”Imprimer”/>
                <Separator/>
                <MenuItem Header=”Fermer”/>
            </MenuItem>
            <MenuItem Header=”Edition”>
                <MenuItem Header=”Copier”/>
                <MenuItem Header=”Couper”/>
                <MenuItem Header=”Coller”/>
            </MenuItem>
</Menu>

On a même rajouter des commandes à certaines éléments de notre menu histoire de lui donner une certaine utilité mais on verra de façon plus détaillé les commandes dans un prochain chapitre.