Ü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 zunächst eine DataTemplate und führt dann andere Textvorlagen-Funktionen, wie z. B. die Auswahl von Vorlagen basierend auf benutzerdefinierte 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.

Erforderliche KomponentenPrerequisites

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 eine der vielen Funktionen von WPF-Modell erstellen von Formaten und Vorlagen bereitgestellt wird.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 die WPF-Erstellen von Formaten und Vorlagen-Modells, z. B. zum Verwenden einer Style zum Festlegen von Eigenschaften für Steuerelemente finden Sie unter der Erstellen von Formaten 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 wie z. B. Objekte ermöglichen das Style und DataTemplate wiederverwendet werden soll.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

Um zu verdeutlichen, warum veranschaulichen DataTemplate ist wichtig, betrachten wir ein Beispiel für die Bindung Daten.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 DataTemplateunser ListBox derzeit wie folgt aussieht:Without a DataTemplate, our ListBox currently looks like this:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

Was passiert ist, ohne bestimmten Anweisungen, die ListBox durch Aufrufe der Standardeinstellung ToString beim Anzeigen der Objekte in der Auflistung.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 zeigt die Zeichenfolgendarstellung für jedes Objekt in der zugrunde liegenden Auflistung.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:Then the ListBox looks like the following:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

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 von der ListBox auf eine DataTemplate.One way to do that is to set the ItemTemplate property of the ListBox to a DataTemplate. Angeben der DataTemplate wird der visuellen 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. Wir werden verwendet, die Anweisungen, die jedes Element wird, wie drei angezeigt 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. Angenommen, anstatt Path=TaskName, legen Sie XPath auf @TaskName (Wenn TaskName ist ein Attribut des Ihrer XMLXML Knoten).For example, instead of having Path=TaskName, you would set XPath to @TaskName (if TaskName is an attribute of your XMLXML node).

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

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

Erstellen der Datenvorlage als RessourceCreating the DataTemplate as a Resource

Im obigen Beispiel definiert 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 es auf andere Steuerelemente, die eine Eigenschaft, die akzeptiert eine 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 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 sind die TargetType Eigenschaft von 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 angeben, statt eine x:Key für die DataTemplate im obigen Beispiel können Sie Folgendes ausführen: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 ruft 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. Daher, wenn Sie dies zuweisen DataTemplate ein x:Key Wert, überschreiben Sie die implizite x:Key und die DataTemplate 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 eine Bindung eine 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, der die Bindung für einen ContentControl benötigt weitere Informationen zu 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 von ein ItemsControl geben, können Sie festlegen der Path Eigenschaft von 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 Objekten.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. Nehmen wir für die Präsentation erhöhen, indem eine Border, Grid, und einige TextBlock Elemente, die die Daten 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:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

Legen wir HorizontalContentAlignment auf 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, die ListBox jetzt wie folgt aussieht:With the HorizontalContentAlignment property set to Stretch, the ListBox now looks like this:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

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 die BorderBrush des Elements mit dem Namen border auf Yellow Wenn die TaskType Eigenschaft ist 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:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

In diesem Beispiel wird die DataTrigger verwendet eine Setter den Wert einer Eigenschaft festgelegt.In this example the DataTrigger uses a Setter to set a property value. Die Triggerklassen haben, auch die EnterActions und ExitActions Eigenschaften, mit denen 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 ein MultiDataTrigger -Klasse, die Sie beim Übernehmen der Änderungen kann auf der Grundlage von Werten für mehrere 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 die Nutzung ein Wertkonverters die Farbe zurück, basierend auf den 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. Informationen dazu, wie Sie einen Konverter zu schreiben, 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 die 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 Ihrer Setters befürchten mit sind keine Eigenschaften von Elementen, die in der aktuellen DataTemplate, möglicherweise besser geeignet, zum Festlegen der Eigenschaften, die mit einer Style , ist für die ListBoxItem Klasse (wenn der Sie sind steuerelementbindung 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, wenn eine Maus auf ein Element verweist, definieren Sie 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 an jeden der generierten angewendet wird ListBoxItem (Weitere Informationen dazu, wie und wo tatsächlich angewandt 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 befasst sich mit nur der Präsentations- und der Darstellung der Datenobjekte.Your DataTemplate is concerned with only the presentation and appearance of the data objects. In den meisten Fällen alle anderen Aspekte der Darstellung, z. B. welche ein Element sieht, wenn diese Option ausgewählt ist oder wie die ListBox gehören Anordnung der Elemente 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 von anderen Typen oder Sammlungen mit Elemente unterschiedlichen Typs.That is especially useful when you have a CompositeCollection of different types or collections with items of different types. In der DataTrigger verwenden, um Eigenschaftswerte gelten Abschnitt haben wir gezeigt, das eine Sammlung von Objekten desselben Typs erstellen können eine DataTemplate und verwenden Sie dann beim Übernehmen der Änderungen, die anhand der Eigenschaftswerte von Triggern 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 möglicherweise ein anderes erstellen DataTemplate für Daten Objekte, die identisch sind, geben, aber 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. Wir fügen Sie die folgenden DataTemplate Abschnitt Ressourcen: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 in diesem Beispiel verwendet die DataTemplate.ResourcesNotice this example uses the DataTemplate.Resources -Eigenschaft veranschaulicht.property. Ressourcen, die definiert, Abschnitt werden gemeinsam genutzt, durch die Elemente innerhalb der DataTemplate.Resources defined in that section are shared by the elements within the DataTemplate.

Angeben der 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 dem Wert, der die 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 zurückzugebenden befindet sich 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 Auswahl Dialogfeldvorlagen-Ressource zu verwenden, weisen sie Sie der ItemTemplateSelector Eigenschaft von 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 der zurückgegeben wird, indem die Methode auf dieses 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 eingerichtet ist die ListBox sieht nun wie folgt aus:With the template selector in place, the ListBox now appears as follows:

Bildschirmfoto des Beispiels einer DatenvorlageData templating sample screen shot

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, mit denen Sie eine DataTemplate , er ist ein sehr häufiges Szenario, binden Sie ein 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 erörtert, 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. Damit bekannt ist, wenn er nicht geeignet zu verwenden, ist eine DataTemplate ist es wichtig zu verstehen, die anderen bereitgestellten Stil- und Eigenschaften 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 den gleichen 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 statt 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, stehen Ihnen die Option 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, sind hier 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, die 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>

Im Beispiel wird gezeigt, die mit der Verwendung von HierarchicalDataTemplate, Sie können Listendaten, die anderen Listen enthält leicht anzuzeigen.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.

Bildschirmfoto des Beispiels für HierarchicalDataTemplateHierarchicalDataTemplate sample screen shot

Siehe auchSee Also

DatenbindungData Binding
Suchen von Elementen, die mit einer DataTemplate generiert wurdenFind DataTemplate-Generated Elements
Erstellen von Formaten und VorlagenStyling and Templating
Übersicht zur DatenbindungData Binding Overview
Übersicht über GridView-Spaltenheaderstile und -SpaltenheadervorlagenGridView Column Header Styles and Templates Overview