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. Par le passé, ces objets étaient connus sous le nom de 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 Control classe 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 changer radicalement l’apparence du contrôle sans devoir créer une sous-classe. Cette rubrique traite de la façon dont les contrôles (qui héritent ou non de la classe Control) 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 d’entrer son nom et son pré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 présentées dans l’exemple précédent en XAML.

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

Changement de l’apparence d’un contrôle

Vous pouvez couramment être amené à changer l’apparence d’un contrôle pour ajuster l’aspect de votre application. Vous pouvez changer 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é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 leur apparence, telles que le Background d’un 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;

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 permet 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 qui est appliqué à chaque Button dans l’application. Les définitions de Style sont généralement définies en XAML dans un 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 assignant 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 il peut arriver que vous souhaitiez 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 étant public, vous pouvez donner à un Control un ControlTemplate qui est 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 est de permettre à une application de prendre des mesures quand l’utilisateur clique dessus. Par défaut, le Button dans WPF apparaît comme un rectangle en relief. Durant le développement d’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 changer 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 le 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 de l’arrière-plan du bouton. Quand vous définissez la propriété Background du Button, la couleur de cette valeur est 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 change l’apparence du Button quand 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 du Button doit être définie sur un SolidColorBrush pour que l’exemple fonctionne correctement.

Abonnement à des événements

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 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 peuvent contenir du contenu riche. Par exemple, un Label peut contenir n’importe quel objet, tel qu’une chaîne, un Image ou un Panel. Les classes suivantes assurent la prise en charge du 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.

Voir aussi