Partager via

Contrôles

  • Article

Windows Presentation Foundation (WPF) est fourni avec la plupart des composants d’interface utilisateur courants utilisés dans presque toutes les applications Windows, telles que Button, Label, TextBox, Menuet ListBox. Historiquement, ces objets ont été appelés contrôles. Bien que le Kit de développement logiciel (SDK) WPF continue d’utiliser le terme « contrôle » pour désigner de manière lâche 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, ce qui permet au consommateur d’un contrôle de modifier radicalement l’apparence du contrôle sans avoir à créer de sous-classe. Cette rubrique explique comment les contrôles (à la fois ceux qui héritent de la classe Control et ceux qui ne le font pas) sont couramment utilisés dans WPF.

Création d’une instance d’un contrôle

Vous pouvez ajouter un contrôle à une application à l’aide du langage XAML (Extensible Application Markup Language) ou du code. L’exemple suivant montre comment créer une application simple qui demande à un utilisateur son prénom et son nom. 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. Par souci 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 indiqué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);
}

Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button

Sub 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)


End Sub

Modification de l’apparence d’un contrôle

Il est courant de modifier l’apparence d’un contrôle pour s’adapter à l’apparence de votre application. Vous pouvez modifier l’apparence d’un contrôle en effectuant l’une des opérations suivantes, en fonction de ce que vous souhaitez accomplir :

  • Modifiez la valeur d’une propriété du contrôle.

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

  • Créez un nouveau ControlTemplate pour le contrôle.

Changement de la valeur de propriété d’un contrôle

De nombreux contrôles ont des propriétés qui vous permettent de modifier la façon dont le contrôle apparaît, par exemple la Background d’un Button. Vous pouvez définir les propriétés de valeur dans XAML et dans le code. L’exemple suivant définit les propriétés Background, FontSizeet 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;

Dim buttonBrush As 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 possibilité de spécifier l’apparence des contrôles en gros, au lieu de définir des propriétés sur chaque instance de l’application, en créant un Style. L’exemple suivant crée une Style appliquée à chaque Button dans l’application. Les définitions de Style sont généralement définies dans XAML dans un(e) ResourceDictionary, comme la propriété Resources du 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 à certains contrôles d’un type spécifique en affectant 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 ControlTemplate

Un Style vous permet de définir des propriétés sur plusieurs contrôles à la fois, mais vous pouvez parfois 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, afin de personnaliser l’apparence d’un Control.

Considérez le contrôle très courant Button. Le comportement principal d’un Button consiste à permettre à une application d’effectuer une action lorsque l’utilisateur clique dessus. Par défaut, le Button dans WPF apparaît sous la forme d’un rectangle en relief. Lors du développement d’une application, vous souhaiterez peut-être tirer parti du comportement d’un Button, c’est-à-dire en gérant l’événement click 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 nouveau 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 la Background est un LinearGradientBrush avec deux objets GradientStop. La première GradientStop utilise la liaison de données pour lier la propriété Color du GradientStop à la couleur de l’arrière-plan du bouton. Lorsque vous définissez la propriété Background du Button, la couleur de cette valeur sera utilisée comme première 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 de l'Button lorsque IsPressed est 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>

Remarque

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

Abonnement aux événements

Vous pouvez vous abonner à l’événement d’un contrôle à l’aide de XAML ou de code, mais vous ne pouvez gérer qu’un événement dans le code. L’exemple suivant montre comment s’abonner à l’événement Click d’un Button.

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

submit.Click += new RoutedEventHandler(submit_Click);

AddHandler submit.Click, AddressOf 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);
}

Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)

End Sub

Contenu riche dans les contrôles

La plupart des classes qui héritent de la classe Control ont la capacité de contenir du contenu enrichi. Par exemple, un Label peut contenir n’importe quel objet, tel qu’une chaîne, un Imageou un Panel. Les classes suivantes prennent en charge le contenu enrichi et agissent en tant que 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.

Voir aussi