Widok elementów

Widok elementów służy do wyświetlania kolekcji elementów danych, takich jak zdjęcia w albumie lub elementach w katalogu produktów.

Widok elementów jest podobny do kontrolek widoku listy i widoku siatki i można go używać w większości przypadków, w których można użyć tych kontrolek. Jedną z zalet widoku elementów jest możliwość przełączania układu na bieżąco przy zachowaniu zaznaczenia elementu.

Kontrolka widoku elementów jest kompilowana przy użyciu składników ItemsRepeater, ScrollView, ItemContainer i ItemCollectionTransitionProvider , dzięki czemu oferuje unikatową możliwość podłączania niestandardowych implementacji Layout lub ItemCollectionTransitionProvider . Wewnętrzna kontrolka ScrollView widoku elementu umożliwia przewijanie i powiększanie elementów. Oferuje również funkcje niedostępne w kontrolce ScrollViewer używanej przez widok listy i widok siatki, podobnie jak możliwość kontrolowania animacji podczas przewijania programowego.

Podobnie jak w przypadku kontrolek widoku listy i widoku siatki, widok elementów może używać interfejsu użytkownika i wirtualizacji danych; uchwyt klawiatury, myszy, pióra i wejścia dotykowego; ma wbudowaną obsługę ułatwień dostępu.

Czy jest to właściwa kontrola?

Użyj widoku elementów, aby:

• Wyświetl kolekcję, w której wszystkie elementy powinny mieć takie samo zachowanie wizualne i interakcji.
• Wyświetl kolekcję zawartości z możliwością przełączania się między listą, siatką i niestandardowymi układami.
• Uwzględnij różne przypadki użycia, w tym następujące typowe:
  • Interfejs użytkownika typu sklepu (tj. przeglądanie aplikacji, piosenek, produktów)
  • Interaktywne biblioteki zdjęć
  • Lista kontaktów

Tworzenie widoku elementów

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Element ItemsView może wyświetlać kolekcję elementów dowolnego typu. Aby wypełnić widok, ustaw właściwość ItemsSource na źródło danych.

Ustawianie źródła elementów

Zazwyczaj używasz widoku elementów do wyświetlania danych ze źródła, takiego jak baza danych lub Internet. Aby wypełnić widok elementów ze źródła danych, należy ustawić jego właściwość ItemsSource na kolekcję elementów danych.

Ustawianie elementuŹródło w kodzie

W tym miejscu źródło elementów jest ustawiane w kodzie bezpośrednio na wystąpienie kolekcji.

 // 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);

Wiązanie elementówŹródło w języku XAML

Właściwość ItemsSource można również powiązać z kolekcją w języku XAML. Aby uzyskać więcej informacji, zobacz Powiązanie danych za pomocą języka XAML.

W tym miejscu źródło elementów jest powiązane z kolekcją niestandardowych obiektów danych (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; }
}

Określanie wyglądu elementów

Domyślnie element danych jest wyświetlany w widoku elementów jako reprezentacja ciągu obiektu danych, z którą jest powiązana. Zazwyczaj chcesz pokazać bardziej bogatą prezentację danych. Aby określić dokładnie sposób wyświetlania elementów w widoku elementów, należy utworzyć element DataTemplate. Język XAML w elemencie DataTemplate definiuje układ i wygląd kontrolek używanych do wyświetlania pojedynczego elementu. Kontrolki w układzie mogą być powiązane z właściwościami obiektu danych lub mieć zdefiniowaną zawartość statyczną w tekście. Element DataTemplate jest przypisywany do właściwości ItemTemplate kontrolki ItemsView.

W tym przykładzie element DataTemplate jest zdefiniowany w elemecie Page.ResourcesResourceDictionary. Zawiera kontrolkę Obraz w celu pokazania obrazu i nakładki zawierającej tytuł obrazu i liczbę polubień, które są odbierane.

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

Oto jak wygląda układ elementu zdefiniowany przez szablon danych.

Zmienianie układu elementów

Po dodaniu elementów do kontrolki ItemsView automatycznie opakowuje każdy element w elemencie ItemContainer , a następnie określa wszystkie kontenery elementów. Sposób, w jaki te kontenery elementów są rozmieszczone, zależy od właściwości Layout kontrolki.

Układ elementów można zmodyfikować, dostosowując właściwości bieżącego układu lub całkowicie zastąpić bieżący układ innym układem. Możesz użyć jednego z opisanych dalej układów lub utworzyć niestandardowy układ z klasy Layout .

StackLayout

Domyślnie element ItemsView używa elementu StackLayout, który tworzy pionową listę, pokazaną tutaj z domyślnymi ustawieniami właściwości i prostym szablonem obrazu.

Ten kod XAML ustawia odstępy między elementami w elemencji StackLayout na 5 pikseli.

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

StackLayout udostępnia właściwości do kontrolowania:

• czy układ jest pionowy, czy poziomy (orientacja)
• odstępy między elementami (odstępy)

Możesz użyć układu w połączeniu z elementem ItemTemplate, aby zapewnić kolekcji różne wyglądy dostosowane do Twoich potrzeb. Na przykład przykład z galerii WinUI zmienia element ItemTemplate używany w elemencie StackLayout w taki sposób.

LinedFlowLayout

Element LinedFlowLayout umieszcza elementy sekwencyjnie od lewej do prawej, a następnie od góry do dołu w układzie zawijania. Użyj tego układu, aby wyświetlić kolekcję elementów, w której elementy mają stałą wysokość, ale zmienną szerokość. Zalecamy używanie kolekcji opartych na obrazach. Ten układ zawiera również wbudowane animacje odtwarzane po dodaniu lub usunięciu elementów kolekcji oraz zmianie rozmiaru widoku.

Oto widok elementów przedstawiający kolekcję zdjęć w układzie przepływu liniowego.

<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 udostępnia właściwości do kontrolowania:

• rozmiar i odstępy elementów (LineHeight, LineSpacing, MinItemSpacing)
• rozmieszczenie elementów (ItemsJustification, ItemsStretch)

UniformGridLayout

Elementy UniformGridLayout są pozycje sekwencyjnie od lewej do prawej lub górnej do dołu (w zależności od orientacji) w układzie zawijania. Każdy element ma ten sam rozmiar.

Oto widok elementów przedstawiający kolekcję zdjęć w układzie jednolitej siatki.

<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 udostępnia właściwości do kontrolowania:

• czy układ jest oparty na wierszach lub kolumnach (orientacja)
• liczba wierszy lub kolumn (MaximumRowsOrColumns)
• rozmiar i odstępy między elementami (MinItemHeight, MinItemWidth, MinColumnSpacing, MinRowSpacing)
• rozmieszczenie elementów (ItemsJustification, ItemsStretch)

Wybór elementu i interakcja

Możesz wybrać spośród różnych sposobów, aby umożliwić użytkownikom interakcję z widokiem elementów. Domyślnie użytkownicy mogą wybrać pojedynczy element. Możesz zmienić właściwość SelectionMode, aby włączyć wybór wielokrotny lub wyłączyć zaznaczenie. Można ustawić właściwość IsItemIn invokeEnabled , aby użytkownicy klikali element w celu wywołania akcji zamiast wybierania elementu.

W tej tabeli przedstawiono sposoby interakcji użytkownika z widokiem elementów oraz sposób reagowania na interakcję.

Te właściwości można ustawić w języku XAML lub w kodzie, jak pokazano poniżej:

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

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

Read-only

Właściwość SelectionMode można ustawić na ItemsViewSelectionMode.None , aby wyłączyć zaznaczenie elementu. Spowoduje to przełączenie kontrolki w tryb tylko do odczytu, dzięki czemu jest używana do wyświetlania danych, ale nie do interakcji z nią. Oznacza to, że wybór elementu jest wyłączony, ale sama kontrolka nie jest.

Pojedynczy wybór

W tej tabeli opisano interakcje klawiatury, myszy i dotyku, gdy właściwość SelectionMode jest ustawiona na Singlewartość .

Gdy właściwość SelectionMode jest ustawiona na Single, możesz pobrać wybrany element danych z właściwości SelectedItem . Jeśli żaden element nie jest zaznaczony, element SelectedItem to null.

Jeśli spróbujesz ustawić element, który nie znajduje się w kolekcji elementów jako SelectedItem, operacja zostanie zignorowana, a element SelectedItem to null.

Domyślny wskaźnik wyboru dla Single zaznaczenia wygląda następująco.

Wybór wielokrotny

W tej tabeli opisano interakcje klawiatury, myszy i dotyku, gdy opcja SelectionMode jest ustawiona na Multiplewartość .

Domyślny wskaźnik wyboru dla Multiple zaznaczenia wygląda następująco.

Wybór rozszerzony

W tej tabeli opisano interakcje klawiatury, myszy i dotyku, gdy opcja SelectionMode jest ustawiona na Extendedwartość .

Gdy właściwość SelectionMode jest ustawiona na Multiple lub Extended, możesz pobrać wybrane elementy danych z właściwości SelectedItems .

Właściwości SelectedItem i SelectedItems są synchronizowane. Jeśli na przykład ustawisz wartość SelectedItem na null, element SelectedItems jest pusty. W trybie wyboru wielokrotnego element SelectedItem zawiera element, który został wybrany jako pierwszy.

Domyślny wskaźnik wyboru dla Extended zaznaczenia jest taki sam jak w przypadku Single zaznaczenia i wygląda następująco.

Programowe zarządzanie wyborem elementów

Czasami może być konieczne programowe manipulowanie wyborem elementu ItemsView. Możesz na przykład wyświetlić przycisk Wybierz wszystko, aby umożliwić użytkownikom wybranie wszystkich elementów na liście. W takim przypadku zwykle nie jest to bardzo wydajne, aby dodawać i usuwać elementy z kolekcji SelectedItems jeden po drugim. Wydajniejsze jest użycie metod Select, SelectAll, Deselect i InvertSelection w celu zmodyfikowania zaznaczenia niż używania właściwości SelectedItems.

Pobieranie przykładowego kodu

• Przykład z galerii WinUI — zobacz wszystkie kontrolki XAML w formacie interaktywnym.

Powiązane artykuły

• Wskazówki dotyczące list
• ItemsView, klasa
• StackLayout
• UniformGridLayout
• LinedFlowLayout