Vue d'ensemble des contrôles

Article
08/22/2008

Mise à jour : novembre 2007

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 signifier 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 utilisés couramment dans WPF.

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

Vous pouvez ajouter un contrôle à une application en utilisant 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 la concision, la création de la Grid, grid1 a été exclue de l'exemple. La grid1 a les mêmes définitions de colonne et de ligne que celles illustrées dans l'exemple XAML précédent.

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 'CreateControls

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

}

Modification de l'apparence d'un contrôle

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.

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

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>

Remarque :
La propriété Background du 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 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>

AddHandler submit.Click, AddressOf submit_Click

submit.Click += new RoutedEventHandler(submit_Click);

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

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

End Sub 'submit_Click

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

Contenu riche dans les contrôles

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.

ContentControl--Quelques exemples des classes qui héritent de cette classe sont Label, Button et ToolTip.
ItemsControl--Quelques exemples des classes qui héritent de cette classe sont ListBox, Menu et StatusBar.
HeaderedContentControl--Quelques exemples des classes qui héritent de cette classe sont TabItem, GroupBox et Expander.
HeaderedItemsControl--Quelques exemples des classes qui héritent de cette classe sont MenuItem, TreeViewItem et ToolBar.

Pour plus d'informations sur ces classes, consultez Vue d'ensemble du modèle de contenu des contrôles.

Voir aussi

Partager via

Vue d'ensemble des contrôles

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

Modification de l'apparence d'un contrôle

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

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

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

Abonnement aux événements

Contenu riche dans les contrôles

Voir aussi

Tâches

Concepts

Référence

Autres ressources

Ressources supplémentaires