Svázat hierarchická data a vytvořit zobrazení master/detailů pomocí WinUI

Zjistěte, jak vytvořit víceúrovňové zobrazení master/details hierarchických dat ve WinUI vazbou ovládacích prvků položek na instance CollectionViewSource . Tento článek vysvětluje, jak používat rozšíření značek {x:Bind} pro lepší výkon a rozšíření značek {Binding} v případě potřeby flexibility.

Jednou z běžných struktur pro aplikace WinUI je přechod na různé stránky podrobností, když uživatel provede výběr v hlavním seznamu. Tato struktura je užitečná, když chcete poskytnout bohatou vizuální reprezentaci každé položky na každé úrovni v hierarchii. Další možností je zobrazení více úrovní dat na jedné stránce. Tato struktura je užitečná, když chcete zobrazit několik jednoduchých seznamů, které uživateli umožňují rychle přejít k podrobnostem položky, které vás zajímají. Tento článek popisuje, jak tuto interakci implementovat. Instance CollectionViewSource sledují aktuální výběr na jednotlivých hierarchických úrovních.

Vytvoříte zobrazení hierarchie sportovních týmů, která je uspořádaná do seznamů lig, divizí a týmů a obsahuje zobrazení podrobností o týmu. Když vyberete položku z libovolného seznamu, následná zobrazení se automaticky aktualizují.

Návod

Také se podívejte na ukázku Master/detail UWP.

Požadavky

Tento článek předpokládá, že víte, jak vytvořit základní aplikaci WinUI. Pokyny k vytvoření první aplikace WinUI najdete v tématu Vytvoření aplikace WinUI.

Vytvoření projektu

Vytvořte nový projekt Zabalená prázdná aplikace (WinUI 3 v Desktopu). Pojmenujte ho MasterDetailsBinding.

Vytvoření datového modelu

Přidejte do projektu novou třídu, pojmenujte ji ViewModel.cs a přidejte do něj tento kód. Tato třída je vaše zdrojová třída pro vazbu.

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

Vytvořte zobrazení

Dále zpřístupněte zdrojovou třídu vazby z třídy, která představuje vaši stránku značkovacího jazyka. Přidejte vlastnost typu LeagueList do MainWindow.

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

Nakonec nahraďte obsah souboru MainWindow.xaml následujícím kódem. Tento kód deklaruje tři instance CollectionViewSource a spojuje je dohromady v řetězu. Následující ovládací prvky se pak můžou napojit na příslušnou CollectionViewSource, v závislosti na její úrovni v hierarchii.

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

Když se připojíte přímo na CollectionViewSource, znamená to, že se připojíte k aktuální položce ve vazbách, kde není cesta nalezena v samotné kolekci. Nepotřebujete specifikovat vlastnost CurrentItem jako cestu ke svázání, ačkoli ji můžete přidat, pokud je potřeba vyřešit nějakou nejednoznačnost. Například ContentControl, který reprezentuje zobrazení týmu, má vlastnost Content svázanou s TeamsCollectionViewSource. Ovládací prvky v DataTemplate se vážou na vlastnosti třídy Team, protože CollectionViewSource automaticky dodává aktuálně vybraný tým ze seznamu týmů, když je to potřeba.

Viz také

• Přehled datových vazeb
• Datová vazba do hloubky