Výběr šablony dat: Stylování položek na základě jejich vlastností

Přizpůsobený návrh ovládacích prvků kolekcí spravuje DataTemplate. Šablony dat určují, jak mají být jednotlivé položky rozloženy a stylizovány, a toto značení se aplikuje na každou položku v kolekci. Tento článek vysvětluje, jak použít DataTemplateSelector použít různé šablony dat v kolekci a vybrat, kterou datovou šablonu použít, na základě určitých vlastností nebo hodnot položky podle vašeho výběru.

Důležitá rozhraní API: DataTemplateSelector, DataTemplate

DataTemplateSelector je třída, která umožňuje vlastní logiku výběru šablony. Umožňuje definovat pravidla, která určují, která datová šablona se má použít pro určité položky v kolekci. Pokud chcete tuto logiku implementovat, vytvoříte v kódu podtřídu DataTemplateSelector a definujete logiku, která určuje, kterou datovou šablonu použít pro kterou kategorii položek (například položky určitého typu nebo položky s určitou hodnotou vlastnosti atd.). Instanci této třídy deklarujete v části Resources souboru XAML spolu s definicemi šablon dat, které budete používat. Tyto prostředky identifikujete s x:Key hodnotou, která vám umožní odkazovat na ně v XAML.

Požadavky

• Jak používat a vytvořit ovládací prvek kolekce, například ListView nebo GridView.
• Jak přizpůsobit vzhled položek pomocí objektu DataTemplate

Pokud nepoužíváte DataTemplateSelector

Obecně byste neměli dát každé položce v Objektu ListView nebo GridView úplně jiné rozložení/styl – to by bylo špatné použití DataTemplateSelector a negativně ovlivnit výkon.

Některé prvky vizuálního zobrazení položky seznamu lze řídit pomocí pouze jedné šablony dat prostřednictvím vazby určitých vlastností. Položky můžou mít například jinou ikonu vazbou na zdrojovou vlastnost ikony v šabloně dat a dát každé položce jinou hodnotu pro tuto vlastnost zdroje ikony. Tím dosáhnete lepšího výkonu, než když použijete DataTemplateSelector.

Kdy použít DataTemplateSelector

DataTemplateSelector byste měli vytvořit, pokud chcete použít více šablon dat v jednom ovládacím prvku kolekce. DataTemplateSelector vám nabízí flexibilitu, která umožňuje některé položky zvýraznit, a přitom zachovat ostatní v podobném rozložení. Existuje mnoho případů použití, ve kterých je užitečný DataTemplateSelector a několik scénářů, ve kterých je lepší si znovu představit ovládací prvek a strategii, kterou používáte.

Ovládací prvky kolekce jsou obvykle vázány na kolekci položek, které jsou všechny jeden typ. I když však položky mohou být stejného typu, mohou mít různé hodnoty pro určité vlastnosti nebo představují různé významy. Některé položky mohou být také důležitější než jiné, nebo jedna položka může být obzvláště důležitá nebo odlišná a musí vizuálně vyniknout. V těchto situacích bude velmi užitečné dataTemplateSelector.

Můžete také vytvořit vazbu na kolekci, která obsahuje různé typy položek – vázaná kolekce může obsahovat kombinaci řetězců, int, vlastních objektů třídy a dalších. Díky tomu je DataTemplateSelector zvláště užitečný, protože může přiřadit různé šablony dat na základě typu objektu položky.

Tady je několik příkladů, kdy můžete použít selektor šablon dat:

• Reprezentace různých úrovní zaměstnanců v zobrazení ListView – každý typ nebo úroveň zaměstnance může potřebovat jiné barevné pozadí, aby bylo možné snadno rozlišit.
• Reprezentace prodejních položek v galerii produktů, která používá GridView – položka prodeje může potřebovat červené pozadí nebo jiné barevné písmo, aby vynikly od běžných cenových položek.
• Reprezentace vítězů/nejlepších fotek v galerii fotografií pomocí FlipView
• Potřebujete znázorňovat záporná/kladná čísla v ListView jinak nebo krátké řetězce/dlouhé řetězce.

Vytvoření objektu DataTemplateSelector

Při vytváření selektoru šablon dat definujete logiku výběru šablony v kódu a definujete šablony dat v xaml.

Komponenta za kódem

Pokud chcete použít selektor šablony dat, nejprve ve svém kódu vytvoříte podtřídu DataTemplateSelector (třídu, která je z ní odvozena). Ve třídě deklarujete každou šablonu jako vlastnost třídy. Potom přepíšete metodu SelectTemplateCore tak, aby zahrnovala vlastní logiku výběru šablony.

Tady je příklad jednoduché DataTemplateSelector podtřídy s názvem 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;
        }
    }
}

Třída MyDataTemplateSelector je odvozena z DataTemplateSelector třídy a první definuje dva Objekty DataTemplate : Normal a Accent. Prozatím se jedná o prázdné deklarace, ale v souboru XAML se "vyplní" kódem.

Metoda SelectTemplateCore přijímá objekt položky (tj. každou položku kolekce) a je překrytá pravidly, podle kterých DataTemplate má být vrácen za jakých okolností. V tomto případě, když je položka liché číslo, dostane šablonu dat Accent, zatímco pokud je sudé číslo, dostane šablonu dat Normal.

Komponenta XAML

Za druhé, musíte vytvořit instanci této nové MyDataTemplateSelector třídy v části Resources souboru XAML. Všechny prostředky vyžadují x:Key, které použijete k propojení s vlastností ItemTemplateSelector vašeho ovládacího prvku kolekce (v pozdějším kroku). Také vytvoříte dvě instance DataTemplate objektů a definujete jejich rozložení v oddílu prostředků. Tyto šablony dat přiřadíte k vlastnostem AccentNormal , které jste deklarovali ve MyDataTemplateSelector třídě.

Tady je příklad potřebných prostředků XAML a značek:

<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 vidíte výše, dvě šablony Normal dat a Accent jsou definované – obě zobrazují položky jako tlačítka, ale Accent šablona dat používá pro pozadí barevný štětec zvýraznění, zatímco Normal šablona dat používá šedý barevný štětec (SystemChromeLowColor). Tyto dvě šablony dat se poté přiřadí k objektům Normal a Accent DataTemplate, které jsou atributy třídy MyDataTemplateSelector vytvořenými v kódu na pozadí v jazyce C#.

Posledním krokem je svázání DataTemplateSelector s vlastností ItemTemplateSelector ovládacího prvku kolekce (v tomto případě ListView). Tím se nahradí nutnost přiřazení hodnoty k ItemTemplate vlastnosti.

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

Jakmile se kód zkompiluje, každá položka kolekce se spustí prostřednictvím přepsané SelectTemplateCore metody v MyDataTemplateSelector a bude vykreslena s příslušnou šablonou dat.

Aspekty výkonu DataTemplateSelector

Pokud používáte ListView nebo GridView s velkou kolekcí dat, může být výkon při posouvání a procházení problematický. Aby velké kolekce fungovaly dobře, existuje několik kroků, které můžete provést ke zlepšení výkonu šablon dat. Tyto informace jsou podrobněji popsány v ListView a GridView optimalizace uživatelského rozhraní.

• Snížení počtu prvků na položku – Udržujte počet prvků uživatelského rozhraní v šabloně dat na přiměřené minimum.
• Recyklace kontejnerů s heterogenními kolekcemi
  • Použijte událost ChoosingItemContainer – tato událost představuje vysoce výkonný způsob využití různých šablon dat na různé položky. Abyste dosáhli nejlepšího výkonu, měli byste optimalizovat ukládání do mezipaměti a výběr šablon dat pro konkrétní data.
  • Použijte selektor šablony položky – selektoru šablony položky (DataTemplateSelector) by se v některých případech mělo vyhnout kvůli jeho dopadu na výkon.