Hiërarchische gegevens binden en een hoofd-/detailsweergave maken met WinUI

Leer hoe je een meerlagige master/details-weergave van hiërarchische gegevens in WinUI kunt maken door itemsbesturingselementen te binden aan CollectionViewSource-exemplaren. In dit artikel wordt uitgelegd hoe u de markeringsextensie {x:Bind} gebruikt voor betere prestaties en de extensie voor markeringen van {Binding} wanneer flexibiliteit nodig is.

Een algemene structuur voor WinUI-apps is om naar verschillende detailpagina's te navigeren wanneer een gebruiker een selectie maakt in een hoofdlijst. Deze structuur is handig als u een uitgebreide visuele weergave van elk item op elk niveau in een hiërarchie wilt bieden. Een andere optie is om meerdere gegevensniveaus op één pagina weer te geven. Deze structuur is handig als u een paar eenvoudige lijsten wilt weergeven waarmee de gebruiker snel kan inzoomen op een interessant item. In dit artikel wordt beschreven hoe u deze interactie implementeert. De CollectionViewSource-exemplaren houden de huidige selectie op elk hiërarchisch niveau bij.

U maakt een weergave van een sportteamhiërarchie die is ingedeeld in lijsten voor competities, divisies en teams, en bevat een weergave met teamdetails. Wanneer u een item in een lijst selecteert, worden de volgende weergaven automatisch bijgewerkt.

Vereiste voorwaarden

In dit artikel wordt ervan uitgegaan dat u weet hoe u een eenvoudige WinUI-app maakt. Zie Een WinUI-app maken voor instructies voor het maken van uw eerste WinUI-app.

Het project maken

Maak een nieuwe Lege app, Verpakt (WinUI 3 in Desktop) project. Geef deze de naam MasterDetailsBinding.

Het gegevensmodel maken

Voeg een nieuwe klasse toe aan uw project, noem deze ViewModel.csen voeg deze code eraan toe. Deze klasse is uw bindingsbronklasse.

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

De weergave maken

Maak vervolgens de bindingsbronklasse beschikbaar vanuit de klasse die uw pagina met markeringen vertegenwoordigt. Voeg een eigenschap van het type LeagueList toe aan MainWindow.

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

Vervang ten slotte de inhoud van het bestand MainWindow.xaml door de volgende markeringen. Met deze markering declareert u drie CollectionViewSource-exemplaren en verbindt u deze in een keten. De volgende bedieningselementen kunnen vervolgens worden gekoppeld aan de juiste CollectionViewSource, afhankelijk van het niveau in de 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>

Wanneer u rechtstreeks verbinding maakt met de CollectionViewSource, impliceert u dat u wilt binden aan het huidige item in bindingen waar het pad niet kan worden gevonden in de verzameling zelf. U hoeft de CurrentItem eigenschap niet op te geven als het pad voor de binding, maar u kunt deze toevoegen als er sprake is van dubbelzinnigheid. De ContentControl die de teamweergave vertegenwoordigt, heeft zijn eigenschap Content gebonden aan de TeamsCollectionViewSource. Echter, de controles in de DataTemplate binden aan eigenschappen van de Team class omdat de CollectionViewSource automatisch het momenteel geselecteerde team uit de lijst met teams levert wanneer dat nodig is.

Zie ook

• Overzicht van gegevensbinding
• Gedetailleerde gegevensbinding