Freigeben über

Auswahl von Datenvorlagen: Formatieren von Elementen basierend auf ihren Eigenschaften

Das angepasste Design von Steuerelementen für Auflistungen wird durch ein DataTemplate verwaltet. Datenvorlagen definieren, wie jedes Element angeordnet und formatiert werden soll, und dieses Markup wird auf jedes Element in der Auflistung angewendet. In diesem Artikel wird erläutert, wie Sie mithilfe eines DataTemplateSelector verschiedene Datenvorlagen auf eine Sammlung anwenden und auswählen, welche Datenvorlage verwendet werden soll, basierend auf bestimmten Elementeigenschaften oder Werten Ihrer Wahl.

Wichtige APIs: DataTemplateSelector, DataTemplate

DataTemplateSelector ist eine Klasse, die benutzerdefinierte Vorlagenauswahllogik ermöglicht. Sie können Regeln definieren, die angeben, welche Datenvorlage für bestimmte Elemente in einer Auflistung verwendet werden soll. Um diese Logik zu implementieren, erstellen Sie eine Unterklasse von DataTemplateSelector in Ihrem CodeBehind und definieren die Logik, die bestimmt, welche Datenvorlage für welche Kategorie von Elementen verwendet werden soll (z. B. Elemente eines bestimmten Typs oder Elemente mit einem bestimmten Eigenschaftswert usw.). Sie deklarieren eine Instanz dieser Klasse im Abschnitt "Ressourcen" Ihrer XAML-Datei sowie die Definitionen der verwendeten Datenvorlagen. Sie identifizieren diese Ressourcen mit einem x:Key Wert, mit dem Sie in Xaml darauf verweisen können.

Voraussetzungen

Wann kein DataTemplateSelector verwendet werden soll

Im Allgemeinen sollten Sie nicht jedem Element in einem ListView- oder GridView-Element ein völlig anderes Layout/eine andere Formatvorlage geben – dies wäre eine schlechte Verwendung eines DataTemplateSelector und wirkt sich negativ auf die Leistung aus.

Bestimmte Elemente der visuellen Anzeige eines Listenelements können mithilfe nur einer Datenvorlage gesteuert werden, indem bestimmte Eigenschaften gebunden werden. Beispielsweise können Elemente über ein anderes Symbol verfügen, indem sie an eine Symbolquelleigenschaft in der Datenvorlage binden und jedem Element einen anderen Wert für diese Symbolquelleigenschaft geben. Dies würde eine bessere Leistung erzielen als die Verwendung eines DataTemplateSelector.

Wann man einen DataTemplateSelector verwendet

Sie sollten einen DataTemplateSelector erstellen, wenn Sie mehrere Datenvorlagen in einem Sammlungssteuerelement verwenden möchten. A DataTemplateSelector bietet Ihnen die Flexibilität, bestimmte Elemente hervorzuheben und gleichzeitig Elemente in einem ähnlichen Layout beizubehalten. Es gibt viele Anwendungsfälle, in denen ein DataTemplateSelector hilfreich ist, und einige Szenarien, in denen es besser ist, das Steuerelement und die Strategie, die Sie verwenden, neu zu denken.

Auflistungssteuerelemente sind in der Regel an eine Sammlung von Objekten gebunden, die alle denselben Typ haben. Obwohl Elemente jedoch denselben Typ aufweisen, können sie unterschiedliche Werte für bestimmte Eigenschaften aufweisen oder unterschiedliche Bedeutungen darstellen. Bestimmte Elemente können auch wichtiger sein als andere, oder ein Element kann besonders wichtig oder anders sein und muss visuell hervorgehoben werden. In diesen Situationen ist ein DataTemplateSelector sehr hilfreich.

Sie können auch eine Bindung an eine Auflistung erstellen, die unterschiedliche Elementtypen enthält – die gebundene Auflistung kann eine Mischung aus Zeichenfolgen, Ints, benutzerdefinierten Klassenobjekten und mehr aufweisen. Dies macht DataTemplateSelector besonders nützlich, da es verschiedene Datenvorlagen basierend auf dem Objekttyp eines Elements zuweisen kann.

Hier sind einige Beispiele für die Verwendung eines Datentemplate-Auswahltools:

  • Die Darstellung verschiedener Ebenen von Mitarbeitern innerhalb einer ListView - jeder Mitarbeitertyp/jede Mitarbeiterebene benötigt möglicherweise einen anderen Farbhintergrund, um leicht zu unterscheiden.
  • Darstellen von Verkaufsartikeln in einer Produktgalerie, die ein GridView verwendet – ein Verkaufsartikel benötigt möglicherweise einen roten Hintergrund oder eine andere Farbschriftart, um sie von regulären Preisen hervorzuheben.
  • Darstellen von Gewinnern/Top-Fotos in einer Fotogalerie mithilfe von FlipView.
  • Muss negative/positive Zahlen in einer ListView anders darstellen, oder kurze Zeichenfolgen/lange Zeichenfolgen.

Erstellen eines DataTemplateSelectors

Wenn Sie eine Datenvorlagenauswahl erstellen, definieren Sie die Vorlagenauswahllogik in Ihrem Code, und Sie definieren die Datenvorlagen in Ihrem XAML.

CodeBehind-Komponente

Um eine Datenvorlagenauswahl zu verwenden, erstellen Sie zunächst eine Unterklasse von DataTemplateSelector (eine Klasse, die daraus abgeleitet wird) in Ihrem CodeBehind. In Ihrer Klasse deklarieren Sie jede Vorlage als Eigenschaft der Klasse. Anschließend überschreiben Sie die SelectTemplateCore-Methode , um Ihre eigene Vorlagenauswahllogik einzuschließen.

Hier ist ein Beispiel für eine einfache DataTemplateSelector Unterklasse namens 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;
        }
    }
}

Die MyDataTemplateSelector Klasse wird von der DataTemplateSelector Klasse abgeleitet und definiert zunächst zwei DataTemplate-Objekte : Normal und Accent. Dies sind vorerst leere Deklarationen, werden aber mit Markup in der XAML-Datei "ausgefüllt".

Die SelectTemplateCore-Methode nimmt ein Elementobjekt (d. h. jedes Auflistungselement) entgegen und wird mit Regeln überschrieben, die bestimmen, welcher DataTemplate unter welchen Umständen zurückgegeben wird. Wenn das Element eine ungerade Zahl ist, erhält es die Accent Datenvorlage, während es bei einer geraden Zahl die Normal Datenvorlage erhält.

XAML-Komponente

Zweitens müssen Sie eine Instanz dieser neuen MyDataTemplateSelector Klasse im Abschnitt "Ressourcen" Ihrer XAML-Datei erstellen. Für alle Ressourcen ist eine x:Key Bindung an die ItemTemplateSelectorEigenschaft Ihres Sammlungssteuerelements erforderlich (in einem späteren Schritt). Außerdem erstellen Sie zwei Instanzen von DataTemplate Objekten und definieren ihr Layout im Abschnitt "Ressourcen". Sie weisen diese Datenvorlagen den Accent und Normal Eigenschaften zu, die Sie in der MyDataTemplateSelector Klasse deklariert haben.

Nachfolgend finden Sie ein Beispiel für die erforderlichen XAML-Ressourcen und Markups:

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

Wie Sie oben sehen können, werden die beiden Datenvorlagen Normal definiert und Accent definiert – beide zeigen Elemente als Schaltflächen an, die Datenvorlage verwendet jedoch Accent einen Akzentfarbenpinsel für den Hintergrund, während die Normal Datenvorlage einen grauen Farbpinsel (SystemChromeLowColor) verwendet. Diese beiden Datenvorlagen werden dann den NormalDataTemplate-ObjektenAccent zugewiesen, die Attribute der MyDataTemplateSelector-Klasse sind, die im C#-Code-Behind erstellt wurden.

Der letzte Schritt besteht darin, Ihren DataTemplateSelector an die ItemTemplateSelector-Eigenschaft Ihres Auflistungssteuerelements (in diesem Fall eine ListView) zu binden. Dadurch wird die Notwendigkeit ersetzt, der ItemTemplate Eigenschaft einen Wert zuzuweisen.

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

Nach der Kompilierung des Codes durchläuft jedes Sammlungselement die überschriebenen SelectTemplateCore-Methode in MyDataTemplateSelector und wird mit dem passenden DataTemplate gerendert.

Von Bedeutung

Bei der Verwendung von DataTemplateSelector mit einem ItemsRepeater binden Sie die DataTemplateSelector an die ItemTemplate Eigenschaft. ItemsRepeater verfügt nicht über eine ItemTemplateSelector Eigenschaft.

Überlegungen zur Leistung von DataTemplateSelector

Wenn Sie eine ListView oder GridView mit einer großen Datensammlung verwenden, kann die Leistung beim Scrollen und Verschieben von Daten ein Problem darstellen. Um eine gute Leistung großer Sammlungen zu gewährleisten, gibt es einige Schritte, die Sie ausführen können, um die Leistung Ihrer Datenvorlagen zu verbessern. Diese werden in der Optimierung der ListView- und GridView-Benutzeroberfläche ausführlicher beschrieben.

  • Elementreduzierung pro Element – Halten Sie die Anzahl der UI-Elemente in einer Datenvorlage auf ein angemessenes Minimum.
  • Containerrecycling mit heterogenen Sammlungen
    • Verwenden Sie das ChoosingItemContainer-Ereignis – Dieses Ereignis ist eine leistungsstarke Möglichkeit, unterschiedliche Datenvorlagen für verschiedene Elemente zu verwenden. Um eine optimale Leistung zu erzielen, sollten Sie das Zwischenspeichern und Auswählen von Datenvorlagen für Ihre spezifischen Daten optimieren.
    • Verwenden Sie eine Elementvorlagenauswahl – Eine Elementvorlagenauswahl (DataTemplateSelector) sollte in einigen Fällen aufgrund ihrer Auswirkungen auf die Leistung vermieden werden.
  • Last updated on