Contrôles

 

Date de publication : juin 2016

 Windows Presentation Foundation (WPF) est fourni avec beaucoup des composants d'interface utilisateur courants utilisés dans presque chaque application Windows, tels que Button, Label, TextBox, Menu et ListBox. Historiquement, ces objets sont connus sous le nom de contrôles. Alors que le Kit de développement logiciel WPF continue à utiliser le terme « contrôle » pour désigner vaguement toute classe qui représente un objet visible dans une application, il est important de noter qu'une classe n'a pas besoin d'hériter de la classe Control pour avoir une présence visible. Les classes qui héritent de la classe Control contiennent un ControlTemplate qui permet au consommateur d'un contrôle de modifier radicalement l'apparence du contrôle sans devoir créer une sous-classe. Cette rubrique aborde la manière dont les contrôles (à la fois ceux qui héritent de la classe Control et ceux qui ne le font pas) sont communément utilisés dans WPF.

Entity with relative path '../Token/autoOutline_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"3f255a8a-35a8-4712-9065-472ff7d75599","entity_type":"Article","locale":"fr-FR"}'.

Vous pouvez ajouter un contrôle à une application en utilisant langage XAML (eXtensible Application Markup Language) ou du code. L'exemple suivant montre comment créer une application simple qui demande ses nom et prénom à un utilisateur. Cet exemple crée six contrôles : deux étiquettes, deux zones de texte, et deux boutons, en XAML. Tous les contrôles peuvent être créés de la même façon.

    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
      </Grid.ColumnDefinitions>

      <Label>
        Enter your first name:
      </Label>
      <TextBox Grid.Row="0" Grid.Column="1" 
               Name="firstName" Margin="0,5,10,5"/>

      <Label Grid.Row="1" >
        Enter your last name:
      </Label>
      <TextBox Grid.Row="1" Grid.Column="1" 
               Name="lastName" Margin="0,5,10,5"/>

      <Button Grid.Row="2" Grid.Column="0" 
              Name="submit" Margin="2">
        View message
      </Button>

      <Button Grid.Row="2" Grid.Column="1" 
              Name="Clear" Margin="2">
        Clear Name
      </Button>
    </Grid>

L'exemple suivant crée la même application dans le code. Pour des raisons de concision, la création du Grid, grid1 a été exclue de l'exemple. grid1 a les mêmes définitions de colonne et de ligne que celles présentées dans l'exemple XAML précédent.

        Label firstNameLabel;
        Label lastNameLabel;
        TextBox firstName;
        TextBox lastName;
        Button submit;
        Button clear;

        void CreateControls()
        {
            firstNameLabel = new Label();
            firstNameLabel.Content = "Enter your first name:";
            grid1.Children.Add(firstNameLabel);

            firstName = new TextBox();
            firstName.Margin = new Thickness(0, 5, 10, 5);
            Grid.SetColumn(firstName, 1);
            grid1.Children.Add(firstName);

            lastNameLabel = new Label();
            lastNameLabel.Content = "Enter your last name:";
            Grid.SetRow(lastNameLabel, 1);
            grid1.Children.Add(lastNameLabel);

            lastName = new TextBox();
            lastName.Margin = new Thickness(0, 5, 10, 5);
            Grid.SetColumn(lastName, 1);
            Grid.SetRow(lastName, 1);
            grid1.Children.Add(lastName);

            submit = new Button();
            submit.Content = "View message";
            Grid.SetRow(submit, 2);
            grid1.Children.Add(submit);

            clear = new Button();
            clear.Content = "Clear Name";
            Grid.SetRow(clear, 2);
            Grid.SetColumn(clear, 1);
            grid1.Children.Add(clear);

        }

Il est courant de modifier l'apparence d'un contrôle pour ajuster l'apparence et la convivialité de votre application. Vous pouvez modifier l'apparence d'un contrôle en effectuant l'une des opérations suivantes, selon ce que vous souhaitez accomplir :

  • Modifier la valeur d'une propriété du contrôle.

  • Créer un Style pour le contrôle.

  • Créer un ControlTemplate pour le contrôle.

Modification d'une valeur de propriété de contrôle

De nombreux contrôles ont des propriétés vous permettant de modifier la manière dont le contrôle apparaît, comme la propriété Background de Button. Vous pouvez définir les propriétés de valeur en XAML et dans le code. L'exemple suivant définit les propriétés Background, FontSize, et FontWeight sur un Button en XAML.

      <Button FontSize="14" FontWeight="Bold">
        <!--Set the Background property of the Button to
          a LinearGradientBrush.-->
        <Button.Background>
          <LinearGradientBrush StartPoint="0,0.5" 
                                  EndPoint="1,0.5">
            <GradientStop Color="Green" Offset="0.0" />
            <GradientStop Color="White" Offset="0.9" />
          </LinearGradientBrush>

        </Button.Background>
        View message
      </Button>

L'exemple suivant définit les mêmes propriétés dans le code.

            LinearGradientBrush buttonBrush = new LinearGradientBrush();
            buttonBrush.StartPoint = new Point(0, 0.5);
            buttonBrush.EndPoint = new Point(1, 0.5);
            buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
            buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));

            submit.Background = buttonBrush;
            submit.FontSize = 14;
            submit.FontWeight = FontWeights.Bold;

Création d'un style pour un contrôle

WPF vous donne la capacité de spécifier l'apparence de contrôles massifs, au lieu de définir des propriétés sur chaque instance dans l'application, en créant un Style. L'exemple suivant crée un Style appliqué à chaque Button de l'application. Les définitions Style sont définies en général en XAML dans un ResourceDictionary, comme la propriété Resources de FrameworkElement.

        <Style TargetType="Button">
          <Setter Property="FontSize" Value="14"/>
          <Setter Property="FontWeight" Value="Bold"/>
          <Setter Property="Background">
            <Setter.Value>
              <LinearGradientBrush StartPoint="0,0.5" 
                                      EndPoint="1,0.5">
                <GradientStop Color="Green" Offset="0.0" />
                <GradientStop Color="White" Offset="0.9" />
              </LinearGradientBrush>

            </Setter.Value>
          </Setter>
        </Style>

Vous pouvez également appliquer un style à seulement certains contrôles d'un type spécifique en attribuant une clé au style et en spécifiant cette clé dans la propriété Style de votre contrôle. Pour plus d'informations sur les styles, consultez Application d'un style et création de modèles.

Création d'un modèle de contrôle

Un Style vous permet de définir des propriétés sur plusieurs contrôles à la fois, mais vous pouvez parfois souhaiter personnaliser l'apparence d'un Control au delà de ce que vous pouvez faire en créant un Style. Les classes qui héritent de la classe Control ont un ControlTemplate qui définit la structure et l'apparence d'un Control. La propriété Template d'un Control est publique, vous pouvez donc donner à un Control un ControlTemplate différent de sa valeur par défaut. Vous pouvez souvent spécifier un nouveau ControlTemplate pour un Control au lieu d'hériter d'un contrôle pour personnaliser l'apparence d'un Control.

Considérez le même contrôle commun, Button. Le comportement principal d'un Button est de permettre à une application de prendre des mesures lorsque l'utilisateur clique dessus. Par défaut, le Button dans WPF apparaît comme un rectangle affiché. En développant une application, vous pouvez souhaiter tirer parti du comportement d'un Button, à savoir, en gérant l'événement clic du bouton, mais vous pouvez modifier l'apparence du bouton au delà de ce que vous pouvez faire en modifiant les propriétés du bouton. Dans ce cas, vous pouvez créer un ControlTemplate.

L'exemple suivant crée un ControlTemplate pour un Button. Le ControlTemplate crée un Button avec des angles arrondis et un arrière-plan dégradé. Le ControlTemplate contient un Border dont l'Background est un LinearGradientBrush avec deux objets GradientStop. Le premier GradientStop utilise la liaison de données pour lier la propriété Color du GradientStop à la couleur d'arrière-plan du bouton. Lorsque vous définissez la propriété Background du Button, la couleur de cette valeur sera utilisée comme premier GradientStop. Pour plus d'informations sur la liaison de données, consultez Vue d'ensemble de la liaison de données. L'exemple crée également un Trigger qui modifie l'apparence du Button lorsque IsPressed a la valeur true.

    <!--Define a template that creates a gradient-colored button.-->
    <Style TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Border 
              x:Name="Border"  
              CornerRadius="20" 
              BorderThickness="1"
              BorderBrush="Black">
              <Border.Background>
                <LinearGradientBrush StartPoint="0,0.5" 
                                     EndPoint="1,0.5">
                  <GradientStop Color="{Binding Background.Color, 
                        RelativeSource={RelativeSource TemplatedParent}}" 
                                Offset="0.0" />
                  <GradientStop Color="White" Offset="0.9" />
                </LinearGradientBrush>
              </Border.Background>
              <ContentPresenter 
                Margin="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RecognizesAccessKey="True"/>
            </Border>
            <ControlTemplate.Triggers>
              <!--Change the appearance of
              the button when the user clicks it.-->
              <Trigger Property="IsPressed" Value="true">
                <Setter TargetName="Border" Property="Background">
                  <Setter.Value>
                    <LinearGradientBrush StartPoint="0,0.5" 
                                         EndPoint="1,0.5">
                      <GradientStop Color="{Binding Background.Color, 
                        RelativeSource={RelativeSource TemplatedParent}}" 
                                    Offset="0.0" />
                      <GradientStop Color="DarkSlateGray" Offset="0.9" />
                    </LinearGradientBrush>
                  </Setter.Value>
                </Setter>
              </Trigger>

            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

      <Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
              Background="Green">View message</Button>

System_CAPS_ICON_note.jpg Remarque

La propriété Background du Button doit être définie sur un SolidColorBrush pour que l'exemple fonctionne correctement.

Vous pouvez vous abonner à l'événement d'un contrôle en utilisant XAML ou du code, mais vous pouvez gérer uniquement un événement dans le code. L'exemple suivant montre comment s'abonner à l'événement Click de Button.

      <Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
        Background="Green">View message</Button>

            submit.Click += new RoutedEventHandler(submit_Click);

L'exemple suivant gère l'événement Click d'un Button.

        void submit_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
        }

La plupart des classes qui héritent de la classe Control ont la capacité de contenir du contenu riche. Par exemple, une Label peut contenir tout objet, comme une chaîne, une Image ou un Panel. Les classes suivantes fournissent la prise en charge pour le contenu riche et agissent comme classes de base pour la plupart des contrôles dans WPF.

Pour plus d'informations sur ces classes de base, consultez Modèle de contenu WPF.

Application d'un style et création de modèles
Contrôles par catégorie
Bibliothèque de contrôles
Vue d'ensemble des modèles de données
Vue d'ensemble de la liaison de données
Entrée
Activer une commande
Procédures pas à pas : création d'un bouton animé personnalisé
Personnalisation des contrôles

Afficher: