Wybór szablonu danych: Styleing items based on their properties (Wybór szablonu danych: style elementów na podstawie ich właściwości)

Dostosowany projekt kontrolek kolekcji jest zarządzany przez element DataTemplate. Szablony danych definiują układ i styl każdego elementu, a te szablony są stosowane do każdego elementu w kolekcji. W tym artykule wyjaśniono, jak używać elementu DataTemplateSelector do stosowania różnych szablonów danych w kolekcji i wybierania szablonu danych do użycia na podstawie wybranych właściwości lub wartości elementu.

Ważne interfejsy API: DataTemplateSelector, DataTemplate

DataTemplateSelector to klasa, która umożliwia logikę wyboru szablonu niestandardowego. Umożliwia zdefiniowanie reguł określających szablon danych do użycia dla niektórych elementów w kolekcji. Aby zaimplementować tę logikę, należy utworzyć podklasę elementu DataTemplateSelector w kodzie i zdefiniować logikę określającą, który szablon danych ma być używany dla której kategorii elementów (na przykład elementów określonego typu lub elementów o określonej wartości właściwości itp.). Zadeklarujesz wystąpienie tej klasy w sekcji Zasoby pliku XAML wraz z definicjami szablonów danych, których będziesz używać. Zidentyfikuj te zasoby za pomocą wartości x:Key, która umożliwia odwołanie się do nich w XAML.

Wymagania wstępne

• Jak używać i tworzyć kontrolkę kolekcji, taką jak ListView lub GridView.
• Jak dostosować wygląd elementów przy użyciu elementu DataTemplate.

Kiedy nie należy używać obiektu DataTemplateSelector

Ogólnie rzecz biorąc, nie należy nadawać każdemu elementowi w widoku ListView lub GridView zupełnie innego układu/stylu — byłoby to słabe użycie elementu DataTemplateSelector i negatywnie wpływało na wydajność.

Niektóre elementy wizualnego wyświetlania elementu listy można kontrolować przy użyciu tylko jednego szablonu danych, przez powiązanie niektórych właściwości. Na przykład elementy mogą mieć inną ikonę przez powiązanie z właściwością źródłową ikony w szablonie danych i nadanie każdemu elementowi innej wartości dla tej właściwości źródłowej ikony. Pozwoliłoby to osiągnąć lepszą wydajność niż użycie elementu DataTemplateSelector.

Kiedy należy używać obiektu DataTemplateSelector

Należy utworzyć element DataTemplateSelector , jeśli chcesz użyć wielu szablonów danych w jednej kontrolce kolekcji. Element A DataTemplateSelector zapewnia elastyczność wyróżniania niektórych elementów, zachowując jednocześnie elementy w podobnym układzie. Istnieje wiele przypadków użycia, w których przydaje się element DataTemplateSelector, a kilka scenariuszy, w których lepiej przemyśleć używaną kontrolę i strategię.

Kontrolki kolekcji są zwykle powiązane z kolekcją elementów, które są tego samego typu. Jednak mimo że elementy mogą być tego samego typu, mogą mieć różne wartości dla niektórych właściwości lub reprezentują różne znaczenia. Niektóre elementy mogą być również ważniejsze niż inne lub jeden element może być szczególnie ważny lub inny i musi wizualnie wyróżniać. W takich sytuacjach bardzo pomocny będzie element DataTemplateSelector.

Można również powiązać z kolekcją zawierającą różne typy elementów — powiązana kolekcja może zawierać kombinację ciągów, kropek, obiektów niestandardowych klas i nie tylko. Dzięki temu funkcja DataTemplateSelector jest szczególnie przydatna, ponieważ może przypisywać różne szablony danych na podstawie typu obiektu elementu.

Oto kilka przykładów użycia selektora szablonu danych:

• Reprezentowanie różnych poziomów pracowników w widoku ListView — każdy typ/poziom pracownika może wymagać innego tła kolorów, aby można było łatwo je odróżnić.
• Reprezentowanie towarów promocyjnych w galerii produktów używającej kontrolki GridView — produkt na sprzedaż może wymagać czerwonego tła lub innego koloru czcionki, aby wyróżniać się na tle produktów o regularnych cenach.
• Reprezentowanie zwycięzców/najlepszych zdjęć w galerii zdjęć przy użyciu FlipView.
• Potrzeba różnego przedstawienia liczb ujemnych/dodatnich w ListView lub krótkich/długich ciągów.

Utwórz element DataTemplateSelector

Podczas tworzenia selektora szablonu danych należy zdefiniować logikę wyboru szablonu w kodzie i zdefiniować szablony danych w języku XAML.

Składnik związany z kodem

Aby użyć selektora szablonu danych, należy najpierw utworzyć podklasę DataTemplateSelector (klasę pochodzącą z niego) w kodzie. W klasie deklarujesz każdy szablon jako właściwość klasy. Następnie zastąpisz metodę SelectTemplateCore , aby uwzględnić własną logikę wyboru szablonu.

Oto przykład prostej DataTemplateSelector podklasy o nazwie MyDataTemplateSelector.

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Normal { get; set; }
    public DataTemplate Accent { get; set; }

    protected override DataTemplate SelectTemplateCore(object item)
    {
        if ((int)item % 2 == 0)
        {
            return Normal;
        }
        else
        {
            return Accent;
        }
    }
}

Klasa MyDataTemplateSelector pochodzi z DataTemplateSelector klasy i najpierw definiuje dwa obiekty DataTemplate : Normal i Accent. Są to na razie puste deklaracje, ale zostaną wypełnione znacznikami w pliku XAML.

Metoda SelectTemplateCore przyjmuje obiekt elementu (tj. każdy element kolekcji) i jest nadpisywana regułami określającymi, który DataTemplate ma być zwracany w określonych okolicznościach. W takim przypadku, jeśli element jest liczbą nieparzystną, otrzymuje Accent szablon danych, podczas gdy jest to liczba parzysta, otrzymuje Normal szablon danych.

Składnik XAML

Po drugie, należy utworzyć wystąpienie tej nowej MyDataTemplateSelector klasy w sekcji Zasoby pliku XAML. Wszystkie zasoby wymagają x:Key, który służy do powiązania go z właściwością ItemTemplateSelector kontrolki kolekcji (w późniejszym kroku). Utworzysz również dwa wystąpienia DataTemplate obiektów i zdefiniuj ich układ w sekcji zasobów. Przypisujesz te szablony danych do właściwości Accent i Normal, które zadeklarowałeś w klasie MyDataTemplateSelector.

Oto przykład potrzebnych zasobów XAML i znaczników:

<Page.Resources>

<DataTemplate x:Key="NormalItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemChromeLowColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<DataTemplate x:Key="AccentItemTemplate" x:DataType="x:Int32">
    <Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="{ThemeResource SystemAccentColor}">
        <TextBlock Text="{x:Bind}" />
    </Button>
</DataTemplate>

<l:MyDataTemplateSelector x:Key="MyDataTemplateSelector"
    Normal="{StaticResource NormalItemTemplate}"
    Accent="{StaticResource AccentItemTemplate}"/>

</Page.Resources>

Jak widać powyżej, zdefiniowane są dwa szablony danych Normal i Accent — oba wyświetlają elementy jako przyciski. Jednak szablon danych Accent używa pędzla koloru akcentu dla tła, podczas gdy szablon danych Normal używa szarego pędzla koloru (SystemChromeLowColor). Te dwa szablony danych są następnie przypisywane do obiektów Normal i Accent typu DataTemplate, które są atrybutami klasy MyDataTemplateSelector, utworzonymi w pliku code-behind w języku C#.

Ostatnim krokiem jest powiązanie DataTemplateSelector z właściwością ItemTemplateSelector kontrolki kolekcji (w tym przypadku ListView). Zastępuje to konieczność przypisania wartości do ItemTemplate właściwości.

<ListView x:Name = "TestListView"
          ItemsSource = "{x:Bind NumbersList}"
          ItemTemplateSelector = "{StaticResource MyDataTemplateSelector}">
</ListView>

Po skompilowaniu kodu każdy element kolekcji będzie uruchamiany przez przesłoniętą metodę SelectTemplateCore w MyDataTemplateSelector i zostanie renderowany przy użyciu odpowiedniego DataTemplate.

Zagadnienia dotyczące wydajności narzędzia DataTemplateSelector

Jeśli używasz elementu ListView lub GridView z dużą kolekcją danych, wydajność przewijania i przesuwania może budzić obawy. Aby zachować dobre wyniki dużych kolekcji, możesz wykonać kilka kroków w celu zwiększenia wydajności szablonów danych. Opisano je bardziej szczegółowo w temacie ListView i GridView UI optimization (Optymalizacja interfejsu użytkownika usługi GridView).

• Redukcja elementów na element — zachowaj liczbę elementów interfejsu użytkownika w szablonie danych do rozsądnego minimum.
• Recykling kontenerów z kolekcjami heterogenicznymi
  • Użyj zdarzenia ChoosingItemContainer — to zdarzenie jest sposobem wysokiej wydajności na używanie różnych szablonów danych dla różnych elementów. Aby uzyskać najlepszą wydajność, należy zoptymalizować buforowanie i wybrać szablony danych dla określonych danych.
  • Użyj selektora szablonu elementu — selektor szablonu elementu (DataTemplateSelector) należy unikać w niektórych przypadkach ze względu na wpływ na wydajność.