Zobrazení položek

Zobrazení položek slouží k zobrazení kolekce datových položek, například fotografií v albu nebo položkách v katalogu produktů.

Zobrazení položek je podobné ovládacím prvkům zobrazení seznamu a zobrazení mřížky a můžete ho použít ve většině případů, kdy byste tyto ovládací prvky použili. Jednou z výhod zobrazení položek je možnost přepnout rozložení za běhu při zachování výběru položek.

Ovládací prvek zobrazení položek je sestaven pomocí ItemsRepeater, ScrollView, ItemContainer a ItemCollectionTransitionProvider komponenty, takže nabízí jedinečnou schopnost připojit vlastní layout nebo ItemCollectionTransitionProvider implementace. Vnitřní ovládací prvek ScrollView zobrazení položky umožňuje posouvání a přiblížení položek. Nabízí také funkce, které nejsou k dispozici v ovládacím prvku ScrollViewer používaném zobrazením seznamu a zobrazením mřížky, jako je možnost ovládat animaci během programových posouvání.

Podobně jako ovládací prvky zobrazení seznamu a zobrazení mřížky může zobrazení položek používat uživatelské rozhraní a virtualizaci dat; ovládání klávesnice, myši, pera a dotykového ovládání; a má integrovanou podporu přístupnosti.

Je to správná kontrola?

Zobrazení položek umožňuje:

• Zobrazí kolekci, ve které by všechny položky měly mít stejné chování vizuálu a interakce.
• Umožňuje zobrazit kolekci obsahu s možností přepínání mezi seznamem, mřížkou a vlastními rozloženími.
• Přichytáte různé případy použití, včetně následujících běžných případů:
  • Uživatelské rozhraní typu Storefront (tj. procházení aplikací, skladeb, produktů)
  • Interaktivní knihovny fotek
  • Seznam kontaktů

Vytvoření zobrazení položek

• Důležitá rozhraní API: ItemsView – třída, ItemsSource vlastnost, ItemTemplate vlastnost, LinedFlowLayout, StackLayout, UniformGridLayout

Otevřete aplikaci Galerie WinUI 3 a podívejte se na položku ItemsView 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

Objekt ItemsView může zobrazit kolekci položek libovolného typu. Pokud chcete zobrazení naplnit, nastavte vlastnost ItemsSource na zdroj dat.

Poznámka:

Na rozdíl od jiných ovládacích prvků kolekce (těch, které jsou odvozeny z ItemsControl), ItemsView nemá items vlastnost, kterou můžete přidat datové položky přímo.

Nastavení zdroje položek

Zobrazení položek obvykle slouží k zobrazení dat ze zdroje, jako je databáze nebo internet. Pokud chcete naplnit zobrazení položek ze zdroje dat, nastavte jeho vlastnost ItemsSource na kolekci datových položek.

Nastavení položkySource v kódu

Zde je ItemsSource nastaven v kódu přímo na instanci kolekce.

 // Data source.
 List<String> itemsList = new List<string>();
 itemsList.Add("Item 1");
 itemsList.Add("Item 2");

 // Create a new ItemsView and set the data source.
 ItemsView itemsView1 = new ItemsView();
 itemsView1.ItemsSource = itemsList;

 // Add the ItemsView to a parent container in the visual tree.
 rootGrid.Children.Add(itemsView1);

Připojit ItemsSource v XAML

Vlastnost ItemsSource můžete také svázat s kolekcí v jazyce XAML. Další informace najdete v tématu Datová vazba sXAML .

Důležité

Pokud v objektu DataTemplate použijete rozšíření značek x:Bind , musíte v šabloně dat zadat datový typ (x:DataType).

Zde je PoložkaSource vázána na kolekci vlastních datových objektů (typu Photo).

<ItemsView ItemsSource="{x:Bind Photos}">

</ItemsView>

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        Photos = new ObservableCollection<Photo>();
        PopulatePhotos();
    }

    public ObservableCollection<Photo> Photos
    {
        get; private set;
    }


    private void PopulatePhotos()
    {
        // Populate the Photos collection. 
    }
}

public class Photo
{
    public BitmapImage PhotoBitmapImage { get; set; }
    public string Title { get; set; }
    public int Likes { get; set; }
}

Určení vzhledu položek

Ve výchozím nastavení se datová položka zobrazí v zobrazení položek jako řetězcová reprezentace datového objektu, ke které je vázán. Obvykle chcete zobrazit bohatší prezentaci dat. Pokud chcete přesně určit, jak se zobrazují položky v zobrazení položek, vytvoříte DataTemplate. XAML v DataTemplate definuje rozložení a vzhled ovládacích prvků použitých k zobrazení jednotlivé položky. Ovládací prvky v rozložení mohou být svázány s vlastnostmi datového objektu nebo mají definovaný statický obsah. DataTemplate je přiřazena ItemTemplate Vlastnost ItemsView ovládacího prvku.

Důležité

Kořenový prvek DataTemplate musí být ItemContainer; v opačném případě je vyvolán výjimka. ItemContainer je nezávislý primitivní ovládací prvek, který používá ItemsView k zobrazení stavů výběru a dalších vizualizací jednotlivých položek v kolekci položek.

V tomto příkladu je dataTemplate definována ve Page.Resources prostředků. Obsahuje ovládací prvek Obrázek pro zobrazení obrázku a překrytí, které obsahuje název obrázku a počet přijatých lajků.

 <Page.Resources>
     <DataTemplate x:Key="PhotoItemTemplate" x:DataType="local:Photo">
         <ItemContainer AutomationProperties.Name="{x:Bind Title}">
             <Grid>
                 <Image Source="{x:Bind PhotoBitmapImage, Mode=OneWay}" 
                        Stretch="UniformToFill" MinWidth="70"
                        HorizontalAlignment="Center" VerticalAlignment="Center"/>
                 <StackPanel Orientation="Vertical" Height="40" Opacity=".75"
                             VerticalAlignment="Bottom" Padding="5,1,5,1" 
                             Background="{ThemeResource SystemControlBackgroundBaseMediumBrush}">
                     <TextBlock Text="{x:Bind Title}" 
                                Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     <StackPanel Orientation="Horizontal">
                         <TextBlock Text="{x:Bind Likes}"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                         <TextBlock Text=" Likes"
                                    Style="{ThemeResource CaptionTextBlockStyle}"
                                    Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"/>
                     </StackPanel>
                 </StackPanel>
             </Grid>
         </ItemContainer>
     </DataTemplate>
 </Page.Resources>

 <Grid x:Name="rootGrid">
     <ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
                ItemTemplate="{StaticResource PhotoItemTemplate}">
     </ItemsView>
 </Grid>

Takto vypadá rozložení položky definované šablonou dat.

Změna rozložení položek

Když přidáte položky do ovládacího prvku ItemsView, automaticky zabalí každou položku do ItemContainer a pak vyloží všechny kontejnery položek. Způsob rozložení kontejnerů položek závisí na vlastnosti Rozložení ovládacího prvku.

Rozložení položek můžete upravit úpravou vlastností aktuálního rozložení nebo můžete aktuální rozložení zcela nahradit jiným rozložením. Můžete použít jedno z rozložení popsaných dále nebo můžete odvodit vlastní rozložení z třídy Layout .

StackLayout

Ve výchozím nastavení ItemsView používá StackLayout, který vytvoří svislý seznam, který je zde zobrazen s výchozím nastavením vlastností a jednoduchou šablonou obrázku.

Tento XAML nastaví mezery mezi položkami v StackLayoutu na 5 pixelů.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400" 
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <StackLayout Spacing="5"/>
    </ItemsView.Layout>
</ItemsView>

StackLayout poskytuje vlastnosti pro řízení:

• zda je rozložení svislé nebo vodorovné (orientace)
• mezery mezi položkami (mezery)

Rozložení můžete použít v kombinaci s ItemTemplate, aby vaše kolekce vypadala podle vašich potřeb. Například v ukázce galerie WinUI se změní PoložkaTemplate použitá s StackLayoutem tak, aby vypadala takto.

LinedFlowLayout

LinedFlowLayout umístí prvky postupně zleva doprava a pak shora dolů v rozložení obtékání. Toto rozložení slouží k zobrazení kolekce položek, ve které mají položky pevnou výšku, ale proměnlivou šířku. Doporučujeme ji pro kolekce založené na imagích. Toto rozložení má také předdefinované animace, které se přehrají, když kolekce obsahuje přidané nebo odebrané položky a při změně velikosti zobrazení.

Tady je zobrazení položek, které zobrazuje kolekci fotek v rozložení toku linkovaného toku.

<ItemsView Width="500" Height="400" HorizontalAlignment="Left"
           ItemTemplate="{StaticResource LinedFlowLayoutItemTemplate}">
    <ItemsView.Layout>
        <LinedFlowLayout ItemsStretch="Fill" 
                         LineHeight="160" 
                         LineSpacing="5"
                         MinItemSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

LinedFlowLayout poskytuje vlastnosti pro řízení:

• velikost a mezery položek (LineHeight, LineSpacing, MinItemSpacing)
• uspořádání položek (ItemsJustification, ItemsStretch)

UniformGridLayout

UniformGridLayout umístí prvky postupně zleva doprava nebo shora dolů (v závislosti na orientaci) v rozložení obtékání. Každá položka má stejnou velikost.

Tady je zobrazení položek, které zobrazuje kolekci fotek v jednotném rozložení mřížky.

<ItemsView ItemsSource="{x:Bind Photos}" Width="480" Height="400"
           ItemTemplate="{StaticResource PhotoItemTemplate}">
    <ItemsView.Layout>
        <UniformGridLayout MaximumRowsOrColumns="3" 
                           MinRowSpacing="5" 
                           MinColumnSpacing="5"/>
    </ItemsView.Layout>
</ItemsView>

UniformGridLayout poskytuje vlastnosti pro řízení:

• zda je rozložení založené na řádcích nebo sloupcích (orientace)
• počet řádků nebo sloupců (MaximumRowsOrColumns)
• velikost a mezery položek (MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
• uspořádání položek (ItemsJustification, ItemsStretch)

Návod

Interaktivní ukázku v aplikaci Galerie WinUI 3 můžete použít k zobrazení efektu těchto vlastností v reálném čase.

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 položek. 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. Vlastnost IsItemIn invokeEnabled můžete nastavit tak, aby uživatelé klikli na položku a vyvolali akci namísto výběru položky.

Tato tabulka ukazuje způsoby, jak může uživatel pracovat se zobrazením položek 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ý" IsItemInvokedEnabled="False"	N/A	N/A
Jeden výběr	RežimVýběru="Jeden" IsItemInvokedEnabled="False"	VýběrZměněn	Vybraný objekt
Vícenásobný výběr	MódVýběru="Více" IsItemInvokedEnabled="False"	VýběrZměněn	Vybrané položky
Rozšířený výběr	Režim výběru="Rozšířený" IsItemInvokedEnabled="False"	VýběrZměněn	Vybrané položky
Klikněte	SelectionMode="Žádný" IsItemInvokedEnabled="True"	Vyvolána položka	N/A

Poznámka:

Můžete povolit IsItemInvokedEnabled vyvolat ItemInvolat událost, zatímco SelectionMode je také nastavena na Single, Multiplenebo Extended. Pokud to uděláte, vyvolá se nejprve událost ItemInvolat a pak je vyvolána událost SelectionChanged. V některých případech (například pokud přejdete na jinou stránku v obslužné rutině události ItemInvolat), 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:

<ItemsView x:Name="myItemsView" SelectionMode="None" IsItemInvokedEnabled="True"/>

myItemsView.SelectionMode = ItemsViewSelectionMode.None;
myItemsView.IsItemInvokedEnabled = true;

Read-only

Můžete nastavit SelectionMode vlastnost ItemsViewSelectionMode.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í.

Poznámka:

Položky je stále možné vybrat a zrušit jejich výběr prostřednictvím kódu programu, ale ne prostřednictvím interakce uživatele.

Jeden výběr

Tato tabulka popisuje interakce pomocí klávesnice, myši a dotykového ovládání při nastavení SelectionMode na Singlehodnotu .

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 SelectionMode nastavena na Single, můžete získat vybranou položku dat z SelectedItem vlastnost. Pokud není vybrána žádná položka, SelectedItem je null.

Pokud se pokusíte nastavit položku, která není v kolekci položek jako SelectedItem, bude operace ignorována a SelectedItem je null.

Výchozí indikátor výběru pro Single výběr vypadá takto.

Vícenásobný výběr

Tato tabulka popisuje interakce kláves, myši a dotykového ovládání při nastavení SelectionMode na Multiplehodnotu .

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.

Výchozí indikátor výběru pro Multiple výběr vypadá takto.

Rozšířený výběr

Tato tabulka popisuje interakce kláves, myši a dotykového ovládání při nastavení SelectionMode na Extendedhodnotu .

Modifikační klávesa	Interakce
None	Chování je stejné jako Single 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 Multiple nebo Extended, můžete získat vybrané datové položky z SelectedItems vlastnost.

Vlastnosti SelectedItem a SelectedItems jsou synchronizovány. Pokud například nastavíte SelectedItem na null, SelectedItems je prázdná. V režimu vícenásobného výběru obsahuje SelectedItem položku, která byla vybrána jako první.

Výchozí indikátor výběru pro Extended výběr je stejný jako u Single výběru a vypadá takto.

Správa výběru položek prostřednictvím kódu programu

Poznámka:

Tyto metody výběru ignorují Vlastnost SelectionMode a mají účinek, i když SelectionMode je Single nebo None.

Někdy může být potřeba manipulovat s výběrem položky ItemsView programově. Můžete například zobrazit tlačítko Vybrat vše, které uživatelům umožní 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. Je efektivnější používat metody Select, SelectAll, Deselect a InvertSelection k úpravě výběru než použití SelectedItems vlastnost.

Návod

Všechny položky v kolekci můžete vybrat zavoláním metody SelectAll. Neexistuje žádná odpovídající metoda pro zrušení výběru všech položek. Můžete však zrušit výběr všech položek voláním SelectAll následovaný okamžitou invertSelection.

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

• Ukázka galerie WinUI – podívejte se na všechny ovládací prvky XAML v interaktivním formátu.

Související články

• Pokyny pro seznamy
• ItemsView – třída
• StackLayout
• UniformGridLayout
• LinedFlowLayout