Sdílet prostřednictvím

Zobrazení seznamu a zobrazení mřížky

Většina aplikací manipuluje se sadami dat, jako je galerie obrázků nebo sada e-mailových zpráv. Architektura uživatelského rozhraní XAML poskytuje ovládací prvky ListView a GridView, které usnadňují zobrazování a manipulaci s daty v aplikaci.

Poznámka:

ListView i GridView jsou odvozeny z ListViewBase třídy, takže mají stejné funkce, ale zobrazují data odlišně. V tomto článku se diskuze o zobrazení seznamu vztahují na ovládací prvky ListView i GridView, pokud není uvedeno jinak. Můžeme odkazovat na třídy, jako je ListView nebo ListViewItem, ale List předponu lze nahradit Grid pro odpovídající ekvivalent mřížky (GridView nebo GridViewItem).

Ovládací prvky ListView a GridView poskytují mnoho výhod při práci s kolekcemi. Obojí je snadné implementovat a poskytovat základní uživatelské rozhraní, interakci a posouvání a zároveň je snadno přizpůsobitelné. Oba můžou být svázány s existujícími dynamickými zdroji dat nebo s pevně zakódovanými daty, která jsou součástí samotného XAML nebo kódu.

Oba ovládací prvky jsou flexibilní pro použití v různých scénářích, ale celkově fungují nejlépe s kolekcemi, ve kterých mají všechny položky stejnou základní strukturu a vzhled, stejně jako stejné chování interakce. To znamená, že všichni by měli při kliknutí provést stejnou akci (například otevřít odkaz nebo procházet).

Porovnání ListView a GridView

Zobrazení seznamu

Ovládací prvek ListView zobrazí data skládaná svisle v jednom sloupci. ListView funguje lépe pro položky, které mají text jako ústřední bod, a pro kolekce, které mají být přečteny shora dolů (například abecedně seřazené). Několik běžných případů použití pro ListView obsahuje seznamy zpráv a výsledků hledání. Pokud potřebujete zobrazit kolekce ve více sloupcích nebo ve formátu podobném tabulce, neměli byste používat ListView. Místo toho zvažte použití ovládacího prvku DataGrid.

snímek obrazovky se seznamem se seskupenými daty podle abecedy

Mřížkový pohled

Ovládací prvek GridView představuje kolekci položek v řádcích a sloupcích, které lze posunout svisle. Data jsou skládaná vodorovně, dokud nenaplní sloupec, a pak pokračuje dalším řádkem ve sloupci. GridView funguje lépe pro kolekce, které mají obrázky jako jejich ústřední bod nebo jejichž položky lze číst ze strany na stranu nebo nejsou seřazené v určitém pořadí. Běžným případem použití pro GridView je fotogalerie nebo galerie produktů.

Snímek obrazovky knihovny obsahu fotek zobrazených jako zobrazení mřížky

Jaký prvek pro ovládání kolekce byste měli použít? Porovnání s ItemsRepeater

Než se rozhodnete, které ovládací prvky použít, je důležité porozumět rozdílům mezi těmito typy ovládacích prvků.

ListView a GridView

Ovládací prvky ListView a GridView s bohatými funkcemi fungují . Nevyžadují žádné přizpůsobení, ale dají se snadno přizpůsobit. Každý má vlastní integrované uživatelské rozhraní a uživatelský zážitek a je navržený tak, aby zobrazoval téměř jakýkoli typ kolekce.

ItemsRepeater

Ovládací prvek ItemsRepeater slouží také k zobrazení kolekcí, ale je navržený jako stavební blok pro vytvoření vlastního ovládacího prvku tak, aby vyhovoval vašim konkrétním požadavkům uživatelského rozhraní. Nemá stejné předdefinované funkce jako ListView a GridView, takže budete muset implementovat všechny potřebné funkce nebo interakce. ItemRepeater použijte, pokud máte vysoce přizpůsobené uživatelské rozhraní, které nemůžete vytvořit pomocí ListView nebo GridView, nebo pokud váš zdroj dat vyžaduje pro každou položku jiné chování.

Další informace o ItemsRepeater najdete ve směrnicích a dokumentaci API.

Vytvoření zobrazení seznamu nebo zobrazení mřížky

Otevřete aplikaci Galerie WinUI 3 a podívejte se na ListView nebo GridView v akci.

Aplikace WinUI 3 Gallery obsahuje interaktivní příklady většiny ovládacích prvků, vlastností a funkcionality WinUI 3. Získání aplikace z Microsoft Storu nebo získání zdrojového kódu na GitHubu

ListView i GridView jsou ItemsControl typy, takže mohou obsahovat kolekci položek libovolného typu. Ovládací prvek ListView nebo GridView musí mít položky v jeho Items kolekci, aby mohl na obrazovce zobrazit cokoli. Pokud chcete zobrazení naplnit, můžete přidat položky přímo do kolekce nebo nastavit vlastnost ItemsSource na zdroj dat.

Upozornění

K naplnění seznamu můžete použít vlastnost Items nebo ItemsSource, ale nemůžete použít obojí současně. Pokud nastavíte vlastnost ItemsSource a přidáte položku v XAML, přidaná položka bude ignorována. Pokud nastavíte vlastnost ItemsSource a přidáte položku do kolekce Items v kódu, vyvolá se výjimka.

Mnoho příkladů v tomto článku naplňuje kolekci Items přímo kvůli jednoduchosti. Běžnější je ale, že položky v seznamu pocházejí z dynamického zdroje, například ze seznamu knih z online databáze. Pro tento účel použijete vlastnost ItemsSource.

Přidání položek do ovládacího prvku ListView nebo GridView

Položky můžete přidat do objektu ListView nebo GridView Items kolekci pomocí XAML nebo kódu a získat tak stejný výsledek. Obvykle byste přidávali položky prostřednictvím XAML, pokud máte malý počet položek, které se nemění a jsou snadno definované, nebo pokud položky v kódu vygenerujete za běhu.

Metoda 1: Přidání položek do kolekce Items

  • Možnost 1: Přidání položek prostřednictvím XAML

    <!-- No corresponding C# code is needed for this example. -->

<ListView x:Name="Fruits">
<x:String>Apricot</x:String>
<x:String>Banana</x:String>
<x:String>Cherry</x:String>
<x:String>Orange</x:String>
<x:String>Strawberry</x:String>
</ListView>

  • Možnost 2: Přidání položek prostřednictvím kódu

    <StackPanel Name="FruitsPanel"></StackPanel>

    // Create a new ListView and add content.
ListView Fruits = new ListView();
Fruits.Items.Add("Apricot");
Fruits.Items.Add("Banana");
Fruits.Items.Add("Cherry");
Fruits.Items.Add("Orange");
Fruits.Items.Add("Strawberry");

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file).
FruitsPanel.Children.Add(Fruits);

Obě tyto možnosti vytvoří stejné zobrazení seznamu, jak je znázorněno tady:

Snímek obrazovky jednoduchého přehledu s výpisem ovoce.

Metoda 2: Přidání položek nastavením vlastnosti ItemsSource

Obvykle byste použili ListView nebo GridView k zobrazení dat ze zdroje, jako je databáze nebo internet. Chcete-li naplnit ListView nebo GridView ovládací prvek ze zdroje dat, nastavíte jeho ItemsSource vlastnost na kolekci datových položek. Tato metoda funguje lépe, pokud ListView nebo GridView budou uchovávat vlastní objekty třídy, jak je znázorněno v následujících příkladech.

  • Možnost 1: Nastavení zdroje položek v kódu

    Zde je Vlastnost ListView ItemsSource nastavena v kódu přímo na instanci kolekce.

    <StackPanel x:Name="ContactPanel"></StackPanel>

    // Class definition should be provided within the namespace being used, outside of any other classes.

this.InitializeComponent();

// Instead of adding hard coded items to an ObservableCollection as shown here,
//the data could be pulled asynchronously from a database or the internet.
ObservableCollection<Contact> Contacts = new ObservableCollection<Contact>();

// You create Contact objects by providing a first name, last name, and company for the Contact constructor.
// They are then added to the ObservableCollection Contacts.
Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));

// Create a new ListView (or GridView) for the UI, and add content by setting ItemsSource
ListView ContactsLV = new ListView();
ContactsLV.ItemsSource = Contacts;

// Add the ListView to a parent container in the visual tree (which you created in the corresponding XAML file)
ContactPanel.Children.Add(ContactsLV);

  • Možnost 2: Nastavení zdroje položek v XAML

    Vlastnost ItemsSource můžete také svázat s kolekcí v XAML. ItemsSource je vázaná na veřejnou vlastnost s názvem Kontakty, která zveřejňuje soukromou kolekci dat stránky s názvem _contacts.

    <ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}"/>

    // Provide a class definition within the namespace being used, outside of any other classes.
// These two declarations belong outside the main page class.
private ObservableCollection<Contact> _contacts = new ObservableCollection<Contact>();

public ObservableCollection<Contact> Contacts
{
    get { return this._contacts; }
}

// Define this method within your main page class.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    // Instead of hard coded items, the data could be pulled
    // asynchronously from a database or the internet.
    Contacts.Add(new Contact("John", "Doe", "Contoso, LTD."));
    Contacts.Add(new Contact("Jane", "Doe", "Fabrikam, Inc."));
    Contacts.Add(new Contact("Santa", "Claus", "Alpine Ski House"));
}

Obě tyto možnosti vytvoří stejné zobrazení seznamu, jak je znázorněno na následujícím snímku obrazovky. (Zobrazení seznamu zobrazuje řetězcovou reprezentaci každé položky, protože pro toto cvičení není definována šablona dat.)

Snímek obrazovky zobrazující jednoduché zobrazení seznamu se sadou vlastností ItemsSource

Důležité

Bez definované šablony dat se objekty vlastních tříd zobrazí v zobrazení seznamu se svou řetězcovou hodnotou pouze v případě, že mají definovanou metodu ToString.

Další část obsahuje podrobnější informace o tom, jak vizuálně znázorňovat jednoduché a vlastní položky třídy správně v šabloně ListView nebo GridView.

Další informace o datové vazbě najdete v tématu Přehled datových vazeb.

Poznámka:

Pokud potřebujete zobrazit seskupovaná data v zobrazení seznamu, musíte vytvořit vazbu na CollectionViewSource třídy. CollectionViewSource funguje jako proxy pro třídu kolekce v XAML a umožňuje podporu seskupení. Další informace najdete v tématu CollectionViewSource.

Přizpůsobení vzhledu pomocí šablony dat

Pomocí šablony dat v ovládacím prvku ListView nebo GridView můžete definovat, jak se mají položky a data vizualizovat. Ve výchozím nastavení se datová položka zobrazí v zobrazení seznamu jako řetězcová reprezentace datového objektu, ke které je vázán. Řetězcovou reprezentaci konkrétní vlastnosti datové položky můžete zobrazit nastavením DisplayMemberPath na tuto vlastnost.

Obvykle ale chcete zobrazit bohatší prezentaci dat. Chcete-li určit, jak se mají zobrazit položky v zobrazení seznamu nebo v zobrazení mřížky, vytvoříte třídu DataTemplate. XAML v DataTemplate definuje rozložení a vzhled ovládacích prvků, které se používají k zobrazení jednotlivé položky. Ovládací prvky v rozložení můžou být svázané s vlastnostmi datového objektu nebo mohou mít statický obsah, který je definovaný v textu.

Důležité

Při použití rozšíření x:Bind markup v DataTemplate je nutné zadat datový typ (x:DataType) v šabloně dat.

Jednoduchá šablona dat ListView

V tomto příkladu je datová položka jednoduchým řetězcem. Pokud chcete přidat obrázek nalevo od řetězce a zobrazit řetězec v tyrkysové barvě, definujete DataTemplate vložený v definici ListView. Toto je stejný ListView ovládací prvek, který jste vytvořili dříve pomocí možnosti 1 v metodě 1.

<!--No corresponding code is needed for this example.-->
<ListView x:Name="FruitsList">
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Image Source="Assets/placeholder.png" Width="32" Height="32"
                                HorizontalAlignment="Left" VerticalAlignment="Center"/>
                            <TextBlock Text="{x:Bind}" Foreground="Teal" FontSize="14"
                                Grid.Column="1" VerticalAlignment="Center"/>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <x:String>Apricot</x:String>
                <x:String>Banana</x:String>
                <x:String>Cherry</x:String>
                <x:String>Orange</x:String>
                <x:String>Strawberry</x:String>
            </ListView>

Tady je postup zobrazení datových položek při použití jednoduché šablony dat ListView:

snímek obrazovky se seznamem, který se zobrazí po použití jednoduché šablony dat ListView

Šablona dat ListView pro objekty vlastní třídy

V následujícím příkladu je datová položka objektem Contact. Pokud chcete přidat obrázek kontaktu nalevo od názvu kontaktu a společnosti, definujete DataTemplate vložený v definici ListView. Tato datová šablona ListView byla vytvořena v možnosti 2 pod metodou 2, jak je znázorněno výše.

<ListView x:Name="ContactsLV" ItemsSource="{x:Bind Contacts}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Contact">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Grid.RowSpan="2" Source="Assets/grey-placeholder.png" Width="32"
                    Height="32" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
                <TextBlock Grid.Column="1" Text="{x:Bind Name}" Margin="12,6,0,0"
                    Style="{ThemeResource BaseTextBlockStyle}"/>
                <TextBlock  Grid.Column="1" Grid.Row="1" Text="{x:Bind Company}" Margin="12,0,0,6"
                    Style="{ThemeResource BodyTextBlockStyle}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Tady je postup zobrazení datových položek při použití šablony dat ListView pro objekty vlastní třídy:

Snímek obrazovky se seznamem, který se zobrazí po použití šablony dat ListView pro objekty vlastní třídy

Datové šablony jsou primárním způsobem, jak definujete vzhled objektu ListView. Můžou také výrazně ovlivnit výkon, pokud váš seznam obsahuje velký počet položek.

Šablonu dat můžete definovat přímo v definici ListView nebo GridView, jak je znázorněno v předchozím kódu, nebo samostatně v části Resources. Pokud ji definujete mimo definici ListView nebo GridView, musíte datové šabloně přiřadit atribut x:Key a přiřadit jej k vlastnosti ItemTemplate v ListView nebo GridView pomocí tohoto klíče.

Další informace a příklady použití šablon dat a kontejnerů položek k definování vzhledu položek v seznamu nebo mřížce najdete v tématu Kontejnery položek a šablony.

Změna rozložení položek

Když přidáte položky do ovládacího prvku ListView nebo GridView, automaticky zabalí každou položku do kontejneru položek a pak vypíše všechny kontejnery položek. Způsob, jakým jsou tyto kontejnery položek rozloženy, závisí na ItemsPanel vlastnost ovládacího prvku.

  • ListViewve výchozím nastavení používá ItemsStackPanel, který vytvoří svislý seznam:

    Snímek obrazovky s jednoduchým zobrazením seznamu zobrazující svislý seznam položek

  • GridView používá ItemsWrapGrid, který přidává položky vodorovně a zalamuje a posouvá svisle:

    Snímek obrazovky s jednoduchým zobrazením mřížky zobrazující vodorovný seznam položek

Rozložení položek můžete upravit úpravou vlastností na panelu položek nebo můžete výchozí panel nahradit jiným panelem.

Poznámka:

Pokud změníte ItemsPanel, nezakažte virtualizaci. Třídy ItemsStackPanel i ItemsWrapGrid podporují virtualizaci, takže tyto třídy jsou bezpečné pro použití. Pokud používáte jakýkoli jiný panel, můžete zakázat virtualizaci a zpomalit výkon zobrazení seznamu. Další informace najdete v článcích o zobrazení seznamu pod částí Výkon.

Tento příklad ukazuje, jak vytvořit ListView ovládací prvek rozložení jeho kontejnery položek v vodorovném seznamu změnou Orientace vlastnost ItemsStackPanel.

Vzhledem k tomu, že zobrazení seznamu se ve výchozím nastavení posouvá svisle, musíte také upravit některé vlastnosti interního ScrollVieweru zobrazení seznamu ScrollViewer, aby se posouval vodorovně.

Důležité

Následující příklady jsou zobrazeny s neomezenou šířkou zobrazení seznamu, takže vodorovné posuvníky nejsou zobrazeny. Pokud tento kód spustíte, můžete nastavit Width="180" pro ListView, aby se zobrazily posuvníky.

<ListView Height="60"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Tady je postup zobrazení seznamu:

Snímek obrazovky s vodorovným zobrazením seznamu

V dalším příkladu ListView rozloží položky ve svislém zalamovacím seznamu pomocí ItemsWrapGrid místo ItemsStackPanel.

Důležité

Musíte omezit výšku zobrazení seznamu a vynutit tak, aby ovládací prvek zabalil kontejnery.

<ListView Height="100"
          ScrollViewer.HorizontalScrollMode="Enabled"
          ScrollViewer.HorizontalScrollBarVisibility="Auto"
          ScrollViewer.VerticalScrollMode="Disabled"
          ScrollViewer.VerticalScrollBarVisibility="Hidden">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <x:String>Apricot</x:String>
    <x:String>Banana</x:String>
    <x:String>Cherry</x:String>
    <x:String>Orange</x:String>
    <x:String>Strawberry</x:String>
</ListView>

Tady je postup zobrazení seznamu:

Snímek obrazovky se zobrazením seznamu s rozložením mřížky

Pokud zobrazíte seskupené data v zobrazení seznamu, ItemsPanel určuje, jak jsou skupiny položek rozloženy, nikoli jak jsou jednotlivé položky rozloženy. Pokud například použijete dříve zobrazenou vodorovnou položku ItemsStackPanel k zobrazení seskupených dat, jsou skupiny uspořádány vodorovně, ale položky v každé skupině jsou stále skládané svisle, jak je znázorněno zde:

Snímek obrazovky se seskupeným vodorovným zobrazením seznamu .

Výběr a interakce položek

Můžete si vybrat z různých způsobů, jak uživatelům umožnit interakci se zobrazením seznamu. Ve výchozím nastavení můžou uživatelé vybrat jednu položku. Můžete změnit vlastnost SelectionMode povolit vícenásobný výběr nebo zakázat výběr. Můžete nastavit vlastnost IsItemClickEnabled tak, aby uživatelé klikli na položku (například tlačítko) a vyvolali akci místo výběru položky.

Poznámka:

ListView i GridView používají výčet ListViewSelectionMode pro své vlastnosti SelectionMode. IsItemClickEnabled je ve výchozím nastavení nastaven na False, takže ho stačí nastavit pouze pro povolení režimu kliknutí.

Tato tabulka ukazuje způsoby, jak může uživatel pracovat se zobrazením seznamu a jak můžete reagovat na interakci.

Povolení této interakce: Použijte tato nastavení: Zpracování této události: Pomocí této vlastnosti získáte vybranou položku:
Žádná interakce SelectionMode="Žádný"
IsItemClickEnabled="Ne"		 N/A N/A
Jeden výběr RežimVýběru="Jeden"
IsItemClickEnabled="Nepravda"		 VýběrZměněn Vybraný objekt
VybranýIndex
Vícenásobný výběr MódVýběru="Více"
IsItemClickEnabled="Nepravda"		 VýběrZměněn Vybrané položky
Rozšířený výběr Režim výběru="Rozšířený"
IsItemClickEnabled="Nepravda"		 VýběrZměněn Vybrané položky
Klikněte SelectionMode="Žádný"
JeKliknutíNaPoložkuPovoleno="Pravda"		 Kliknutí na položku N/A

Poznámka:

Můžete povolit IsItemClickEnabled, takže vyvolá událost ItemClick, zatímco SelectionMode je také nastaven na Single, Multiplenebo Extended. Pokud to uděláte, vyvolá se nejprve událost ItemClick a pak se vyvolá událost SelectionChanged. V některých případech (například pokud v obslužné rutině události ItemClick přejdete na jinou stránku), událost SelectionChanged není vyvolána a položka není vybraná.

Tyto vlastnosti můžete nastavit v xaml nebo v kódu, jak je znázorněno tady:

<ListView x:Name="myListView" SelectionMode="Multiple"/>

<GridView x:Name="myGridView" SelectionMode="None" IsItemClickEnabled="True"/>

myListView.SelectionMode = ListViewSelectionMode.Multiple;

myGridView.SelectionMode = ListViewSelectionMode.None;
myGridView.IsItemClickEnabled = true;

Read-only

Vlastnost SelectionMode můžete nastavit na ListViewSelectionMode.None zakázat výběr položky. Tím se ovládací prvek umístí do režimu jen pro čtení, takže se používá k zobrazení dat, ale ne k interakci s ním. To znamená, že výběr položek je zakázán, ale ovládací prvek je stále funkční.

Jeden výběr

Tato tabulka popisuje interakce pomocí klávesnice, myši a dotykového ovládání, pokud je vlastnost SelectionMode nastavena na Single.

Modifikační klávesa Interakce
None
  • Uživatelé můžou vybrat jednu položku pomocí mezerníku, kliknutí myší nebo klepnutí.
    		•
    Ctrl
  • Uživatelé můžou zrušit výběr jedné položky pomocí mezerníku, kliknutí myší nebo klepnutí.
  • Pomocí kláves se šipkami můžou uživatelé přesunout fokus nezávisle na výběru.
    		•

    Pokud je výběrový režim nastaven na Single, můžete získat vybranou datovou položku z vlastnosti SelectedItem. Pomocí vlastnosti SelectedIndex můžete získat index vybrané položky v kolekci. Pokud není vybrána žádná položka, SelectedItem je nulla SelectedIndex je -1.

    Pokud se pokusíte nastavit položku, která není v kolekci Items jako SelectedItem, operace je ignorována a SelectedItem je null. Pokud se však pokusíte nastavit SelectedIndex na index, který je mimo rozsah položek v seznamu, dojde k výjimce System.ArgumentException.

    Vícenásobný výběr

    Tato tabulka popisuje interakce klávesnice, myši a dotykového ovládání, když je SelectionMode nastaven na Vícenásobný.

    Modifikační klávesa Interakce
    None
  • Uživatelé mohou vybrat více položek pomocí mezerníku, kliknutí myší nebo klepnutím vybrat prioritní položku.
  • Pomocí kláves se šipkami můžou uživatelé přesunout fokus nezávisle na výběru.
    		•
    Směna
  • Uživatelé mohou vybrat více souvislých položek kliknutím nebo klepnutím na první položku ve výběru a následným kliknutím nebo klepnutím na poslední položku ve výběru.
  • Pomocí kláves se šipkami můžou uživatelé vybrat souvislé položky začínající položkou, která je vybraná při výběru klávesy Shift.
    		•

    Rozšířený výběr

    Tato tabulka popisuje interakce kláves, myši a dotykového ovládání, pokud je SelectionMode nastavena na Rozšířené.

    Modifikační klávesa Interakce
    None
  • Chování je stejné jako jednoduchý výběr.
    		•
    Ctrl
  • Uživatelé mohou vybrat více položek pomocí mezerníku, kliknutí myší nebo klepnutím vybrat prioritní položku.
  • Pomocí kláves se šipkami můžou uživatelé přesunout fokus nezávisle na výběru.
    		•
    Směna
  • Uživatelé mohou vybrat více souvislých položek kliknutím nebo klepnutím na první položku ve výběru a následným kliknutím nebo klepnutím na poslední položku ve výběru.
  • Pomocí kláves se šipkami můžou uživatelé vybrat souvislé položky začínající položkou, která je vybraná při výběru klávesy Shift.
    		•

    Pokud je SelectionMode nastavena na Více nebo Rozšířené, můžete vybrané datové položky získat z vlastnosti SelectedItems.

    Vlastnosti SelectedIndex, SelectedItem a SelectedItems jsou synchronizovány. Pokud například nastavíte SelectedIndex na -1, SelectedItem je nastaven na null a SelectedItems je prázdný. A pokud nastavíte SelectedItem na null, SelectedIndex je nastaven na -1 a SelectedItems je prázdný.

    V režimu vícenásobného výběru obsahuje SelectedItem položku, která byla vybrána jako první, a Selectedindex obsahuje index položky, která byla vybrána jako první.

    Reakce na změny výběru

    Pokud chcete reagovat na změny výběru v zobrazení seznamu, zpracujte událost SelectionChanged. V kódu obslužné rutiny události si můžete získat seznam vybraných položek z vlastnosti SelectionChangedEventArgs.AddedItems. Můžete získat všechny položky, které byly zrušeny z SelectionChangedEventArgs.RemovedItems vlastnost. Kolekce AddedItems a RemovedItems obsahují maximálně jednu položku, pokud uživatelé nevyberou rozsah položek podržením klávesy Shift.

    Následující příklad ukazuje, jak zpracovat událost SelectionChanged a přistupovat k různým kolekcí Položek:

    <StackPanel HorizontalAlignment="Right">
    <ListView x:Name="listView1" SelectionMode="Multiple"
              SelectionChanged="ListView1_SelectionChanged">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
    <TextBlock x:Name="selectedItem"/>
    <TextBlock x:Name="selectedIndex"/>
    <TextBlock x:Name="selectedItemCount"/>
    <TextBlock x:Name="addedItems"/>
    <TextBlock x:Name="removedItems"/>
</StackPanel>

    private void ListView1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (listView1.SelectedItem != null)
    {
        selectedItem.Text =
            "Selected item: " + listView1.SelectedItem.ToString();
    }
    else
    {
        selectedItem.Text =
            "Selected item: null";
    }
    selectedIndex.Text =
        "Selected index: " + listView1.SelectedIndex.ToString();
    selectedItemCount.Text =
        "Items selected: " + listView1.SelectedItems.Count.ToString();
    addedItems.Text =
        "Added: " + e.AddedItems.Count.ToString();
    removedItems.Text =
        "Removed: " + e.RemovedItems.Count.ToString();
}

    Režim kliknutí

    Zobrazení seznamu můžete změnit tak, aby uživatelé klikli na tlačítka a další položky místo toho, aby je vybrali. To je užitečné například v případě, že aplikace otevře novou stránku, když uživatelé kliknou na položku v seznamu nebo mřížce.

    Povolení tohoto chování:

    • Nastavte selectionMode na None.
    • Nastavit IsItemClickEnabled na True.
    • Při zpracování události ItemClick proveďte nějakou akci, když uživatelé kliknou na položku.

    Tady je zobrazení seznamu s položkami, na které můžete kliknout. Kód v obslužné rutině události ItemClick otevře novou stránku v aplikaci.

    <ListView SelectionMode="None"
          IsItemClickEnabled="True"
          ItemClick="ListView1_ItemClick">
    <x:String>Page 1</x:String>
    <x:String>Page 2</x:String>
    <x:String>Page 3</x:String>
    <x:String>Page 4</x:String>
    <x:String>Page 5</x:String>
</ListView>

    private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
    switch (e.ClickedItem.ToString())
    {
        case "Page 1":
            this.Frame.Navigate(typeof(Page1));
            break;

        case "Page 2":
            this.Frame.Navigate(typeof(Page2));
            break;

        case "Page 3":
            this.Frame.Navigate(typeof(Page3));
            break;

        case "Page 4":
            this.Frame.Navigate(typeof(Page4));
            break;

        case "Page 5":
            this.Frame.Navigate(typeof(Page5));
            break;

        default:
            break;
    }
}

    Programový výběr rozsahu položek

    Někdy může být potřeba manipulovat s výběrem položky ListView programově. Můžete například zobrazit tlačítko Vybrat všechny, aby uživatelé mohli vybrat všechny položky v seznamu. V tomto případě obvykle není příliš efektivní přidávat a odebírat položky z kolekce SelectedItems jeden po druhém. Každá změna položky způsobí událost SelectionChanged a když pracujete s položkami přímo místo práce s hodnotami indexu, položka se de-virtualizuje.

    Efektivnější je použít SelectAll, SelectRangea DeselectRange metody změnit výběr než použít SelectedItems vlastnost. Tyto metody vyberou (nebo zruší výběr) položek pomocí rozsahů indexů položek. Virtualizované položky zůstanou virtualizované, protože se používá pouze index. Všechny položky v zadaném rozsahu jsou vybrány (nebo zrušeny), bez ohledu na původní stav výběru. Událost SelectionChanged nastane pouze jednou pro každé volání těchto metod.

    Důležité

    Tyto metody byste měli volat pouze v případě, že vlastnost SelectionMode je nastavena na Multiple, nebo Extended. Pokud voláte SelectRange, když výběrový režim je Jeden nebo Žádný, je vyvolána výjimka.

    Když vyberete položky pomocí rozsahů indexu, pomocí vlastnosti SelectedRanges získáte všechny vybrané oblasti v seznamu.

    Pokud ItemsSource vlastnost implementuje IItemsRangeInfoa používáte tyto metody k úpravě výběru, AddedItems a RemovedItems vlastnosti nejsou nastaveny v SelectionChangedEventArgs. Nastavení těchto vlastností vyžaduje zrušení virtualizace objektu položky. K získání položek použijte vlastnost SelectedRanges.

    Všechny položky v kolekci můžete vybrat zavoláním metody SelectAll. Neexistuje však žádná odpovídající metoda pro zrušení výběru všech položek. Výběr všech položek můžete zrušit voláním deselectRange a předáním ItemIndexRange s hodnotou FirstIndex 0 a hodnotou Délka rovna počtu položek v kolekci. To je znázorněno v následujícím příkladu spolu s možností vybrat všechny položky.

    <StackPanel Width="160">
    <Button Content="Select all" Click="SelectAllButton_Click"/>
    <Button Content="Deselect all" Click="DeselectAllButton_Click"/>
    <ListView x:Name="listView1" SelectionMode="Multiple">
        <x:String>Apricot</x:String>
        <x:String>Banana</x:String>
        <x:String>Cherry</x:String>
        <x:String>Orange</x:String>
        <x:String>Strawberry</x:String>
    </ListView>
</StackPanel>

    private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.SelectAll();
    }
}

private void DeselectAllButton_Click(object sender, RoutedEventArgs e)
{
    if (listView1.SelectionMode == ListViewSelectionMode.Multiple ||
        listView1.SelectionMode == ListViewSelectionMode.Extended)
    {
        listView1.DeselectRange(new ItemIndexRange(0, (uint)listView1.Items.Count));
    }
}

    Informace o tom, jak změnit vzhled vybraných položek, najdete v tématu Kontejnery položek a šablony.

    Přetáhnout a pustit

    Ovládací prvky ListView a GridView podporují přetahování položek v rámci vlastních ovládacích prvků a mezi sebou a jinými ovládacími prvky ListView a GridView. Další informace o implementaci funkcí přetažení naleznete v tématu Přetažení.

    Univerzální platforma Windows a WinUI 2

    Důležité

    Informace a příklady v tomto článku jsou optimalizované pro aplikace, které používají Windows App SDK a WinUI 3, ale obecně platí pro aplikace pro UPW, které používají WinUI 2. Informace o konkrétních platformách a příklady najdete v referenčních informacích k rozhraní API pro UPW.

    Tato část obsahuje informace potřebné pro použití ovládacího prvku v aplikacích UWP nebo WinUI 2.

    Rozhraní API pro tyto ovládací prvky existuje v Windows.UI.Xaml.Controls jmenném prostoru.

    • rozhraní API UPW:ListView – třída, GridView –, vlastnost ItemsSource, vlastnost Items
    • Otevřete aplikaci WinUI 2 Gallery a podívejte se na ListView nebo GridView v akci. Aplikace WinUI 2 Gallery obsahuje interaktivní ukázky většiny ovládacích prvků, funkcí a vlastností WinUI 2. Získejte aplikaci z Microsoft Storu nebo získejte zdrojový kód na GitHubu.

    Získání ukázkového kódu

    K získání nejaktuálnějších stylů a šablon pro všechny ovládací prvky doporučujeme použít nejnovější WinUI 2 .

    • Last updated on