Lier des données hiérarchiques et créer une vue maître/détails avec WinUI

Découvrez comment créer une vue maître/détails multiniveau des données hiérarchiques dans WinUI en liant des contrôles d’éléments à des instances CollectionViewSource . Cet article explique comment utiliser l’extension de balisage {x :Bind} pour améliorer les performances et l’extension de balisage {Binding} lorsque la flexibilité est nécessaire.

Une structure courante pour les applications WinUI consiste à accéder à différentes pages de détails lorsqu’un utilisateur effectue une sélection dans une liste principale. Cette structure est utile lorsque vous souhaitez fournir une représentation visuelle enrichie de chaque élément à chaque niveau d’une hiérarchie. Une autre option consiste à afficher plusieurs niveaux de données sur une seule page. Cette structure est utile lorsque vous souhaitez afficher quelques listes simples qui permettent à l’utilisateur d’explorer rapidement un élément d’intérêt. Cet article explique comment implémenter cette interaction. Les instances CollectionViewSource effectuent le suivi de la sélection actuelle à chaque niveau hiérarchique.

Vous créez une vue d’une hiérarchie d’équipe sportive qui est organisée en listes pour les ligues, les divisions et les équipes, et inclut une vue des détails de l’équipe. Lorsque vous sélectionnez un élément dans une de ces listes, les affichages suivants sont automatiquement actualisés.

Prérequis

Cet article part du principe que vous savez comment créer une application WinUI de base. Pour obtenir des instructions sur la création de votre première application WinUI, consultez Créer une application WinUI.

Créer le projet

Créez un projet Blank App, Packaged (WinUI 3 in Desktop). Nommez-le « MasterDetailsBinding ».

Créer le modèle de données

Ajoutez une nouvelle classe à votre projet, nommez-la ViewModel.cs et ajoutez-lui ce code. Cette classe est votre classe source de liaison.

using System.Collections.Generic;
using System.Linq;

namespace MasterDetailsBinding
{
    public class Team
    {
        public string Name { get; set; }
        public int Wins { get; set; }
        public int Losses { get; set; }
    }

    public class Division
    {
        public string Name { get; set; }
        public IEnumerable<Team> Teams { get; set; }
    }

    public class League
    {
        public string Name { get; set; }
        public IEnumerable<Division> Divisions { get; set; }
    }

    public class LeagueList : List<League>
    {
        public LeagueList()
        {
            AddRange(GetLeague().ToList());
        }

        public IEnumerable<League> GetLeague()
        {
            return from x in Enumerable.Range(1, 2)
                   select new League
                   {
                       Name = "League " + x,
                       Divisions = GetDivisions(x).ToList()
                   };
        }

        public IEnumerable<Division> GetDivisions(int x)
        {
            return from y in Enumerable.Range(1, 3)
                   select new Division
                   {
                       Name = string.Format("Division {0}-{1}", x, y),
                       Teams = GetTeams(x, y).ToList()
                   };
        }

        public IEnumerable<Team> GetTeams(int x, int y)
        {
            return from z in Enumerable.Range(1, 4)
                   select new Team
                   {
                       Name = string.Format("Team {0}-{1}-{2}", x, y, z),
                       Wins = 25 - (x * y * z),
                       Losses = x * y * z
                   };
        }
    }
}

Créer l’affichage

Ensuite, exposez la classe de source de liaison à partir de la classe qui représente votre page de balisage. Ajoutez une propriété de type LeagueList à MainWindow.

namespace MasterDetailsBinding
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ViewModel = new LeagueList();
        }
        public LeagueList ViewModel { get; set; }
    }
}

Enfin, remplacez le contenu du fichier MainWindow.xaml par le balisage suivant. Ce balisage déclare trois instances CollectionViewSource et les lie ensemble dans une chaîne. Les contrôles suivants peuvent être liés au CollectionViewSource appropriée, selon son niveau dans la hiérarchie.

<Window
    x:Class="MasterDetailsBinding.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MasterDetailsBinding"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.Resources>
            <CollectionViewSource x:Name="Leagues"
                Source="{x:Bind ViewModel}"/>
            <CollectionViewSource x:Name="Divisions"
                Source="{Binding Divisions, Source={StaticResource Leagues}}"/>
            <CollectionViewSource x:Name="Teams"
                Source="{Binding Teams, Source={StaticResource Divisions}}"/>
    
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="15"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
            <Style TargetType="ListBox">
                <Setter Property="FontSize" Value="15"/>
            </Style>
            <Style TargetType="ContentControl">
                <Setter Property="FontSize" Value="15"/>
            </Style>
        </Grid.Resources>

        <StackPanel Orientation="Horizontal">

            <!-- All Leagues view -->
            <StackPanel Margin="5">
                <TextBlock Text="All Leagues"/>
                <ListBox ItemsSource="{Binding Source={StaticResource Leagues}}" 
                         DisplayMemberPath="Name"/>
            </StackPanel>

            <!-- League/Divisions view -->
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name, Source={StaticResource Leagues}}"/>
                <ListBox ItemsSource="{Binding Source={StaticResource Divisions}}" 
                         DisplayMemberPath="Name"/>
            </StackPanel>

            <!-- Division/Teams view -->
            <StackPanel Margin="5">
                <TextBlock Text="{Binding Name, Source={StaticResource Divisions}}"/>
                <ListBox ItemsSource="{Binding Source={StaticResource Teams}}" 
                         DisplayMemberPath="Name"/>
            </StackPanel>

            <!-- Team view -->
            <ContentControl Content="{Binding Source={StaticResource Teams}}">
                <ContentControl.ContentTemplate>
                    <DataTemplate>
                        <StackPanel Margin="5">
                            <TextBlock Text="{Binding Name}" 
                                       FontSize="15" FontWeight="Bold"/>
                            <StackPanel Orientation="Horizontal" Margin="10,10">
                                <TextBlock Text="Wins:" Margin="0,0,5,0"/>
                                <TextBlock Text="{Binding Wins}"/>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" Margin="10,0">
                                <TextBlock Text="Losses:" Margin="0,0,5,0"/>
                                <TextBlock Text="{Binding Losses}"/>
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ContentControl.ContentTemplate>
            </ContentControl>
        </StackPanel>
    </Grid>
</Window>

Lorsque vous liez directement à CollectionViewSource, vous impliquez que vous souhaitez établir une liaison à l’élément actif dans les liaisons où le chemin d’accès est introuvable sur la collection elle-même. Vous n’avez pas besoin de spécifier la propriété CurrentItem comme chemin d'accès explicite pour la liaison de données, mais vous pouvez l'ajouter s'il y a une incertitude. Par exemple, contentControl représentant l’affichage d’équipe a sa propriété Content liée au .TeamsCollectionViewSource Cependant, les contrôles de la classe DataTemplate sont liés aux propriétés de la classe Team, car la classe CollectionViewSource fournit automatiquement l’équipe actuellement sélectionnée à partir de la liste des équipes dès que nécessaire.

Voir aussi

• Vue d’ensemble de la liaison de données
• Présentation détaillée de la liaison de données