TOC

This article is currently in the process of being translated into French (~54% done).

Les contrôles utilisateurs et les contrôles personnalisés:

Créer et utiliser un contrôle utilisateur (UserControl)

Les contrôles utilisateurs, représentés en WPF par la classe UserControl, consistent à regrouper le balisage et le code en créant un conteneur réutilisable qui, avec la même interface et les mêmes fonctionnalités, pourra être utilisé à différents endroits et même par plusieurs applications.

Un contrôle utilisateur fonctionne de la même manière qu'une fenêtre WPF - une zone où vous pouvez placer des contrôles, puis un fichier Code-behind vous permettant d'interagir avec ces contrôles. Le fichier qui contient le contrôle utilisateur se termine également par .xaml, et le Code-behind par .xaml.cs, tout comme une fenêtre. Les balises de départ sont néanmoins un peu différentes :

<UserControl x:Class="WpfTutorialSamples.User_Controls.LimitedInputUserControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     mc:Ignorable="d"
     d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
   
    </Grid>
</UserControl>

Rien de très étrange cependant - une balise UserControl remplace la balise Window, et on trouve les propriétés DesignHeight et DesignWidth, qui déterminent la taille du contrôle utilisateur lors de sa création (lorsque celui-ci sera implémenté, sa taille sera déterminée par l'élément qui contiendra le contrôle utilisateur). Vous remarquerez également des changements dans le Code-behind, où la classe du contrôle hérite de UserControl et non de Window.

Créer un contrôle utilisateur

Ajoutez un contrôle utilisateur à votre projet de la même manière que vous ajouteriez une nouvelle fenêtre, en faisant un clic droit sur le projet ou sur le dossier dans lequel vous souhaitez l'ajouter, comme représenté sur cette image (il est possible que l'interface ne soit pas exactement la même, en fonction de la version de Visual Studio que vous utilisez) :

Dans cet article, nous allons créer un contrôle utilisateur très utile qui va nous permettre de limiter le nombre de caractères qui peuvent être saisis dans une TextBox, tout en montrant à l'utilisateur combien de caractères ont été saisis et combien peuvent encore être saisis. Ce contrôle est très facile à mettre en oeuvre, et est utilisé dans de nombreuses applications web, comme Twitter par exemple. Il serait simple d'ajouter cette fonctionnalité à une fenêtre spécifique, mais comme il s'agit d'une fonctionnalité qui sera utilisée à plusieurs endroits de l'application, il paraît cohérent dans ce cas de créer un contrôle utilisateur réutilisable.

Avant de se plonger dans le code, regardons le résultat de ce que nous souhaitons faire :

Voici le code pour le contrôle utilisateur en lui-même :

<UserControl x:Class="WpfTutorialSamples.User_Controls.LimitedInputUserControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     mc:Ignorable="d"
     d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>      
<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Content="{Binding Title}" />
<Label Grid.Column="1">
    <StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ElementName=txtLimitedInput, Path=Text.Length}" />
<TextBlock Text="/" />
<TextBlock Text="{Binding MaxLength}" />
    </StackPanel>
</Label>
<TextBox MaxLength="{Binding MaxLength}" Grid.Row="1" Grid.ColumnSpan="2" Name="txtLimitedInput" ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
    </Grid>
</UserControl>
using System;
using System.Windows.Controls;

namespace WpfTutorialSamples.User_Controls
{
    public partial class LimitedInputUserControl : UserControl
    {
public LimitedInputUserControl()
{
    InitializeComponent();
    this.DataContext = this;
}

public string Title { get; set; }

public int MaxLength { get; set; }
    }
}

The markup is pretty straight forward: A Grid, with two columns and two rows. The upper part of the Grid contains two labels, one showing the title and the other one showing the stats. Each of them use data binding for all of the information needed - the Title and MaxLength comes from the Code-behind properties, which we have defined in as regular properties on a regular class.

The current character count is obtained by binding to the Text.Length property directly on the TextBox control, which uses the lower part of the user control. The result can be seen on the screenshot above. Notice that because of all these bindings, we don't need any C# code to update the labels or set the MaxLength property on the TextBox - instead, we just bind directly to the properties.

Consuming/using the User Control

With the above code in place, all we need is to consume (use) the User control within our Window. We'll do that by adding a reference to the namespace the UserControl lives in, in the top of the XAML code of your Window:

xmlns:uc="clr-namespace:WpfTutorialSamples.User_Controls"

After that, we can use the uc prefix to add the control to our Window like it was any other WPF control:

<uc:LimitedInputUserControl Title="Enter title:" MaxLength="30" Height="50" />

Notice how we use the Title and MaxLength properties directly in the XAML. Here's the full code sample for our window:

<Window x:Class="WpfTutorialSamples.User_Controls.LimitedInputSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uc="clr-namespace:WpfTutorialSamples.User_Controls"
Title="LimitedInputSample" Height="200" Width="300">
    <Grid Margin="10">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<uc:LimitedInputUserControl Title="Enter title:" MaxLength="30" Height="50" />
<uc:LimitedInputUserControl Title="Enter description:" MaxLength="140" Grid.Row="1" />

    </Grid>
</Window>

With that, we can reuse this entire piece of functionality in a single line of code, as illustrated in this example where we have the limited text input control two times. As already shown, the final result looks like this:

Summary

Placing commonly used interfaces and functionality in User Controls is highly recommended, and as you can see from the above example, they are very easy to create and use.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!