Home

Les Boutons de Commande

 

Introduction aux Boutons de Commande

 

Description

Dans une application typique, un bouton est un objet sur lequel l'utilisateur clique pour exécuter une action. Pour le rendre évident, un bouton est un contrôle entouré par une bordure épaisse. Voici un exemple d'un bouton sur un formulaire :

Button

Même si un contrôle est généralement placé sur un formulaire, il y a différents autres conteneurs de contrôle qui peuvent contenir un bouton. Il s'agit notamment de la barre d'outils ou la barre d'état, et les autres contenants que nous avons utilisés jusqu'à présent.

Pour indiquer pourquoi il est utilisé, un bouton affiche un texte comme sa légende. Un bouton permet également d'afficher une image. Un autre bouton permet d'afficher à la fois une chaîne et une photo. Lorsque vous créez un bouton, vous pourrez décider de ce qu'il doit afficher et comment il doit se comporter.

ApplicationApplication : Présentation des boutons

  1. Démarrez Microsoft Visual C# et créez une Application Windows nommé Algebra2
  2. Dans le menu principal, cliquez sur projet -> ajouter une classe...
  3. Dans la liste du milieu, veillez à ce que la classe soit sélectionnée.
    Modifiez le nom Algebra et cliquez sur Ajouter
  4. Modifiez le fichier comme suit :
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Text;    
    
    namespace Algebra2  
    {      
        public class Algebra      
        {          
            public static long Factorial(long x)         
            {              
                if (x <= 1)                  
                      return 1;              
                else                  
                  return x * Factorial(x - 1);          
            }            
            public static long Permutation(long n, long r)          
            {              
                if (r == 0)                  
                      return 0;              
                if (n == 0)                  
                      return 0;              
                if ((r >= 0) && (r <= n))                  
                       return Factorial(n) / Factorial(n - r);              
                else                  
                       return 0;          
            }            
     
            public static long Combinatorial(long a, long b)         
            {              
                if (a <= 1)                  
                      return 1;                
     
                return Factorial(a) / (Factorial(b) * Factorial(a - b));          
            }      
        }  
    }
  5. Dans l'Explorateur de solutions, droit-cliquez sur Form1.cs et cliquez sur Renommer
  6. Tapez Exercise.cs et appuyez deux fois sur entrée(pour enregistrer et pour ouvrir l'écran)
  7. Cliquez sur le corps de l'écran pour vous assurer que cette option est sélectionnée.
    Dans la fenêtre Propriétés, modifiez les caractéristiques suivantes
    FormBorderStyle : FixedDialog
    Texte : Factorielle, permutation et combinaison
    Taille : 304, 208
    StartPosition : CenterScreen
    MaximizeBox : false
    MinimizeBox : false
  8. Dans la section de conteneurs de la boîte à outils, cliquez sur TabControl et cliquez sur le formulaire
  9. Sur le formulaire, droit-cliquez sur tabPage2 et cliquez sur Ajouter une page
  10. Concevez le formulaire comme suit :
     

    Control

    Text

    Name

    Additional Properties

    TabControl

     

    tclAlgebra

    HotTrack : true
    Location : 12, 12
    Size : 304, 235

    TabPage

    Factorial

    tabFactorial

     

    Label

    Number :

     

    Location : 22, 21

    TextBox

     

    txtNumber

    TextAlign : droit
    Location : 88, 18
    Size : 50, 20

    Label

    Result :

     

    Location : 22, 56

    TextBox

     

    txtFactorial

    TextAlign : droit
    Location : 88, 54
    Size : 140, 20

    Contrôle

    Text

    Name

    Location

    Size

    TabPage

    Permutation

    tabPermutation

     

     

    Label

    n :

     

    22, 21

     

    TextBox

     

    txtPermutationN

    88, 18

    50, 20

    Label

    r :

     

    22, 56

     

    TextBox

     

    txtPermutationR

    88, 54

    50, 20

    Label

    P (n, r) :

     

    22, 92

     

    TextBox

     

    txtPermutation

    88, 90

    140, 20

    Control

    Texte

    Nom

    Emplacement

    Taille

    TabPage

    Combination

    tabCombination

     

     

    Label

    n :

     

    22, 21

     

    TextBox

     

    txtCombinationN

    88, 18

    50, 20

    Label

    r :

     

    22, 56

     

    TextBox

     

    txtCombinationR

    88, 54

    50, 20

    Label

    C (n, r) :

     

    22, 92

     

    TextBox

     

    txtCombination

    88, 90

    140, 20

  11. Enregistrez le formulaire

Création d'un bouton

Pour prendre en charge les boutons d'une application, le .NET Framework fournit une classe abstraite nommée ButtonBase. Le bouton régulier de Microsoft Windows est implémenté par la classe Button. Au moment du design, pour ajouter un bouton à votre projet, dans la section Contrôles communs de la boîte à outils, vous pouvez cliquer sur le bouton et cliquez sur l'écran ou sur un autre conteneur. Pour créer un bouton de programmation, vous pouvez déclarer une variable de type Button et utiliser l'opérateur new pour lui allouer la mémoire. Voici un exemple :

using System;
using System.Drawing;
using System.Windows.Forms;

public class Exercise : System.Windows.Forms.Form
{
    Button btnResume; 
 
    public Exercise()
    {
        InitializeComponent();
    }
    
    private void InitializeComponent()
    {
        btnResume  = new Button();
        btnResume.Location = new Point(32, 20);
 
        this.Controls.Add(btnResume);
    }
}

public class Program
{
   static int Main()
   {
       System.Windows.Forms.Application.Run(new Exercise());
       return 0;
   }
}

ApplicationApplication : Création de boutons

  1. Dans la zone de liste déroulante en haut de la fenêtre Propriétés, sélectionnez tabFactorial
  2. Dans la section Contrôles Communs de la boîte à outils, cliquez sur le bouton et cliquez sur la partie droite de la zone de texte haut

Les caractéristiques d'un bouton

 

La légende d'un bouton

Pour un utilisateur, les aspects les plus importants d'un bouton sont le message qui s'affiche et l'action qu'il effectue. Le texte qu'affiche le bouton permet à l'utilisateur de savoir à quoi sert le bouton. Cet état est représenté par la propriété Text. Les chaînes les plus populaires que les boutons affichent sont OK et Annuler. La légende OK est définie pour un formulaire ou une boîte de dialogue qui informe l'utilisateur d'une erreur, une situation intermédiaire ou un accusé de réception d'une action qui a été effectuée sur la boîte de dialogue qui héberge le bouton. La légende Annuler est utile sur un bouton dont le principal parent (le formulaire ou la boîte de dialogue) serait de poser une question ou demander une action suivie par l'utilisateur. Chaque fois qu'une boîte de dialogue permet à l'utilisateur de disparaître sans poursuivre l'action, vous devez fournir un bouton avec une légende Annuler.

Après avoir ajouté un bouton à un formulaire (par conception ou avec le code), vous pouvez modifier sa légende avec le code en affectant la chaîne souhaitée à la propriété Text. Par exemple, vous pouvez modifier la légende d'un bouton comme suit :

button1.Text = "Let it Go!";

Après avoir spécifié le texte d'un bouton, par défaut, il est placé au centre du bouton :

La position du bouton d'un texte est contrôlée par la propriété TextAlign qui est une valeur de l'énumérateur ContentAlignment. Les valeurs possibles sont :

TopLeft

TopCenter

TopRight

TopLeft

TopCenter

TopRight

MiddleLeft

MiddleCenter

MiddleRight

MiddleLeft

MiddleRight

BottomLeft

BottomCenter

BottomRight

BottomLeft

BottomCenter

BottomRight

Voici un exemple :

public class Exercise :  System.Windows.Forms.Form
{
    Button btnResume;
    
    public Exercise()
    {
        InitializeComponent();
    }
 
    private void InitializeComponent()
    {
        btnResume = new Button();
        btnResume.Text = "Resume";
        btnResume.Location = new Point(32, 20);
        btnResume.Size = new System.Drawing.Size(120, 48);
        btnResume.TextAlign  = ContentAlignment.BottomCenter;
 
        Controls.Add(btnResume);
    }
}

Button

ApplicationApplication : Utilisation des boutons

  1. Accéder à chaque page de l'onglet et ajouter un bouton
  2. Ajouter un bouton à l'écran et sous le contrôle de l'onglet
  3. Compléter la conception du formulaire comme suit :
     

    Contrôle

    Texte

    Nom

    Bouton

    Calculer

    btnCalcFactorial

    Bouton

    Fermer

    btnClose

    Contrôle

    Texte

    Nom

    Bouton

    Calculer

    btnCalcPermutation

    Contrôle

    Texte

    Nom

    Bouton

    Calculer

    btnCalcCombination

  4. Accéder à la page de l'onglet factoriel et double-cliquer sur son bouton Calculer
  5. Mettre en œuvre l'événement comme suit :
    private void btnCalcFactorial_Click(object sender, EventArgs e)  
    {          
            long number = 0;          
            long result;            
     
     
            try          
            {                  
                   number = long.Parse(txtFactNumber.Text);                  
                   result = Algebra.Factorial(number);                  
                   txtFactorial.Text = result.ToString();          
            }          
            catch (FormatException)          
            {                  
                    MessageBox.Show("Invalid Number");          
            }  
    }
  6. Revenir à l'écran
  7. Accéder à la page permutation d'onglet et double-cliquer sur son bouton Calculer
  8. Mettre en œuvre l'événement comme suit :
    private void btnCalcPermutation_Click(object sender, EventArgs e)  
    {          
            long n = 0, r = 0;          
            long result;            
     
     
            try          
            {                  
                    n = long.Parse(txtPermutationN.Text);          
            }          
            catch (FormatException)          
            {                  
                    MessageBox.Show("Invalid Number");          
            }            
            try          
            {                  
                    r = long.Parse(txtPermutationR.Text);                  
                    result = Algebra.Permutation(n, r);                  
                    txtPermutation.Text = result.ToString();          
            }          
            catch (FormatException)          
            {                  
                    MessageBox.Show("Invalid Number");          
            }  
    }
  9. Revenir à l'écran
  10. Accéder à la page d'onglet combiné et cliquer deux fois sur le bouton Calculer
  11. Mettre en œuvre l'événement comme suit :
    private void btnCalcPermutation_Click(object sender, EventArgs e)  
    {          
        long n = 0, r = 0;          
        long result;            
     
        try          
        {                 
        	n = long.Parse(txtPermutationN.Text);          
        }          
        catch (FormatException)          
        {                  
        	MessageBox.Show("Invalid Number");          
        }            
     
        try          
        {                  
        	r = long.Parse(txtPermutationR.Text);                  
        	result = Algebra.Permutation(n, r);                  
        	txtPermutation.Text = result.ToString();          
        }       
        catch (FormatException)          
        {                  
        	MessageBox.Show("Invalid Number");          
        }  
    }
  12. Retourner à l'écran et cliquer deux fois sur le bouton Fermer
  13. Mettre en œuvre l'événement comme suit :
    private void btnClose_Click(object sender,  EventArgs e)
    {
        Close();
    }
  14. Exécuter l'application pour tester les calculs
     

    Factorial

    Permutation

    Combinatorial

  15. Fermer le formulaire et le retourner à votre environnement de programmation

L'image sur un bouton

En outre, ou au lieu d'une légende, un bouton peut afficher une image dessus. Si vous voulez un bouton pour afficher une image bitmap, vous devez tout d'abord créer, concevoir ou avoir une image. Puis, dans la fenêtre Propriétés, utilisez le champ image pour sélectionner une image bitmap ou une icône. Vous pouvez également par programmation affecter un objet image à la propriété image. Voici un exemple :

private void InitializeComponent()
{
    btnResume = new Button();
    btnResume.Text = "Resume";
    btnResume.Location = new Point(32, 20);
    btnResume.Size = new System.Drawing.Size(120, 48);
    btnResume.Image = Image.FromFile(@"E:\Programs\neutral.gif");

    Controls.Add(btnResume);
}

Cela donnerait :

Par défaut, la légende et l'image affichent des ions du bouton du milieu-centre. Pour les rendre distincts et permettre à l'utilisateur de voir les deux, vous pouvez concevoir un bitmap qui a tous les deux et affecter ce bitmap comme image du bouton. Vous pouvez également utiliser une chaîne distincte et une image distincte. Heureusement, chacun peut avoir son propre alignement. Déjà, nous avons vu comment contrôler l'alignement de la légende.

Outre l'affichage d'une image, la classe Button est équipée de la propriété ImageAlign qui permet de spécifier l'alignement de l'image. La propriété ImageAlign est héritée de la classe ButtonBase. La propriété ButtonBase.ImageAlign est basée sur l'énumération ContentAlignment que nous connaissons déjà. Voici un exemple :

private void InitializeComponent()
{
        btnResume = new Button();
        btnResume.Location = new Point(32, 20);
        btnResume.Size = new System.Drawing.Size(120, 48);
        btnResume.Text = "Resume";
        btnResume.TextAlign = ContentAlignment.BottomCenter;
        btnResume.Image = Image.FromFile(@"E:\Programs\neutral.gif");
        btnResume.ImageAlign = ContentAlignment.TopCenter;
        Controls.Add(btnResume);
}

Cela donnerait :

Au lieu d'utiliser la propriété image, vous pouvez tout d'abord créer une liste d'image et ajouter quelques photos. Ensuite, utilisez la propriété ImageList, affectez-la au bouton. Utilisez la propriété ImageIndex pour spécifier quelle image s'affiche sur le bouton.

ApplicationApplication : Utilisation d'une image sur un bouton

  1. Pour démarrer une nouvelle application, dans le menu principal, cliquez sur fichier -> New -> Project
  2. Dans la liste du milieu, cliquez sur Windows Application et changez le nom à SimpleInterest1
  3. Cliquez sur OK
  4. Dans le menu principal, cliquez sur projet -> ajouter un nouvel élément...
  5. Dans la liste du milieu, cliquez sur l'icône fichier
  6. Modifiez le nom de la calculatrice et cliquez sur OK
  7. Cliquez droit sur une zone blanche dans le concepteur de l'icône - > supprimer le Type Image
  8. Cliquez droit sur le concepteur d'icône avec le bouton nouveau -> types d'image actuelle icône -> 16 x 16, 16 couleurs
  9. Concevez l'icône comme suit :
     
    Calculator
  10. Dans le menu principal, cliquez sur projet -> ajouter un nouvel élément...
  11. Dans la liste du milieu, cliquez sur l'icône fichier et modifiez le nom pour quitter
  12. Cliquez sur Ajouter
  13. Cliquez droit sur une zone blanche dans le concepteur de l'icône -> supprimer le Type Image
  14. Cliquez droit sur le concepteur d'icône avec le bouton nouveau -> types d'image actuelle icône -> 16 x 16, 16 couleurs
  15. Concevez l'icône comme suit :
     
    Exit
  16. Dans l'Explorateur de solutions, cliquez droit sur Form1.cs et cliquez sur Renommer
  17. Tapez SimpleInterest.cs et appuyez sur entrée deux fois
  18. Concevez le formulaire comme suit :
     

    Control

    Text

    Name

    TextAlign

    GroupBox

    Loan Preparation

     

     

    Label

    Principal

     

     

    TextBox

    0.00

    txtPrincipal

    Right

    Label

    Interest Rate :

     

     

    TextBox

    0.00

    txtInterestRate

    Right

    Label

    %

     

     

    Label

    Periods :

     

     

    TextBox

    1

    txtPeriods

    Right

    Label

    Months

     

     

    Bouton

    Calculate

    btnCalculate

     

    Bouton

    Close

    btnClose

     

    GroupBox

    Results

     

     

    Label

    Interets Earned :

     

     

    TextBox

    0.00

    txtInterestEarned

    Right

    Label

    Future Value

     

     

    TextBox

    0.00

    txtFutureValue

    Right

  19.  Sur l'écran, cliquez sur le bouton Calculer
  20. Dans la fenêtre Propriétés, cliquez sur une image et cliquez sur son bouton
  21. Dans la boîte de dialogue Sélectionner les ressources, cliquez sur Importer
  22.  Dans la zone Type de fichiers, sélectionnez tous les fichiers
  23. Recherchez le dossier du projet actuel, sélectionnez Calculator.ico et cliquez sur Ouvrir
  24. Dans la boîte de dialogue Sélectionner les ressources, cliquez sur OK
  25. Modifiez les propriétés suivantes du bouton calculer :
    ImageAlign : TopCenter
    TextAlign : BottomCenter
  26.  Sur l'écran, cliquez sur le bouton Calculer
  27. Dans la fenêtre Propriétés, cliquez sur une image et cliquez sur son bouton
  28. Dans la boîte de dialogue Sélectionner les ressources, cliquez sur Importer
  29. Dans la zone Type de fichiers, sélectionnez tous les fichiers
  30.  Recherchez le dossier du projet actuel, sélectionnez exit.ico et cliquez sur Ouvrir
  31. Dans la boîte de dialogue Sélectionner les ressources, cliquez sur OK
  32. Modifiez les propriétés suivantes du bouton Fermer :
    ImageAlign : TopCenter
    TextAlign : BottomCenter
     
    Simple Interest
  33. Sur l'écran, double-cliquez sur le bouton calculer et mettez en œuvre son événement Click comme suit :
    private void btnCalculate_Click(object sender, EventArgs e)
    {
        decimal Principal    = 0.00M,
                InterestRate = 0.00M,
                InterestEarned,
                FutureValue;
        decimal Periods = 0.00M;
     
        try          
        {
            Principal = decimal.Parse(txtPrincipal.Text);          
        }
        catch (FormatException)
        {
            MessageBox.Show("The value you entered for the " +
                            "principal is not valid");
        }
     
        try
        {
            InterestRate = decimal.Parse(txtInterestRate.Text);
        }
        catch (FormatException)
        {
            MessageBox.Show("Wrong Value: The interest rate must " +
                            "be a value between 0 and 100");
        }
     
        try
        {                  
            Periods = decimal.Parse(txtPeriods.Text);
        }
        catch (FormatException)         
        {                  
            MessageBox.Show("You entered an invalid value for the periods");
        }            
     
        decimal I = InterestRate / 100;         
        decimal p = Periods / 12;         
        InterestEarned = Principal * I  * p;         
        FutureValue    = Principal + InterestEarned;            
     
        txtInterestEarned.Text = InterestEarned.ToString("C");
        txtFutureValue.Text = FutureValue.ToString("C");
    }
  34. Revenez à l'écran.
  35. Sur l'écran, cliquez deux fois sur le bouton Fermer et mettez en œuvre son événement Click comme suit :
    private void btnClose_Click(object sender, EventArgs e) 
    {
        Close();
    }
  36. Exécutez l'application et testez le calcul.
     
    Interest Rate
  37. Fermez le formulaire et retournez à votre environnement de programmation

Le style plat d'un bouton

Un bouton normal s'affiche avec les bordures surélevées initialement définies par le système d'exploitation. Pour donner un aspect de fantaisie à votre bouton et le fonctionnement, vous pouvez utiliser la propriété FlatStyle. La propriété FlatStyle est basée sur une énumération du même nom. Il fournit 4 valeurs qui sont :

  • Plat : le bouton semble plat. Lorsque la souris est dessus, il devient en surbrillance
  • PopUp : le bouton semble plat. Lorsque la souris est dessus, les bordures du bouton sont soulevées.
  • Standard : le bouton apparaît et se comporte comme tous les boutons standard que vous avez vus
  • Système : l'aspect du bouton dépend du système d'exploitation

évidemment le plus important et l'événement le plus intuitif d'un bouton se produit lorsqu'on clique dessus. Cet événement est de type EventArgs, qui indique qu'il ne fournit pas, ni n'a pas besoin de tous les détails formels sur ce qui se passe. Pour lancer cet événement, vous pouvez double-cliquer sur le bouton du formulaire. Pour créer cet événement par programmation, mettez tout d'abord en œuvre la méthode qui porterait son affectation, puis incrémentez/ajoutez-la (avec l'opérateur +=) à la propriété Click du bouton en lui affectant le constructeur EventHandler.

Le résultat d'une boîte de dialogue

Une fois que l'utilisateur a utilisé un formulaire ou une boîte de dialogue, pour le fermer, l'utilisateur devra cliquer sur un bouton. Lorsque l'utilisateur effectue cette opération, vous devez savoir quel bouton a été cliqué. Bien qu'il existe différentes façons, vous pouvez obtenir cette information, pour vous aider, le .NET Framework fournit un mécanisme pratique via une énumération nommée DialogResult.

Lorsque vous créez un formulaire ou une boîte de dialogue, après l'ajout d'un bouton dans la fenêtre Propriétés, cliquez sur DialogResult et sélectionnez des valeurs :

Dialog Result

Sauf pour None, par défaut, la valeur que vous sélectionnez n'importe pas, mais vous devez suivre le standard de Windows pour sélectionner la valeur de droite.
Après avoir spécifié la valeur retournée d'un bouton, accédez aux propriétés de la boîte de dialogue ou de formulaire :

  • Si vous avez sélectionné OK comme la valeur DialogResult d'un bouton, vous devez sélectionner le nom de ce bouton pour la propriété AcceptButton du formulaire
  • Si vous avez sélectionné Cancel comme la valeur DialogResult d'un bouton, vous devez sélectionner le nom de ce bouton pour la propriété CancelButton du formulaire

Après avoir configuré le DialogResult du/des buton(s), quand l'utilisateur clique l'un des boutons pour fermer le formulaire ou la boîte de dialogue, vous pouvez obtenir la valeur de la méthode Form.ShowDialog() qui retourne l'une des valeurs de l'énumération DialogResult.

 
 
 
 

Précédent Copyright © 2004-2011, yevol.com Suivant