Übersicht über DatenvorlagenData Templating Overview

Mithilfe des WPF-Datenvorlagenmodells können Sie die Darstellung Ihrer Daten flexibel definieren.The WPF data templating model provides you with great flexibility to define the presentation of your data. WPF-Steuerelemente verfügen über integrierte Funktionen, die die Anpassung der Datendarstellung unterstützen.WPF controls have built-in functionality to support the customization of data presentation. In diesem Thema veranschaulicht, wie definieren Sie zuerst eine DataTemplate und anschließend werden weitere Datenvorlagenfeatures-vorgestellt, wie z. B. die Auswahl von Vorlagen anhand benutzerdefinierter Logik und die Unterstützung für die Anzeige hierarchischer Daten.This topic first demonstrates how to define a DataTemplate and then introduces other data templating features, such as the selection of templates based on custom logic and the support for the display of hierarchical data.

VorraussetzungenPrerequisites

Der Schwerpunkt dieses Themas liegt auf Datenvorlagenfeatures. Es bietet keine Einführung in Datenbindungskonzepte.This topic focuses on data templating features and is not an introduction of data binding concepts. Informationen zu grundlegende Datenbindungskonzepten finden Sie in der Übersicht über Datenbindung.For information about basic data binding concepts, see the Data Binding Overview.

DataTemplate geht es um die Darstellung von Daten und ist einer der vielen Features des WPF-Stile und Vorlagen-Modells.DataTemplate is about the presentation of data and is one of the many features provided by the WPF styling and templating model. Eine Einführung in von WPF-Stile und Vorlagen Modells, z. B. wie Sie mit einem Style um Eigenschaften für Steuerelemente festlegen zu können, finden Sie unter den Stile und Vorlagen Thema.For an introduction of the WPF styling and templating model, such as how to use a Style to set properties on controls, see the Styling and Templating topic.

Darüber hinaus ist es wichtig zu verstehen, Resources, die sind im Wesentlichen das, was Objekte ermöglichen, z.B. Style und DataTemplate wiederverwendbarkeit.In addition, it is important to understand Resources, which are essentially what enable objects such as Style and DataTemplate to be reusable. Weitere Informationen zu Ressourcen finden Sie unter XAML-Ressourcen.For more information on resources, see XAML Resources.

Grundlegendes zu DatenvorlagenData Templating Basics

Warum veranschaulicht DataTemplate ist wichtig, betrachten wir eines Datenbindungsbeispiels veranschaulicht.To demonstrate why DataTemplate is important, let's walk through a data binding example. In diesem Beispiel haben wir eine ListBox , gebunden ist, um eine Liste der Task Objekte.In this example, we have a ListBox that is bound to a list of Task objects. Jedes Task-Objekt verfügt über TaskName (string), Description (string), Priority (int) und eine Eigenschaft des Typs TaskType, wobei es sich um ein Enum mit dem mit den Werten Home und Work handelt.Each Task object has a TaskName (string), a Description (string), a Priority (int), and a property of type TaskType, which is an Enum with values Home and Work.

<Window x:Class="SDKSample.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:SDKSample"
  Title="Introduction to Data Templating Sample">
  <Window.Resources>
    <local:Tasks x:Key="myTodoList"/>

</Window.Resources>
  <StackPanel>
    <TextBlock Name="blah" FontSize="20" Text="My Task List:"/>
    <ListBox Width="400" Margin="10"
             ItemsSource="{Binding Source={StaticResource myTodoList}}"/>
  </StackPanel>
</Window>

Ohne „DataTemplate“Without a DataTemplate

Ohne eine DataTemplate, unsere ListBox derzeit sieht wie folgt aus:Without a DataTemplate, our ListBox currently looks like this:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Was passiert ist, ohne bestimmten Anweisungen, die ListBox durch Aufrufe der standardmäßigen ToString beim Versuch, die Objekte in der Auflistung anzuzeigen.What's happening is that without any specific instructions, the ListBox by default calls ToString when trying to display the objects in the collection. Aus diesem Grund Wenn die Task -Objekt überschreibt die ToString -Methode, und klicken Sie dann die ListBox eine Zeichenfolgendarstellung der einzelnen Quellobjekte in der zugrunde liegenden Auflistung angezeigt.Therefore, if the Task object overrides the ToString method, then the ListBox displays the string representation of each source object in the underlying collection.

Wenn z. B. die Task-Klasse auf diese Weise die ToString-Methode überschreibt, wobei name das Feld für die TaskName-Eigenschaft darstellt:For example, if the Task class overrides the ToString method this way, where name is the field for the TaskName property:

public override string ToString()
{
    return name.ToString();
}
Public Overrides Function ToString() As String
    Return _name.ToString()
End Function

Die ListBox sieht wie folgt aus:Then the ListBox looks like the following:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Das ist jedoch einschränkend und unflexibel.However, that is limiting and inflexible. Zudem können Sie beim Binden an XMLXML-Daten den ToString-Wert nicht überschreiben.Also, if you are binding to XMLXML data, you wouldn't be able to override ToString.

Definieren einer einfachen DatenvorlageDefining a Simple DataTemplate

Die Lösung besteht darin, definieren Sie eine DataTemplate.The solution is to define a DataTemplate. Eine Möglichkeit dafür festgelegt ist die ItemTemplate Eigenschaft der ListBox auf eine DataTemplate.One way to do that is to set the ItemTemplate property of the ListBox to a DataTemplate. Angeben Ihrer DataTemplate bilden die visuelle Struktur des Datenobjekts.What you specify in your DataTemplate becomes the visual structure of your data object. Die folgenden DataTemplate ist recht einfach.The following DataTemplate is fairly simple. Wird werden Anweisungen, die jedes Element als drei wird gewährt TextBlock Elemente innerhalb einer StackPanel.We are giving instructions that each item appears as three TextBlock elements within a StackPanel. Jede TextBlock Element an eine Eigenschaft gebunden ist die Task Klasse.Each TextBlock element is bound to a property of the Task class.

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}">
   <ListBox.ItemTemplate>
     <DataTemplate>
       <StackPanel>
         <TextBlock Text="{Binding Path=TaskName}" />
         <TextBlock Text="{Binding Path=Description}"/>
         <TextBlock Text="{Binding Path=Priority}"/>
       </StackPanel>
     </DataTemplate>
   </ListBox.ItemTemplate>
 </ListBox>

Bei den zugrunde liegenden Daten für die Beispiele in diesem Thema handelt es sich um eine Auflistung von CLRCLR-Objekten.The underlying data for the examples in this topic is a collection of CLRCLR objects. Wenn Sie eine Bindung an XMLXML-Daten vornehmen, stimmen die grundsätzlichen Konzepte überein, es besteht jedoch ein kleiner syntaktischer Unterschied.If you are binding to XMLXML data, the fundamental concepts are the same, but there is a slight syntactic difference. Z. B. statt Path=TaskName, legen Sie XPath zu @TaskName (Wenn TaskName ist ein Attribut des Ihre XMLXML Knoten).For example, instead of having Path=TaskName, you would set XPath to @TaskName (if TaskName is an attribute of your XMLXML node).

Jetzt unsere ListBox sieht wie folgt aus:Now our ListBox looks like the following:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Erstellen der Datenvorlage als RessourceCreating the DataTemplate as a Resource

Im obigen Beispiel definierten wir die DataTemplate Inline.In the above example, we defined the DataTemplate inline. Es ist jedoch üblicher, diese im Ressourcenabschnitt zu definieren, damit sie wiederverwendet werden kann, wie im folgenden Beispiel veranschaulicht:It is more common to define it in the resources section so it can be a reusable object, as in the following example:

<Window.Resources>
<DataTemplate x:Key="myTaskTemplate">
  <StackPanel>
    <TextBlock Text="{Binding Path=TaskName}" />
    <TextBlock Text="{Binding Path=Description}"/>
    <TextBlock Text="{Binding Path=Priority}"/>
  </StackPanel>
</DataTemplate>
</Window.Resources>

Sie können myTaskTemplate nun als Ressource verwenden, wie im folgenden Beispiel veranschaulicht:Now you can use myTaskTemplate as a resource, as in the following example:

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}"
         ItemTemplate="{StaticResource myTaskTemplate}"/>

Da myTaskTemplate ist eine Ressource, jetzt können Sie sie für andere Steuerelemente, die eine Eigenschaft zu verwenden, übernimmt ein DataTemplate Typ.Because myTaskTemplate is a resource, you can now use it on other controls that have a property that takes a DataTemplate type. Wie oben gezeigt, für die ItemsControl Objekte, z. B. die ListBox, ist die ItemTemplate Eigenschaft.As shown above, for ItemsControl objects, such as the ListBox, it is the ItemTemplate property. Für ContentControl -Objekten ist es die ContentTemplate Eigenschaft.For ContentControl objects, it is the ContentTemplate property.

Die DataType-EigenschaftThe DataType Property

Die DataTemplate -Klasse verfügt über eine DataType -Eigenschaft, die sehr ähnlich ist die TargetType Eigenschaft der Style Klasse.The DataTemplate class has a DataType property that is very similar to the TargetType property of the Style class. Aus diesem Grund anstelle einer x:Key für die DataTemplate im obigen Beispiel können Sie Folgendes tun:Therefore, instead of specifying an x:Key for the DataTemplate in the above example, you can do the following:

<DataTemplate DataType="{x:Type local:Task}">
  <StackPanel>
    <TextBlock Text="{Binding Path=TaskName}" />
    <TextBlock Text="{Binding Path=Description}"/>
    <TextBlock Text="{Binding Path=Priority}"/>
  </StackPanel>
</DataTemplate>

Dies DataTemplate wird automatisch auf alle angewendet Task Objekte.This DataTemplate gets applied automatically to all Task objects. Beachten Sie, dass die x:Key in diesem Fall implizit festgelegt wird.Note that in this case the x:Key is set implicitly. Aus diesem Grund, wenn Sie dies zuweisen DataTemplate ein x:Key Wert überschreiben Sie die implizite x:Key und DataTemplate wird nicht automatisch angewendet werden.Therefore, if you assign this DataTemplate an x:Key value, you are overriding the implicit x:Key and the DataTemplate would not be applied automatically.

Wenn Sie binden ein ContentControl auf eine Auflistung von Task Objekte, die ContentControl verwendet nicht den oben genannten DataTemplate automatisch.If you are binding a ContentControl to a collection of Task objects, the ContentControl does not use the above DataTemplate automatically. Grund hierfür ist die Bindung für eine ContentControl benötigt weitere Informationen zum unterscheiden, ob Sie eine vollständige Auflistung und die einzelnen Objekte binden möchten.This is because the binding on a ContentControl needs more information to distinguish whether you want to bind to an entire collection or the individual objects. Wenn Ihre ContentControl besteht im Nachverfolgen der Auswahl der ein ItemsControl geben, Sie können festlegen, die Path Eigenschaft der ContentControl Binden an "/", um anzugeben, dass Sie das aktuelle Element interessiert sind.If your ContentControl is tracking the selection of an ItemsControl type, you can set the Path property of the ContentControl binding to "/" to indicate that you are interested in the current item. Ein Beispiel finden Sie unter Binden an eine Auflistung und Anzeigen von Informationen auf Grundlage der Auswahl.For an example, see Bind to a Collection and Display Information Based on Selection. Andernfalls müssen Sie an der DataTemplate explizit durch Festlegen der ContentTemplate Eigenschaft.Otherwise, you need to specify the DataTemplate explicitly by setting the ContentTemplate property.

Die DataType Eigenschaft ist besonders nützlich, wenn Sie haben eine CompositeCollection verschiedener Typen von Datenobjekten.The DataType property is particularly useful when you have a CompositeCollection of different types of data objects. Ein Beispiel finden Sie unter Implementieren von CompositeCollection.For an example, see Implement a CompositeCollection.

Hinzufügen weiterer Elemente zu DataTemplateAdding More to the DataTemplate

Im Moment werden die Daten mit den notwendigen Informationen angezeigt, es sind aber definitiv noch Verbesserungen möglich.Currently the data appears with the necessary information, but there's definitely room for improvement. Wir verbessern die Darstellung durch Hinzufügen einer Border, Grid, und einige TextBlock Elemente, die die Daten zu beschreiben, die angezeigt wird.Let's improve on the presentation by adding a Border, a Grid, and some TextBlock elements that describe the data that is being displayed.


<DataTemplate x:Key="myTaskTemplate">
  <Border Name="border" BorderBrush="Aqua" BorderThickness="1"
          Padding="5" Margin="5">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Row="0" Grid.Column="0" Text="Task Name:"/>
      <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}" />
      <TextBlock Grid.Row="1" Grid.Column="0" Text="Description:"/>
      <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
      <TextBlock Grid.Row="2" Grid.Column="0" Text="Priority:"/>
      <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
    </Grid>
  </Border>
</DataTemplate>

Der folgende Screenshot zeigt die ListBox mit dieser Änderung DataTemplate:The following screenshot shows the ListBox with this modified DataTemplate:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Wir können festlegen, HorizontalContentAlignment zu Stretch auf die ListBox um sicherzustellen, dass die Breite der Elemente belegt den gesamten Speicherplatz:We can set HorizontalContentAlignment to Stretch on the ListBox to make sure the width of the items takes up the entire space:

<ListBox Width="400" Margin="10"
     ItemsSource="{Binding Source={StaticResource myTodoList}}"
     ItemTemplate="{StaticResource myTaskTemplate}" 
     HorizontalContentAlignment="Stretch"/>

Mit der HorizontalContentAlignment -Eigenschaftensatz auf Stretch, ListBox jetzt wie folgt aussieht:With the HorizontalContentAlignment property set to Stretch, the ListBox now looks like this:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Anwenden von Eigenschaftswerten mit DataTriggerUse DataTriggers to Apply Property Values

Aus der aktuellen Darstellung geht nicht hervor, ob es sich bei einer Task um eine private oder um eine arbeitsbezogene Aufgabe handelt.The current presentation does not tell us whether a Task is a home task or an office task. Beachten Sie, dass das Task-Objekt über eine TaskType-Eigenschaft des Typs TaskType verfügt, die eine Enumeration mit den Werten Home und Work ist.Remember that the Task object has a TaskType property of type TaskType, which is an enumeration with values Home and Work.

Im folgenden Beispiel die DataTrigger legt diese fest der BorderBrush des Elements mit dem Namen border zu Yellow Wenn der TaskType Eigenschaft TaskType.Home.In the following example, the DataTrigger sets the BorderBrush of the element named border to Yellow if the TaskType property is TaskType.Home.

<DataTemplate x:Key="myTaskTemplate">
<DataTemplate.Triggers>
  <DataTrigger Binding="{Binding Path=TaskType}">
    <DataTrigger.Value>
      <local:TaskType>Home</local:TaskType>
    </DataTrigger.Value>
    <Setter TargetName="border" Property="BorderBrush" Value="Yellow"/>
  </DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Die Anwendung sieht jetzt folgendermaßen aus.Our application now looks like the following. Private Aufgaben werden mit einem gelben Rahmen und Office-Aufgaben mit einem hellblauen Rahmen angezeigt:Home tasks appear with a yellow border and office tasks appear with an aqua border:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

In diesem Beispiel die DataTrigger verwendet eine Setter , einen Eigenschaftswert festzulegen.In this example the DataTrigger uses a Setter to set a property value. Die Triggerklassen verfügen auch über die EnterActions und ExitActions Eigenschaften, die Sie eine Reihe von Aktionen wie z. B. Animationen starten können.The trigger classes also have the EnterActions and ExitActions properties that allow you to start a set of actions such as animations. Darüber hinaus steht auch eine MultiDataTrigger -Klasse, die Sie zum Anwenden von Änderungen kann auf der Grundlage von mehrere Werte der datengebundenen Eigenschaft.In addition, there is also a MultiDataTrigger class that allows you to apply changes based on multiple data-bound property values.

Eine alternative Möglichkeit, den gleichen Effekt zu erreichen ist, binden die BorderBrush Eigenschaft, um die TaskType -Eigenschaft und ein Wertkonverter zum Zurückgeben der Farbe auf Grundlage der TaskType Wert.An alternative way to achieve the same effect is to bind the BorderBrush property to the TaskType property and use a value converter to return the color based on the TaskType value. Mit Blick auf die Leistung ist es etwas effizienter, für diesen Effekt einen Konverter zu verwenden.Creating the above effect using a converter is slightly more efficient in terms of performance. Darüber hinaus bietet die Erstellung eines eigenen Konverters eine höhere Flexibilität, da Sie eine eigene Logik verwenden.Additionally, creating your own converter gives you more flexibility because you are supplying your own logic. Für welches Verfahren Sie sich entscheiden, hängt letztlich vom entsprechenden Szenario und Ihren Vorlieben ab.Ultimately, which technique you choose depends on your scenario and your preference. Weitere Informationen zum Schreiben eines Konverters, finden Sie unter IValueConverter.For information about how to write a converter, see IValueConverter.

Was gehört in eine DataTemplate?What Belongs in a DataTemplate?

Im vorherigen Beispiel haben wir den Trigger der DataTemplate mithilfe der DataTemplate.TriggersIn the previous example, we placed the trigger within the DataTemplate using the DataTemplate.Triggers -Eigenschaft veranschaulicht.property. Die Setter des Triggers legt den Wert einer Eigenschaft eines Elements (die Border Element), der sich im die DataTemplate.The Setter of the trigger sets the value of a property of an element (the Border element) that is within the DataTemplate. Jedoch wenn die Eigenschaften, die Ihre Setters beziehen sind keine Eigenschaften von Elementen in der aktuellen DataTemplate, es möglicherweise besser geeignet, zum Festlegen der Eigenschaften, die mit einer Style das der ListBoxItem Klasse (wenn die Steuerelement erfolgt die Bindung ist eine ListBox).However, if the properties that your Setters are concerned with are not properties of elements that are within the current DataTemplate, it may be more suitable to set the properties using a Style that is for the ListBoxItem class (if the control you are binding is a ListBox). Angenommen, Sie möchten Ihre Trigger zum Animieren der Opacity Wert des Elements bei der Maus auf ein Element, verweist Sie definieren die Trigger innerhalb einer ListBoxItem Stil.For example, if you want your Trigger to animate the Opacity value of the item when a mouse points to an item, you define triggers within a ListBoxItem style. Ein Beispiel finden Sie unter Einführung zum Beispiel zu Stilen und Vorlagen.For an example, see the Introduction to Styling and Templating Sample.

Im Allgemeinen, beachten Sie, dass die DataTemplate angewendet wird jedes erstellte ListBoxItem (Weitere Informationen dazu, wie und wo sie genau angewendet, wird, finden Sie unter der ItemTemplate Seite.).In general, keep in mind that the DataTemplate is being applied to each of the generated ListBoxItem (for more information about how and where it is actually applied, see the ItemTemplate page.). Ihre DataTemplate wird nur die Darstellung und das Erscheinungsbild der Datenobjekte kümmern.Your DataTemplate is concerned with only the presentation and appearance of the data objects. In den meisten Fällen sieht alle anderen Aspekte der Darstellung, z. B. welche ein Element wie wenn es ausgewählt wird oder wie die ListBox Anordnung der Elemente, gehören nicht in der Definition einer DataTemplate.In most cases, all other aspects of presentation, such as what an item looks like when it is selected or how the ListBox lays out the items, do not belong in the definition of a DataTemplate. Ein Beispiel finden Sie im Abschnitt Formatieren und Erstellen von Vorlagen für ItemsControl.For an example, see the Styling and Templating an ItemsControl section.

Auswählen einer DataTemplate anhand von Eigenschaften des DatenobjektsChoosing a DataTemplate Based on Properties of the Data Object

Im Abschnitt Die DataType-Eigenschaft wurde erläutert, dass Sie verschiedene Datenvorlagen für verschiedene Datenobjekte definieren können.In The DataType Property section, we discussed that you can define different data templates for different data objects. Das ist besonders nützlich, wenn Sie haben eine CompositeCollection verschiedener Typen oder Auflistungen mit Elementen verschiedener Typen.That is especially useful when you have a CompositeCollection of different types or collections with items of different types. In der DataTrigger zum Anwenden von Eigenschaftswerten verwenden Abschnitt wurde gezeigt, wenn Sie eine Sammlung von Datenobjekten desselben Typs erstellen kann eine DataTemplate und dann mithilfe von Triggern zum Anwenden von Änderungen, die basierend auf den Eigenschaftswerten jedes Datenobjekt.In the Use DataTriggers to Apply Property Values section, we have shown that if you have a collection of the same type of data objects you can create a DataTemplate and then use triggers to apply changes based on the property values of each data object. Mit Triggern können Sie Eigenschaftswerte anwenden oder Animationen starten, sie verfügen jedoch nicht über die nötige Flexibilität, um die Struktur der Datenobjekte zu rekonstruieren.However, triggers allow you to apply property values or start animations but they don't give you the flexibility to reconstruct the structure of your data objects. Einige Szenarien müssen Sie einen anderen erstellen möglicherweise DataTemplate für Daten Objekte, die identisch sind, geben Sie jedoch verfügen über unterschiedliche Eigenschaften.Some scenarios may require you to create a different DataTemplate for data objects that are of the same type but have different properties.

Wenn z. B. ein Task-Objekt den Priority-Wert 1 hat, kann es sinnvoll sein, ihm ein völlig anderes Erscheinungsbild zuzuweisen, um als Warnung zu dienen.For example, when a Task object has a Priority value of 1, you may want to give it a completely different look to serve as an alert for yourself. In diesem Fall erstellen Sie eine DataTemplate für die Anzeige von hoher Priorität Task Objekte.In that case, you create a DataTemplate for the display of the high-priority Task objects. Fügen Sie die folgenden DataTemplate im Ressourcenabschnitt:Let's add the following DataTemplate to the resources section:

<DataTemplate x:Key="importantTaskTemplate">
  <DataTemplate.Resources>
    <Style TargetType="TextBlock">
      <Setter Property="FontSize" Value="20"/>
    </Style>
  </DataTemplate.Resources>
  <Border Name="border" BorderBrush="Red" BorderThickness="1"
          Padding="5" Margin="5">
    <DockPanel HorizontalAlignment="Center">
      <TextBlock Text="{Binding Path=Description}" />
      <TextBlock>!</TextBlock>
    </DockPanel>
  </Border>
</DataTemplate>

Beachten Sie, dass dieses Beispiel verwendet die DataTemplate.ResourcesNotice this example uses the DataTemplate.Resources -Eigenschaft veranschaulicht.property. Ressourcen, die definiert, Abschnitt werden freigegeben, durch die Elemente innerhalb der DataTemplate.Resources defined in that section are shared by the elements within the DataTemplate.

Bereitstellen von Logik zum Auswählen der DataTemplate auf der Grundlage der Priority Wert des Datenobjekts, erstellen Sie eine Unterklasse von DataTemplateSelector und überschreiben die SelectTemplate Methode.To supply logic to choose which DataTemplate to use based on the Priority value of the data object, create a subclass of DataTemplateSelector and override the SelectTemplate method. Im folgenden Beispiel die SelectTemplate Methode stellt die Logik zum Zurückgeben der entsprechenden Vorlage basierend auf den Wert der Priority Eigenschaft.In the following example, the SelectTemplate method provides logic to return the appropriate template based on the value of the Priority property. Die Vorlage, die zurückgegeben wurde gefunden, in den Ressourcen des umschließenden Window Element.The template to return is found in the resources of the enveloping Window element.

using System.Windows;
using System.Windows.Controls;

namespace SDKSample
{
    public class TaskListDataTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate
            SelectTemplate(object item, DependencyObject container)
        {
            FrameworkElement element = container as FrameworkElement;

            if (element != null && item != null && item is Task)
            {
                Task taskitem = item as Task;

                if (taskitem.Priority == 1)
                    return
                        element.FindResource("importantTaskTemplate") as DataTemplate;
                else
                    return
                        element.FindResource("myTaskTemplate") as DataTemplate;
            }

            return null;
        }
    }
}

Namespace SDKSample
    Public Class TaskListDataTemplateSelector
        Inherits DataTemplateSelector
        Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As DependencyObject) As DataTemplate

            Dim element As FrameworkElement
            element = TryCast(container, FrameworkElement)

            If element IsNot Nothing AndAlso item IsNot Nothing AndAlso TypeOf item Is Task Then

                Dim taskitem As Task = TryCast(item, Task)

                If taskitem.Priority = 1 Then
                    Return TryCast(element.FindResource("importantTaskTemplate"), DataTemplate)
                Else
                    Return TryCast(element.FindResource("myTaskTemplate"), DataTemplate)
                End If
            End If

            Return Nothing
        End Function
    End Class
End Namespace

Wir können dann den TaskListDataTemplateSelector als Ressource deklarieren:We can then declare the TaskListDataTemplateSelector as a resource:

<Window.Resources>
<local:TaskListDataTemplateSelector x:Key="myDataTemplateSelector"/>
</Window.Resources>

Um die Vorlagenauswahlressource verwenden zu können, weisen Sie ihn der ItemTemplateSelector Eigenschaft der ListBox.To use the template selector resource, assign it to the ItemTemplateSelector property of the ListBox. Die ListBox Aufrufe der SelectTemplate Methode der TaskListDataTemplateSelector für jedes der Elemente in der zugrunde liegenden Auflistung.The ListBox calls the SelectTemplate method of the TaskListDataTemplateSelector for each of the items in the underlying collection. Beim Aufruf wird das Datenobjekt als Elementparameter übergeben.The call passes the data object as the item parameter. Die DataTemplate das zurückgegeben wird, indem die Methode wird dann auf die betreffende Datenobjekt angewendet.The DataTemplate that is returned by the method is then applied to that data object.

<ListBox Width="400" Margin="10"
         ItemsSource="{Binding Source={StaticResource myTodoList}}"
         ItemTemplateSelector="{StaticResource myDataTemplateSelector}"
         HorizontalContentAlignment="Stretch"/>

Mit der Vorlagenauswahl die ListBox nun wie folgt angezeigt:With the template selector in place, the ListBox now appears as follows:

Daten-beispielscreenshot: VorlagenData templating sample screenshot

Damit ist die Erläuterung unseres Beispiels abgeschlossen.This concludes our discussion of this example. Das vollständige Beispiel finden Sie unter Einführung in das Datenvorlagenbeispiel.For the complete sample, see Introduction to Data Templating Sample.

Formatierung und Vorlagen für ItemsControlStyling and Templating an ItemsControl

Obwohl die ItemsControl ist nicht der einzige Steuerelementtyp, die Sie verwenden können, eine DataTemplate , es ist ein sehr häufiges Szenario zum Binden einer ItemsControl für eine Sammlung.Even though the ItemsControl is not the only control type that you can use a DataTemplate with, it is a very common scenario to bind an ItemsControl to a collection. In der Was gehört in eine DataTemplate Abschnitt erläutert, die die Definition Ihrer DataTemplate muss nur die Darstellung von Daten.In the What Belongs in a DataTemplate section we discussed that the definition of your DataTemplate should only be concerned with the presentation of data. Um zu ermitteln, wenn sie nicht geeignet ist, verwenden, wird eine DataTemplate es ist wichtig zu verstehen, die anderen gebotenen Stil- und Vorlageneigenschaften der ItemsControl.In order to know when it is not suitable to use a DataTemplate it is important to understand the different style and template properties provided by the ItemsControl. Anhand des folgenden Beispiels soll die jeweilige Funktion dieser Eigenschaften veranschaulicht werden.The following example is designed to illustrate the function of each of these properties. Die ItemsControl in diesem Beispiel wird auf die gleiche gebunden Tasks Auflistung wie im vorherigen Beispiel.The ItemsControl in this example is bound to the same Tasks collection as in the previous example. Zu Demonstrationszwecken werden die Formate und die Vorlagen in diesem Beispiel inline deklariert.For demonstration purposes, the styles and templates in this example are all declared inline.

<ItemsControl Margin="10"
              ItemsSource="{Binding Source={StaticResource myTodoList}}">
  <!--The ItemsControl has no default visual appearance.
      Use the Template property to specify a ControlTemplate to define
      the appearance of an ItemsControl. The ItemsPresenter uses the specified
      ItemsPanelTemplate (see below) to layout the items. If an
      ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,
      the default is an ItemsPanelTemplate that specifies a StackPanel.-->
  <ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
      <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
        <ItemsPresenter/>
      </Border>
    </ControlTemplate>
  </ItemsControl.Template>
  <!--Use the ItemsPanel property to specify an ItemsPanelTemplate
      that defines the panel that is used to hold the generated items.
      In other words, use this property if you want to affect
      how the items are laid out.-->
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <!--Use the ItemTemplate to set a DataTemplate to define
      the visualization of the data objects. This DataTemplate
      specifies that each data object appears with the Proriity
      and TaskName on top of a silver ellipse.-->
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <DataTemplate.Resources>
        <Style TargetType="TextBlock">
          <Setter Property="FontSize" Value="18"/>
          <Setter Property="HorizontalAlignment" Value="Center"/>
        </Style>
      </DataTemplate.Resources>
      <Grid>
        <Ellipse Fill="Silver"/>
        <StackPanel>
          <TextBlock Margin="3,3,3,0"
                     Text="{Binding Path=Priority}"/>
          <TextBlock Margin="3,0,3,7"
                     Text="{Binding Path=TaskName}"/>
        </StackPanel>
      </Grid>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
  <!--Use the ItemContainerStyle property to specify the appearance
      of the element that contains the data. This ItemContainerStyle
      gives each item container a margin and a width. There is also
      a trigger that sets a tooltip that shows the description of
      the data object when the mouse hovers over the item container.-->
  <ItemsControl.ItemContainerStyle>
    <Style>
      <Setter Property="Control.Width" Value="100"/>
      <Setter Property="Control.Margin" Value="5"/>
      <Style.Triggers>
        <Trigger Property="Control.IsMouseOver" Value="True">
          <Setter Property="Control.ToolTip"
                  Value="{Binding RelativeSource={x:Static RelativeSource.Self},
                          Path=Content.Description}"/>
        </Trigger>
      </Style.Triggers>
    </Style>
  </ItemsControl.ItemContainerStyle>
</ItemsControl>

Im Folgenden sehen Sie ein Bildschirmfoto des Beispiels nach dem Rendern:The following is a screenshot of the example when it is rendered:

Bildschirmfoto des ItemsControl-BeispielsItemsControl example screenshot

Beachten Sie, dass anstelle der ItemTemplate, können Sie die ItemTemplateSelector.Note that instead of using the ItemTemplate, you can use the ItemTemplateSelector. Ein Beispiel finden Sie im vorherigen Abschnitt.Refer to the previous section for an example. Auf ähnliche Weise, anstatt die ItemContainerStyle, Sie haben die Möglichkeit zum Verwenden der ItemContainerStyleSelector.Similarly, instead of using the ItemContainerStyle, you have the option to use the ItemContainerStyleSelector.

Zwei weitere Formatvorlagen bezogenen Eigenschaften für die ItemsControl , werden nicht angezeigt, hier sind GroupStyle und GroupStyleSelector.Two other style-related properties of the ItemsControl that are not shown here are GroupStyle and GroupStyleSelector.

Unterstützung für hierarchische DatenSupport for Hierarchical Data

Bisher haben wir nur erläutert, wie eine einzelne Auflistung gebunden und angezeigt wird.So far we have only looked at how to bind to and display a single collection. Mitunter kann eine Auflistung auch andere Auflistungen enthalten.Sometimes you have a collection that contains other collections. Die HierarchicalDataTemplate Klasse mit verwendet werden soll HeaderedItemsControl Typen, um solche Daten anzuzeigen.The HierarchicalDataTemplate class is designed to be used with HeaderedItemsControl types to display such data. Im folgenden Beispiel ist ListLeagueList eine Liste von League-Objekten.In the following example, ListLeagueList is a list of League objects. Jedes League-Objekt verfügt über einen Name und eine Auflistung von Division-Objekten.Each League object has a Name and a collection of Division objects. Jede Division verfügt über einen Name und eine Auflistung von Team-Objekten, und TeamTeam-Objekt verfügt über einen Name.Each Division has a Name and a collection of Team objects, and each Team object has a Name.

<Window x:Class="SDKSample.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="HierarchicalDataTemplate Sample"
  xmlns:src="clr-namespace:SDKSample">
  <DockPanel>
    <DockPanel.Resources>
      <src:ListLeagueList x:Key="MyList"/>

      <HierarchicalDataTemplate DataType    = "{x:Type src:League}"
                                ItemsSource = "{Binding Path=Divisions}">
        <TextBlock Text="{Binding Path=Name}"/>
      </HierarchicalDataTemplate>

      <HierarchicalDataTemplate DataType    = "{x:Type src:Division}"
                                ItemsSource = "{Binding Path=Teams}">
        <TextBlock Text="{Binding Path=Name}"/>
      </HierarchicalDataTemplate>

      <DataTemplate DataType="{x:Type src:Team}">
        <TextBlock Text="{Binding Path=Name}"/>
      </DataTemplate>
    </DockPanel.Resources>

    <Menu Name="menu1" DockPanel.Dock="Top" Margin="10,10,10,10">
        <MenuItem Header="My Soccer Leagues"
                  ItemsSource="{Binding Source={StaticResource MyList}}" />
    </Menu>

    <TreeView>
      <TreeViewItem ItemsSource="{Binding Source={StaticResource MyList}}" Header="My Soccer Leagues" />
    </TreeView>

  </DockPanel>
</Window>

Das Beispiel zeigt, mit der Verwendung von HierarchicalDataTemplate, ganz einfach Listendaten anzuzeigen,, die andere Listen enthalten.The example shows that with the use of HierarchicalDataTemplate, you can easily display list data that contains other lists. Im Folgenden finden Sie ein Bildschirmfoto des Beispiels.The following is a screenshot of the example.

Bildschirmabbildung für HierarchicalDataTemplate-BeispielHierarchicalDataTemplate sample screenshot

Siehe auchSee also