Kolekcje i listy

Kolekcje i listy odwołują się do reprezentacji wielu powiązanych elementów danych, które są wyświetlane razem. Kolekcje mogą być reprezentowane na wiele sposobów przez różne kontrolki kolekcji (mogą być również nazywane widokami kolekcji). Kontrolki kolekcji wyświetlają i umożliwiają interakcję z zawartością opartą na kolekcji, taką jak lista kontaktów, lista dat, kolekcja obrazów itd.

Ważne interfejsy API: ItemsView, ListView, klasa GridView, klasa FlipView, Klasa TreeView, ItemsRepeater

Kontrolki omówione w tym artykule obejmują:

Kontrola	Użycie podstawowe
ElementWyświetl	wyświetlanie kolekcji przy użyciu elastycznego systemu układu
Widok listy	aby wyświetlić kolekcje zawartości z dużą liczbą tekstu
GridView	wyświetlanie kolekcji zawartości z dużą liczbą obrazów
FlipView	wyświetlanie kolekcji zawartości z dużą liczbą obrazów, które wymagają skupienia się na dokładnie jednym elemencie
Widok drzewa	wyświetlanie kolekcji zawartości z dużą liczbą tekstu w określonej hierarchii
ItemsRepeater	jako dostosowywalny blok konstrukcyjny umożliwiający tworzenie niestandardowych kontrolek kolekcji

Wskazówki dotyczące projektowania, funkcje i przykłady podano poniżej dla każdej kontrolki.

Każda z tych kontrolek (z wyjątkiem elementu ItemsRepeater) zapewnia wbudowane style i interakcje. Jednak w celu dalszego dostosowywania wyglądu wizualizacji widoku kolekcji i elementów w nim używany jest element DataTemplate . Szczegółowe informacje na temat szablonów danych i dostosowywania wyglądu widoku kolekcji można znaleźć na stronie Kontenery elementów i szablony .

Każda z tych kontrolek (z wyjątkiem elementu ItemsRepeater) ma również wbudowane zachowanie umożliwiające wybór pojedynczych lub wielu elementów. Aby dowiedzieć się więcej, zobacz Omówienie trybów wyboru .

Jednym ze scenariuszy, które nie zostały omówione w tym artykule, jest wyświetlanie kolekcji w tabeli lub w wielu kolumnach. Jeśli chcesz wyświetlić kolekcję w tym formacie, rozważ użycie kontrolki DataGrid z zestawu narzędzi Windows Community Toolkit.

Przykłady

Galeria WinUI 2
	Jeśli masz zainstalowaną aplikację Galeria WinUI 2, zobacz działanie ListView, GridView, FlipView, TreeView i ItemsRepeater. pobierz aplikację Galerii WinUI 2 (Microsoft Store) Pobieranie kodu źródłowego (GitHub)

Widok elementów

Za pomocą widoku elementów można wyświetlać elementy danych z dużą ilością tekstu lub obrazu w różnych elastycznych układach, które można zamienić w czasie wykonywania.

Czy jest to właściwa kontrola?

Użyj widoku elementów, aby:

• Wyświetl kolekcję, która składa się głównie z elementów tekstowych, w których wszystkie elementy powinny mieć takie samo zachowanie wizualne i interakcji.
• Wyświetl kolekcję zawartości, w której centralnym punktem każdego elementu jest obraz, a każdy element powinien mieć takie samo zachowanie wizualne i interakcji.
• Wyświetlanie bibliotek zawartości.
• Uwzględnij różne przypadki użycia, w tym następujące typowe:
  • Utwórz listę kontaktów.
  • Interfejs użytkownika typu sklepu (tj. przeglądanie aplikacji, piosenek, produktów)
  • Interaktywne biblioteki zdjęć

Przykłady

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

Jest to ta sama kolekcja pokazana w układzie stosu. Tutaj skupić się na tekście, a nie na zdjęciu.

Powiązane artykuły

Temat	Description
Widok elementów	Poznaj podstawowe informacje na temat korzystania z widoku elementów w aplikacji.
kontenery i szablony elementów	Elementy wyświetlane na liście lub siatce mogą odgrywać ważną rolę w ogólnym wyglądzie aplikacji. Aby aplikacja wyglądała świetnie, dostosowując wygląd elementów kolekcji przez modyfikowanie szablonów kontrolek i szablonów danych.

Widok listy

Widoki listy reprezentują elementy z dużym obciążeniem tekstem, zwykle w układzie jednokolumny, pionowo skumulowanym. Umożliwiają one kategoryzowanie elementów i przypisywanie nagłówków grup, przeciąganie i upuszczanie elementów, curowanie zawartości i zmienianie kolejności elementów.

Czy jest to właściwa kontrola?

Użyj widoku listy, aby:

• Wyświetl kolekcję, która składa się głównie z elementów tekstowych, w których wszystkie elementy powinny mieć takie samo zachowanie wizualne i interakcji.
• Reprezentowanie pojedynczej lub podzielonej na kategorie kolekcji zawartości.
• Uwzględnij różne przypadki użycia, w tym następujące typowe:
  • Utwórz listę komunikatów lub dziennika komunikatów.
  • Utwórz listę kontaktów.
  • Utwórz okienko listy we wzorcu listy/szczegółów. Wzorzec listy/szczegółów jest często używany w aplikacjach poczty e-mail, w którym jedno okienko zawiera listę elementów do wyboru, podczas gdy drugie okienko (szczegóły) ma szczegółowy widok wybranego elementu.

Uwaga / Notatka

Jeśli musisz obsługiwać zdarzenia wskaźnika dla elementu UIElement w widoku przewijanym (takim jak ScrollViewer lub ListView), musisz jawnie wyłączyć obsługę zdarzeń manipulowania elementem w widoku, wywołując element UIElement.CancelDirectmanipulation. Aby ponownie włączyć zdarzenia manipulowania w widoku, wywołaj element UIElement.TryStartDirectManipulation.

Przykłady

Oto prosty widok listy, który pokazuje listę kontaktów i grupuje elementy danych alfabetycznie. Nagłówki grup (każda litera alfabetu w tym przykładzie) można również dostosować tak, aby zachować "lepki", tak jak zawsze będą wyświetlane w górnej części widoku ListView podczas przewijania.

Jest to widok ListView, który został odwrócony, aby wyświetlić dziennik komunikatów, z najnowszymi komunikatami wyświetlanymi u dołu. Za pomocą odwróconego widoku ListView elementy są wyświetlane w dolnej części ekranu z wbudowaną animacją.

Powiązane artykuły

Temat	Description
widok listy i widok siatki	Poznaj podstawowe informacje dotyczące korzystania z widoku listy lub widoku siatki w aplikacji.
kontenery i szablony elementów	Elementy wyświetlane na liście lub w widoku siatki mogą odgrywać ważną rolę w ogólnym wyglądzie aplikacji. Aby aplikacja wyglądała świetnie, dostosowując wygląd elementów kolekcji przez modyfikowanie szablonów kontrolek i szablonów danych.
Szablony elementów dla widoku listy	Użyj tych przykładowych szablonów elementów dla elementu ListView, aby uzyskać wygląd typowych typów aplikacji.
Odwrócone listy	Odwrócone listy mają nowe elementy dodane u dołu, takie jak w aplikacji do czatu. Postępuj zgodnie ze wskazówkami w tym artykule, aby użyć odwróconej listy w aplikacji.
Ściąganie do odświeżenia	Mechanizm ściągania do odświeżania umożliwia użytkownikowi ściąganie listy danych przy użyciu dotyku w celu pobrania większej ilości danych. Ten artykuł umożliwia zaimplementowanie funkcji pull-to-refresh w widoku listy.
Zagnieżdżony interfejs użytkownika	Zagnieżdżony interfejs użytkownika to interfejs użytkownika, który uwidacznia kontrolki z możliwością akcji ujęty w kontenerze, na który użytkownik może również podjąć działania. Możesz na przykład mieć element widoku listy zawierający przycisk, a użytkownik może wybrać element listy lub nacisnąć przycisk zagnieżdżony w nim. Postępuj zgodnie z tymi najlepszymi rozwiązaniami, aby zapewnić użytkownikom najlepsze środowisko zagnieżdżonego interfejsu użytkownika.

Widok siatki

Widoki siatki są odpowiednie do rozmieszczania i przeglądania kolekcji zawartości opartych na obrazach. Układ widoku siatki przewija się w pionie i przesuwa w poziomie. Elementy znajdują się w układzie opakowanym, ponieważ są wyświetlane w kolejności odczytu od lewej do prawej, a następnie od góry do dołu.

Czy jest to właściwa kontrola?

Użyj widoku siatki, aby:

• Wyświetl kolekcję zawartości, w której centralnym punktem każdego elementu jest obraz, a każdy element powinien mieć takie samo zachowanie wizualne i interakcji.
• Wyświetlanie bibliotek zawartości.
• Sformatuj dwa widoki zawartości skojarzone z powiększeniem semantycznym.
• 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ęć

Uwaga / Notatka

Jeśli musisz obsługiwać zdarzenia wskaźnika dla UIElement w przewijanym widoku (takim jak ScrollViewer lub ListView), należy wyłączyć jawnie obsługę zdarzeń manipulacji na elemencie, wywołując UIElement.CancelDirectmanipulation(). Aby ponownie włączyć zdarzenia manipulowania w widoku, wywołaj metodę UIElement.TryStartDirectManipulation().

Przykłady

W tym przykładzie przedstawiono typowy układ widoku siatki, w tym przypadku w przypadku przeglądania aplikacji. Metadane elementów widoku siatki są zwykle ograniczone do kilku wierszy tekstu i klasyfikacji elementów.

Widok siatki jest idealnym rozwiązaniem dla biblioteki zawartości, która jest często używana do prezentowania multimediów, takich jak obrazy i filmy wideo. W bibliotece zawartości użytkownicy oczekują, że będzie mógł nacisnąć element, aby wywołać akcję.

Powiązane artykuły

Temat	Description
widok listy i widok siatki	Poznaj podstawowe informacje dotyczące korzystania z widoku listy lub widoku siatki w aplikacji.
kontenery i szablony elementów	Elementy wyświetlane na liście lub w widoku siatki mogą odgrywać ważną rolę w ogólnym wyglądzie aplikacji. Aby aplikacja wyglądała świetnie, dostosowując wygląd elementów kolekcji przez modyfikowanie szablonów kontrolek i szablonów danych.
Szablony elementów dla widoku siatki	Użyj tych przykładowych szablonów elementów dla elementu ListView, aby uzyskać wygląd typowych typów aplikacji.
Zagnieżdżony interfejs użytkownika	Zagnieżdżony interfejs użytkownika to interfejs użytkownika, który uwidacznia kontrolki z możliwością akcji ujęty w kontenerze, na który użytkownik może również podjąć działania. Możesz na przykład mieć element widoku listy zawierający przycisk, a użytkownik może wybrać element listy lub nacisnąć przycisk zagnieżdżony w nim. Postępuj zgodnie z tymi najlepszymi rozwiązaniami, aby zapewnić użytkownikom najlepsze środowisko zagnieżdżonego interfejsu użytkownika.

Przełącz widok

Widoki przerzucania są odpowiednie do przeglądania kolekcji zawartości opartych na obrazach, w szczególności w przypadku, gdy żądane środowisko ma być widoczne tylko dla jednego obrazu naraz. Widok przerzucania umożliwia użytkownikowi przenoszenie lub przerzucanie elementów kolekcji (w pionie lub w poziomie), gdy każdy element jest wyświetlany pojedynczo po interakcji użytkownika.

Czy jest to właściwa kontrola?

Użyj widoku przerzucania, aby:

• Wyświetl małą lub średnią (mniejszą niż 25 elementów) kolekcję, w której kolekcja składa się z obrazów z niewielką ilością metadanych.
• Wyświetlaj elementy pojedynczo i umożliwia użytkownikowi końcowemu przeglądanie elementów we własnym tempie.
• Uwzględnij różne przypadki użycia, w tym następujące typowe:
  • Galerie zdjęć
  • Galerie produktów lub pokazy

Przykłady

W poniższych dwóch przykładach przedstawiono widok FlipView, który przerzuca odpowiednio w poziomie i w pionie.

Powiązane artykuły

Temat	Description
przełączanie widoku	Poznaj podstawowe informacje dotyczące korzystania z widoku przerzucania w aplikacji oraz sposobu dostosowywania wyglądu elementów w widoku przerzucania.

Widok drzewa

Widoki drzewa są odpowiednie do wyświetlania kolekcji opartych na tekście, które mają ważną hierarchię, którą należy zaprezentować. Elementy widoku drzewa są zwijane/rozszerzalne, są wyświetlane w hierarchii wizualizacji, można uzupełnić ikonami i można przeciągać i upuszczać między widokami drzewa. Widoki drzewa umożliwiają zagnieżdżanie na poziomie N.

Czy jest to właściwa kontrola?

Użyj widoku drzewa, aby:

• Wyświetl kolekcję zagnieżdżonych elementów, których kontekst i znaczenie jest zależne od hierarchii lub określonego łańcucha organizacyjnego.
• Uwzględnij różne przypadki użycia, w tym następujące typowe:
  • Przeglądarka plików
  • Schemat organizacyjny firmy

Przykłady

Oto przykład widoku drzewa, który reprezentuje eksploratora plików i wyświetla wiele różnych zagnieżdżonych elementów uzupełnionych ikonami.

Powiązane artykuły

Temat	Description
Widok drzewa	Poznaj podstawowe informacje na temat korzystania z widoku drzewa w aplikacji oraz sposobu dostosowywania zachowania wyglądu i interakcji elementów w widoku drzewa.

ItemsRepeater

Element ItemsRepeater różni się od pozostałych kontrolek kolekcji wyświetlanych na tej stronie, ponieważ nie zapewnia żadnych stylów ani interakcji poza ramką, tj. po prostu umieszczonej na stronie bez definiowania żadnych właściwości. ItemsRepeater jest raczej blokiem konstrukcyjnym, którego jako deweloper możesz użyć do utworzenia własnej kontrolki kolekcji niestandardowych, w szczególności tej, której nie można osiągnąć przy użyciu innych kontrolek w tym artykule. ItemsRepeater to oparty na danych i wysokiej wydajności panel, który można dostosować do konkretnych potrzeb.

Wskazówka

Kontrolka ItemsView jest oparta na kontrolce ItemsRepeater i zapewnia wiele zalet elementu ItemsRepeater bez konieczności tworzenia własnej niestandardowej kontrolki kolekcji.

Czy jest to właściwa kontrola?

Użyj elementu ItemsRepeater, jeśli:

• Masz określony interfejs użytkownika i środowisko użytkownika, którego nie można utworzyć przy użyciu istniejących kontrolek kolekcji.
• Masz istniejące źródło danych dla elementów (na przykład dane pobierane z Internetu, bazy danych lub wstępnie istniejącej kolekcji w kodzie).

Przykłady

Poniższe trzy przykłady to wszystkie kontrolki ItemsRepeater powiązane z tym samym źródłem danych (kolekcja liczb). Kolekcja liczb jest reprezentowana na trzy sposoby, a każda z poniższych pozycji ItemsRepeaters używa innego niestandardowego układu i innego niestandardowego elementuTemplate.

Powiązane artykuły

Temat	Description
ItemsRepeater	Poznaj podstawowe informacje na temat korzystania z elementu ItemsRepeater w aplikacji oraz sposobu implementowania wszystkich niezbędnych składników interakcji i wizualizacji dla widoku kolekcji.

Lista kontrolna globalizacji i lokalizacji

• Zawijanie: Zezwalaj na dwa wiersze etykiety listy.
• Rozszerzanie w poziomie: upewnij się, że pola mogą pomieścić rozszerzanie tekstu i można je przewijać.
• Odstępy w pionie: użyj znaków innych niż łaciński do odstępów pionowych, aby upewnić się, że skrypty inne niż łacińskie będą prawidłowo wyświetlane.

Pobieranie przykładowego kodu

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

Powiązane artykuły

Wskazówki dotyczące projektowania i środowiska użytkownika

• lista/szczegóły
• Okienko nawigacji
• przybliżanie semantyczne
• przeciąganie i upuszczanie
• Miniatur

Dokumentacja interfejsu API

• Klasa ListView
• GridView, klasa
• ComboBox, klasa
• ListBox, klasa