Vue d’ensemble de la liaison de données Windows

Cette rubrique vous montre comment lier un contrôle (ou un autre élément d’interface utilisateur) à un seul élément ou lier un contrôle d’éléments à une collection d’éléments dans une application sdk d’application Windows. En outre, nous montrons comment contrôler le rendu des éléments, implémenter une vue de détails basée sur une sélection et convertir des données pour l’affichage. Pour obtenir des informations plus détaillées, consultez Présentation détaillée de la liaison de données.

Conditions préalables

Cette rubrique part du principe que vous savez comment créer une application sdk d’application Windows de base. Pour obtenir des instructions sur la création de votre première application windows App SDK, consultez Créer votre premier projet WinUI 3 (Kit de développement logiciel (SDK) d’application Windows.

Créer le projet

Créez un projet C# Blank App, Packaged (WinUI 3 in Desktop). Nommez-le « Démarrage rapide ».

Liaison à un seul élément

Chaque liaison se compose d’une cible de liaison et d’une source de liaison. En règle générale, la cible est une propriété d’un contrôle ou d’un autre élément d’interface utilisateur, et la source est une propriété d’une instance de classe (un modèle de données ou un modèle de vue). Cet exemple montre comment lier un contrôle à un seul élément. La cible est la propriété Text d’un TextBlock. La source est une instance d’une classe simple nommée Recording qui représente un enregistrement audio. Examinons d’abord la classe.

Ajoutez une nouvelle classe à votre projet et nommez la classe Recording.

namespace Quickstart
{
    public class Recording
    {
        public string ArtistName { get; set; }
        public string CompositionName { get; set; }
        public DateTime ReleaseDateTime { get; set; }
        public Recording()
        {
            ArtistName = "Wolfgang Amadeus Mozart";
            CompositionName = "Andante in C for Piano";
            ReleaseDateTime = new DateTime(1761, 1, 1);
        }
        public string OneLineSummary
        {
            get
            {
                return $"{CompositionName} by {ArtistName}, released: "
                    + ReleaseDateTime.ToString("d");
            }
        }
    }
    public class RecordingViewModel
    {
        private Recording defaultRecording = new Recording();
        public Recording DefaultRecording { get { return defaultRecording; } }
    }
}

Ensuite, exposez la classe de source de liaison à partir de la classe qui représente votre fenêtre de balisage. Pour ce faire, nous ajoutons une propriété de type RecordingViewModel à MainWindow.xaml.cs.

namespace Quickstart
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
            ViewModel = new RecordingViewModel();
        }
        public RecordingViewModel ViewModel{ get; set; }
    }
}

La dernière étape consiste à lier un TextBlock à la propriété ViewModel.DefaultRecording.OneLineSummary.

<Window x:Class="Quickstart.MainWindow" ... >
    <Grid>
        <TextBlock Text="{x:Bind ViewModel.DefaultRecording.OneLineSummary}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center"/>
    </Grid>
</Window>

Voici le résultat.

de bloc de texte

Liaison à une collection d’éléments

Un scénario courant consiste à établir une liaison à une collection d’objets métier. En C#, la classe ObservableCollection générique<T> est un bon choix de collection pour la liaison de données, car elle implémente les interfaces INotifyPropertyChanged et INotifyCollectionChanged. Ces interfaces fournissent une notification de modification aux liaisons lorsque des éléments sont ajoutés ou supprimés ou qu’une propriété de la liste elle-même change. Si vous souhaitez que vos contrôles liés soient mis à jour avec des modifications apportées aux propriétés des objets de la collection, l’objet métier doit également implémenter INotifyPropertyChanged. Pour plus d’informations, voir Présentation détaillée de la liaison de données.

Cet exemple suivant lie un ListView à une collection d’objets Recording. Commençons par ajouter la collection à notre modèle d’affichage. Ajoutez simplement ces nouveaux membres à la classe RecordingViewModel.

public class RecordingViewModel
{
    ...
    private ObservableCollection<Recording> recordings = new ObservableCollection<Recording>();
    public ObservableCollection<Recording> Recordings{ get{ return recordings; } }
    public RecordingViewModel()
    {
        recordings.Add(new Recording(){ ArtistName = "Johann Sebastian Bach",
            CompositionName = "Mass in B minor", ReleaseDateTime = new DateTime(1748, 7, 8) });
        recordings.Add(new Recording(){ ArtistName = "Ludwig van Beethoven",
            CompositionName = "Third Symphony", ReleaseDateTime = new DateTime(1805, 2, 11) });
        recordings.Add(new Recording(){ ArtistName = "George Frideric Handel",
            CompositionName = "Serse", ReleaseDateTime = new DateTime(1737, 12, 3) });
    }
}

Ensuite, liez une ListView à la propriété .

<Window x:Class="Quickstart.MainWindow" ... >
    <Grid>
        <ListView ItemsSource="{x:Bind ViewModel.Recordings}"
        HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

Nous n’avons pas encore fourni de modèle de données pour la classe . Par conséquent, le meilleur possible pour l’infrastructure d’interface utilisateur consiste à appeler ToString pour chaque élément duListView . L’implémentation par défaut de ToString consiste à retourner le nom du type.

Pour résoudre ce problème, nous pouvons remplacer ToString pour retourner la valeur de OneLineSummary, ou nous pouvons fournir un modèle de données. L’option de modèle de données est une solution plus habituelle et une solution plus flexible. Vous spécifiez un modèle de données à l’aide de la propriété ContentTemplate d’un contrôle de contenu ou de la propriété ItemTemplate d’un contrôle d’éléments. Voici deux façons de concevoir un modèle de données pour Recording avec une illustration du résultat.

<ListView ItemsSource="{x:Bind ViewModel.Recordings}"
HorizontalAlignment="Center" VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Recording">
            <TextBlock Text="{x:Bind OneLineSummary}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

<ListView ItemsSource="{x:Bind ViewModel.Recordings}"
HorizontalAlignment="Center" VerticalAlignment="Center">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Margin="6">
                <SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>
                <StackPanel>
                    <TextBlock Text="{x:Bind ArtistName}" FontWeight="Bold"/>
                    <TextBlock Text="{x:Bind CompositionName}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Pour plus d’informations sur la syntaxe XAML, consultez Créer une interface utilisateur avec xaml. Pour plus d'informations sur la disposition du contrôle, consultez Définir des dispositions avec XAML.

Ajout d’une vue de détails

Vous pouvez choisir d'afficher tous les détails des objets Recording dans les éléments ListView . Mais cela occupe beaucoup d’espace. Au lieu de cela, vous pouvez afficher suffisamment de données dans l’élément pour l’identifier, puis, lorsque l’utilisateur effectue une sélection, vous pouvez afficher tous les détails de l’élément sélectionné dans un élément distinct de l’interface utilisateur appelée vue détails. Cette disposition est également appelée vue maître/détails, ou vue liste/détails.

Il y a deux façons de procéder. Vous pouvez lier la vue des détails à la propriété SelectedItem de la ListView. Vous pouvez également utiliser un CollectionViewSource, auquel cas vous liez à la fois le ListView et l’affichage des détails à l'CollectionViewSource (cela prend en charge l’élément actuellement sélectionné pour vous). Les deux techniques sont présentées ci-dessous, et elles donnent tous les deux les mêmes résultats (illustrés dans l’illustration).

Remarque

Jusqu’à présent dans cette rubrique, nous n’avons utilisé que l’extension de balisage {x :Bind}, mais les deux techniques que nous allons montrer ci-dessous nécessitent l’extension de balisage plus flexible (mais moins performante) l’extension de balisage {Binding}.

Voici tout d'abord la technique SelectedItem. Pour une application C#, la seule modification nécessaire est apportée au balisage.

<Window x:Class="Quickstart.MainWindow" ... >
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <ListView x:Name="recordingsListView" ItemsSource="{x:Bind ViewModel.Recordings}">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Recording">
                        <StackPanel Orientation="Horizontal" Margin="6">
                            <SymbolIcon Symbol="Audio" Margin="0,0,12,0"/>
                            <StackPanel>
                                <TextBlock Text="{x:Bind CompositionName}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <StackPanel DataContext="{Binding SelectedItem, ElementName=recordingsListView}"
            Margin="0,24,0,0">
                <TextBlock Text="{Binding ArtistName}"/>
                <TextBlock Text="{Binding CompositionName}"/>
                <TextBlock Text="{Binding ReleaseDateTime}"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

Pour la technique CollectionViewSource, commencez par ajouter un CollectionViewSource en tant que ressource du Gridde niveau supérieur.

<Grid.Resources>
    <CollectionViewSource x:Name="RecordingsCollection" Source="{x:Bind ViewModel.Recordings}"/>
</Grid.Resources>

Remarque

La classe Window dans WinUI n’a pas de propriété Resources. Vous pouvez ajouter le CollectionViewSource à l’élément Grid de niveau supérieur (ou à d’autres éléments d’interface utilisateur parent comme StackPanel). Si vous travaillez dans un Page, vous pouvez ajouter la CollectionViewSource au Page.Resources.

Ensuite, ajustez les liaisons sur la ListView (qui n’a plus besoin d’être nommée) et dans la vue de détails pour utiliser la CollectionViewSource. Notez qu’en liant la vue des détails directement à CollectionViewSource, vous indiquez que vous souhaitez lier l’élément actuel dans les liaisons où le chemin d’accès ne peut pas être trouvé dans la collection elle-même. Il n’est pas nécessaire de préciser la propriété CurrentItem comme chemin pour la liaison, mais vous pouvez le faire pour éviter toute ambiguïté.

...
<ListView ItemsSource="{Binding Source={StaticResource RecordingsCollection}}">
...
<StackPanel DataContext="{Binding Source={StaticResource RecordingsCollection}}" ...>
...

Et voici le résultat identique dans chaque cas.

Mise en forme ou conversion de valeurs de données pour l’affichage

Il existe un problème avec le rendu ci-dessus. La propriété ReleaseDateTime n’est pas seulement une date, mais une DateTime. Il est donc affiché avec plus de précision que nous n’en avons besoin. Une solution consiste à ajouter une propriété de chaîne à la classe Recording qui retourne l’équivalent de ReleaseDateTime.ToString("d"). Le nommage de cette propriété ReleaseDate indiquerait qu’elle retourne une date et non une date et une heure. En la nommant ReleaseDateAsString, on indique plutôt qu'elle renvoie à une chaîne.

Une solution plus flexible consiste à utiliser quelque chose appelé convertisseur de valeur. Voici un exemple de création de votre propre convertisseur de valeur. Ajoutez le code ci-dessous à votre fichier de code source Recording.cs.

public class StringFormatter : Microsoft.UI.Xaml.Data.IValueConverter
{
    // This converts the value object to the string to display.
    // This will work with most simple types.
    public object Convert(object value, Type targetType,
        object parameter, string language)
    {
        // Retrieve the format string and use it to format the value.
        string formatString = parameter as string;
        if (!string.IsNullOrEmpty(formatString))
        {
            return string.Format(formatString, value);
        }

        // If the format string is null or empty, simply
        // call ToString() on the value.
        return value.ToString();
    }

    // No need to implement converting back on a one-way binding
    public object ConvertBack(object value, Type targetType,
        object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

À présent, nous pouvons ajouter une instance de StringFormatter en tant que ressource et l’utiliser dans la liaison du TextBlock qui affiche la propriété ReleaseDateTime.

<Grid.Resources>
    ...
    <local:StringFormatter x:Key="StringFormatterValueConverter"/>
</Grid.Resources>
...
<TextBlock Text="{Binding ReleaseDateTime,
    Converter={StaticResource StringFormatterValueConverter},
    ConverterParameter=Released: \{0:d\}}"/>
...

Comme vous pouvez le voir ci-dessus, pour la flexibilité de mise en forme, nous utilisons le balisage pour passer une chaîne de format dans le convertisseur à l’aide du paramètre de convertisseur. Dans l’exemple de code présenté dans cette rubrique, le convertisseur de valeurs C# utilise ce paramètre.

Voici le résultat.

Contenu connexe

• Liaison de données