Ü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 wird zunächst veranschaulicht, wie DataTemplate Sie einen definieren und dann weitere Datenvorlagen Features einführen, wie z. b. die Auswahl von Vorlagen auf der Grundlage von 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.

DataTemplatedient zur Darstellung von Daten und ist eines der zahlreichen Features, die vom WPF-Format und-Vorlagen Modell bereitgestellt werden.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 das WPF-Format und das Vorlagen Modell, wie z. b. das Style verwenden eines zum Festlegen von Eigenschaften für Steuerelemente, finden Sie im Thema Formatieren und Vorlagen.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.

Außerdem ist es wichtig zu verstehen Resources, was im Wesentlichen die Möglichkeit zur wiederverwendbaren Aktivierung von Objekten Style wie und DataTemplate ist.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 veranschaulichen DataTemplate , warum wichtig ist, sehen wir uns ein Beispiel für eine Datenbindung an.To demonstrate why DataTemplate is important, let's walk through a data binding example. In diesem Beispiel gibt es eine ListBox , die an eine Liste von Task -Objekten gebunden ist.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 DataTemplatesieht unser ListBox aktuell wie folgt aus:Without a DataTemplate, our ListBox currently looks like this:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig1.png "DataTemplatingIntro_fig1")Data templating sample screenshot

Dies geschieht, wenn Sie ohne bestimmte Anweisungen standardmäßig aufrufen ListBox ToString , wenn Sie versuchen, 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. Wenn das Task -Objekt die ToString -Methode überschreibt, wird ListBox daher die Zeichen folgen Darstellung der einzelnen Quell Objekte 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

Das ListBox sieht dann wie folgt aus:Then the ListBox looks like the following:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig2.png "DataTemplatingIntro_fig2")Data 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, eine DataTemplatezu definieren.The solution is to define a DataTemplate. Eine Möglichkeit besteht darin, die ItemTemplate -Eigenschaft ListBox von auf einen DataTemplatefestzulegen.One way to do that is to set the ItemTemplate property of the ListBox to a DataTemplate. Das, was Sie in DataTemplate der angeben, wird zur visuellen Struktur des Datenobjekts.What you specify in your DataTemplate becomes the visual structure of your data object. Folgendes DataTemplate ist ziemlich einfach.The following DataTemplate is fairly simple. Wir geben Ihnen Anweisungen, dass jedes Element als drei TextBlock Elemente innerhalb einer StackPanelangezeigt wird.We are giving instructions that each item appears as three TextBlock elements within a StackPanel. Jedes TextBlock -Element ist an eine Eigenschaft Task der-Klasse gebunden.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>

Die zugrunde liegenden Daten für die Beispiele in diesem Thema sind eine Auflistung von CLR-Objekten.The underlying data for the examples in this topic is a collection of CLR 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. Beispielsweise würden Sie anstelle von Path=TaskNameauf @TaskName festlegen XPath (wenn TaskName ein Attribut XMLXML Ihres Knotens ist).For example, instead of having Path=TaskName, you would set XPath to @TaskName (if TaskName is an attribute of your XMLXML node).

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

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig3.png "DataTemplatingIntro_fig3")Data templating sample screenshot

Erstellen der Datenvorlage als RessourceCreating the DataTemplate as a Resource

Im obigen Beispiel haben wir den DataTemplate Inline definiert.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 eine Ressource ist, können Sie Sie jetzt für andere Steuerelemente verwenden, die über eine Eigenschaft verfügen DataTemplate , die einen Typ annimmt.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, ist ItemsControl es für-Objekte, ListBoxwie z. b ItemTemplate ., die-Eigenschaft.As shown above, for ItemsControl objects, such as the ListBox, it is the ItemTemplate property. Für ContentControl -Objekte ist es die ContentTemplate -Eigenschaft.For ContentControl objects, it is the ContentTemplate property.

Die DataType-EigenschaftThe DataType Property

Die DataTemplate -Klasse verfügt DataType über eine-Eigenschaft, die der TargetType -Eigenschaft der Style -Klasse sehr ähnlich ist.The DataTemplate class has a DataType property that is very similar to the TargetType property of the Style class. Daher können Sie wie folgt vorgehen x:Key , anstatt DataTemplate ein für die im obigen Beispiel anzugeben: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 Task Objekte angewendet.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. Wenn Sie diesem DataTemplate also einen x:Key -Wert zuweisen, überschreiben Sie den impliziten x:Key , und DataTemplate der wird nicht automatisch angewendet.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 ein ContentControl an eine Auflistung von Task -Objekten binden, verwendet ContentControl die oben DataTemplate nicht automatisch.If you are binding a ContentControl to a collection of Task objects, the ContentControl does not use the above DataTemplate automatically. Dies liegt daran, dass die Bindung ContentControl für eine weitere Informationen erfordert, um zu unterscheiden, ob Sie eine Bindung an eine gesamte Auflistung oder die einzelnen Objekte vornehmen 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. Path ContentControl /Wenn Sie die Auswahl ItemsControl eines Typs nachverfolgen, können Sie die-Eigenschaft der Bindung auf "" festlegen, um anzugeben, dass Sie am aktuellen Element interessiert sind. ContentControlIf 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 DataTemplate explizit angeben, indem Sie die ContentTemplate -Eigenschaft festlegen.Otherwise, you need to specify the DataTemplate explicitly by setting the ContentTemplate property.

Die DataType -Eigenschaft ist besonders nützlich, wenn Sie CompositeCollection über eine von unterschiedlichen Typen von Datenobjekten verfügen.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. Lassen Sie uns die Präsentation verbessern, indem BorderSie ein Grid-, ein TextBlock -Element und einige Elemente hinzufügen, die die angezeigten Daten beschreiben.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 den ListBox , der geändert DataTemplatewurde:The following screenshot shows the ListBox with this modified DataTemplate:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig4.png "DataTemplatingIntro_fig4")Data templating sample screenshot

Wir können auf HorizontalContentAlignment festlegen Stretch , um sicherzustellen, dass die Breite der Elemente den gesamten Speicherplatz einnimmt: ListBoxWe 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"/>

Wenn die HorizontalContentAlignment -Eigenschaft auf Stretchfestgelegt ListBox ist, sieht nun wie folgt aus:With the HorizontalContentAlignment property set to Stretch, the ListBox now looks like this:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig5.png "DataTemplatingIntro_fig5")Data 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.

DataTrigger Im folgenden Beispiel BorderBrush legt den des Elements mit dem Namen border auf Yellow fest, wenn die TaskType -Eigenschaft TaskType.Homeist.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:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig6.png "DataTemplatingIntro_fig6")Data templating sample screenshot

In diesem Beispiel DataTrigger verwendet einen Setter , um einen Eigenschafts Wert festzulegen.In this example the DataTrigger uses a Setter to set a property value. Die auslöserklassen verfügen EnterActions auch ExitActions über die Eigenschaften und, mit denen Sie eine Reihe von Aktionen starten können, z. b. Animationen.The trigger classes also have the EnterActions and ExitActions properties that allow you to start a set of actions such as animations. Außerdem gibt es eine MultiDataTrigger -Klasse, mit der Sie Änderungen auf der Grundlage mehrerer Daten gebundener Eigenschaftswerte anwenden können.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, denselben Effekt zu erzielen, besteht darin, BorderBrush die Eigenschaft an TaskType die Eigenschaft zu binden und einen Wert Konverter zu verwenden, um die TaskType Farbe auf Grundlage des Werts zurückzugeben.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 IValueConverterSie unter.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 DataTemplate DataTemplateden--------------TriggersIn the previous example, we placed the trigger within the DataTemplate using the DataTemplate.Triggers -Eigenschaft veranschaulicht.property. Der Setter des Auslösers legt den Wert einer Eigenschaft eines Elements (das Border -Element DataTemplate) fest, das sich innerhalb von befindet.The Setter of the trigger sets the value of a property of an element (the Border element) that is within the DataTemplate. Wenn die Eigenschaften, mit denen Sie Setters sich beschäftigen, keine Eigenschaften von Elementen sind, die sich innerhalb des DataTemplateaktuellen befinden, ist es möglicherweise besser, die Eigenschaften mithilfe Style eines festzulegen, ListBoxItem das für die Klasse gilt (wenn die das Steuerelement, das Sie ListBoxbinden, ist ein).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). Wenn Sie z. b. den Trigger Opacity Wert des Elements animieren möchten, wenn ein Mauszeiger auf ein Element zeigt, definieren Sie Trigger innerhalb eines ListBoxItem Stils.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 sollten Sie Bedenken, dass die DataTemplate auf die einzelnen generierten ListBoxItem angewendet wird (Weitere Informationen dazu, wie und wo Sie tatsächlich angewendet werden, finden Sie auf 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.). Ihr DataTemplate betrifft nur die Darstellung und Darstellung der Datenobjekte.Your DataTemplate is concerned with only the presentation and appearance of the data objects. In den meisten Fällen gehören alle anderen Aspekte der Präsentation, wie z. b. das Aussehen eines Elements, wenn es ausgewählt ListBox wird, oder die Art und Weise, in der die Elemente angeordnet DataTemplatewerden, nicht zur Definition einer.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. Dies ist besonders nützlich, wenn Sie über CompositeCollection eine von unterschiedlichen Typen oder Sammlungen mit Elementen verschiedener Typen verfügen.That is especially useful when you have a CompositeCollection of different types or collections with items of different types. Im Abschnitt Verwenden von DataTriggers zum Anwenden von Eigenschafts Werten wird gezeigt, dass Sie eine DataTemplate Auflistung desselben Typs von Datenobjekten erstellen und dann mithilfe von Triggern Änderungen auf der Grundlage der Eigenschaftswerte jedes Datenobjekts anwenden können.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. In einigen Szenarien ist es möglicherweise erforderlich, DataTemplate dass Sie eine andere für Datenobjekte erstellen, die denselben Typ aufweisen, aber über unterschiedliche Eigenschaften verfügen.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 ein DataTemplate -Objekt für die Anzeige der Objekte mit hoher Priorität. TaskIn that case, you create a DataTemplate for the display of the high-priority Task objects. Fügen Sie dem Ressourcenabschnitt DataTemplate Folgendes hinzu: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 in DataTemplatediesem Beispiel verwendet wird.ResourcesNotice this example uses the DataTemplate.Resources -Eigenschaft veranschaulicht.property. Die in diesem Abschnitt definierten Ressourcen werden von den Elementen in der DataTemplategemeinsam genutzt.Resources defined in that section are shared by the elements within the DataTemplate.

Erstellen Sie eine Unterklasse von DataTemplate DataTemplateSelector , und überschreiben Sie Priority die SelectTemplate -Methode, um zu bestimmen, welche Logik basierend auf dem Wert des Datenobjekts verwendet werden soll.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 stellt die SelectTemplate -Methode Logik bereit, um die entsprechende Vorlage basierend auf dem Wert Priority der-Eigenschaft zurückzugeben.In the following example, the SelectTemplate method provides logic to return the appropriate template based on the value of the Priority property. Die zurück zugebende Vorlage befindet sich in den Ressourcen des umschließenden Window -Elements.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>

Wenn Sie die Vorlagen Auswahl Ressource verwenden möchten, weisen Sie ItemTemplateSelector Sie der- ListBoxEigenschaft von zu.To use the template selector resource, assign it to the ItemTemplateSelector property of the ListBox. Die ListBox Ruft die SelectTemplate -Methode der TaskListDataTemplateSelector für jedes der Elemente in der zugrunde liegenden Auflistung auf.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. Der DataTemplate , der von der-Methode zurückgegeben wird, wird dann auf das 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"/>

Wenn die Vorlagen Auswahl vorhanden ist, wird ListBox nun wie folgt angezeigt:With the template selector in place, the ListBox now appears as follows:

![Screenshot: Beispiel für Daten] Vorlagen (./media/datatemplatingintro-fig7.png "DataTemplatingIntro_fig7")Data 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 der ItemsControl nicht der einzige Steuerelement Typ ist, mit dem Sie einen DataTemplate mit verwenden können, ist es ein gängiges Szenario, ItemsControl ein an eine Auflistung zu binden.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. Im Abschnitt Was gehört zu einem DataTemplate -Abschnitt wurde erläutert, dass die Definition DataTemplate von nur die Darstellung von Daten betreffen sollte.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 wissen, wann es nicht für die Verwendung DataTemplate ItemsControlvon geeignet ist, ist es wichtig, die unterschiedlichen Stil-und Vorlagen Eigenschaften von zu verstehen.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. Der ItemsControl in diesem Beispiel ist an dieselbe Tasks Auflistung gebunden 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 Sie anstelle ItemTemplatevon den ItemTemplateSelectorverwenden können.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. Ebenso haben Sie die Möglichkeit, ItemContainerStyleanstelle von zu ItemContainerStyleSelectorverwenden.Similarly, instead of using the ItemContainerStyle, you have the option to use the ItemContainerStyleSelector.

Zwei weitere Stil bezogene Eigenschaften von, die ItemsControl hier nicht angezeigt werden, 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 ist so konzipiert, dass HeaderedItemsControl Sie mit-Typen verwendet wird, 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, dass Sie bei Verwendung HierarchicalDataTemplatevon problemlos Listen Daten anzeigen können, 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.

![Hierarchcaldatatemplate-Beispiel Bildschirm] Foto (./media/databinding-hierarchicaldatatemplate.png "DataBinding_HierarchicalDataTemplate")HierarchicalDataTemplate sample screenshot

Siehe auchSee also