Binden hierarchischer Daten und Erstellen einer Master-/Detailansicht mit WinUI

Erfahren Sie, wie Sie eine Mehrebenen-Master-/Detailansicht von hierarchischen Daten in WinUI erstellen, indem Sie Elementsteuerelemente an CollectionViewSource-Instanzen binden. In diesem Artikel wird erläutert, wie Sie die {x:Bind}-Markuperweiterung für eine bessere Leistung und die {Binding}-Markuperweiterung verwenden, wenn Flexibilität erforderlich ist.

Eine allgemeine Struktur für WinUI-Apps besteht darin, zu verschiedenen Detailseiten zu navigieren, wenn ein Benutzer eine Auswahl in einer Masterliste vorgibt. Diese Struktur ist nützlich, wenn Sie eine umfassende visuelle Darstellung jedes Elements auf jeder Ebene in einer Hierarchie bereitstellen möchten. Eine weitere Möglichkeit ist die Anzeige von mehreren Datenebenen auf einer einzelnen Seite. Diese Struktur ist nützlich, wenn Sie einige einfache Listen anzeigen möchten, mit denen der Benutzer schnell einen Drilldown zu einem interessanten Element ausführen kann. In diesem Artikel wird beschrieben, wie Sie diese Interaktion implementieren. Die CollectionViewSource-Instanzen verfolgen die aktuelle Auswahl auf jeder hierarchischen Ebene.

Sie erstellen eine Ansicht einer Sportteamhierarchie, die in Listen für Ligaen, Divisionen und Teams organisiert ist und eine Teamdetailseite enthält. Wenn Sie ein Element in einer Liste auswählen, werden die nachfolgenden Ansichten automatisch aktualisiert.

Voraussetzungen

In diesem Artikel wird davon ausgegangen, dass Sie wissen, wie Sie eine einfache WinUI-App erstellen. Anweisungen zum Erstellen Ihrer ersten WinUI-App finden Sie unter Erstellen einer WinUI-App.

Erstellen des Projekts

Erstellen Sie ein neues Projekt vom Typ Leere App, Gepackt (WinUI 3 in Desktop). Weisen Sie ihm den Namen „MasterDetailsBinding“ zu.

Erstellen des Datenmodells

Fügen Sie Ihrem Projekt eine neue Klasse hinzu, nennen Sie sie ViewModel.cs, und fügen Sie ihr diesen Code hinzu. Diese Klasse ist Ihre Bindungsquellklasse.

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

Erstellen der Ansicht

Machen Sie als Nächstes die Bindungsquellklasse aus der Klasse verfügbar, die die Markupseite darstellt. Fügen Sie eine Eigenschaft vom Typ LeagueList " MainWindow" hinzu.

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

Ersetzen Sie schließlich den Inhalt der Datei "MainWindow.xaml " durch das folgende Markup. Dieses Markup deklariert drei CollectionViewSource-Instanzen und bindet sie in einer Kette. Die nachfolgenden Steuerelemente können dann abhängig von der Hierarchieebene an die entsprechende CollectionViewSource-Instanz gebunden werden.

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

Wenn Sie eine direkte Bindung an "CollectionViewSource" herstellen, implizieren Sie, dass Sie eine Bindung an das aktuelle Element in Bindungen herstellen möchten, bei denen der Pfad in der Sammlung selbst nicht gefunden werden kann. Sie müssen die CurrentItem Eigenschaft nicht als Pfad für die Bindung angeben, obwohl Sie sie hinzufügen können, wenn eine Mehrdeutigkeit vorhanden ist. Beispielsweise hat das ContentControl, das Die Steuerelemente in DataTemplate werden jedoch an Eigenschaften der Team-Klasse gebunden, da CollectionViewSource bei Bedarf automatisch das aktuell aus der Teamliste ausgewählte Team liefert.

Weitere Informationen

• Übersicht über Datenbindung
• Datenbindung im Detail