Vue d'ensemble des modèles de donnéesData Templating Overview

Le modèle de création de modèles de données WPF offre une grande souplesse pour définir la présentation des données.The WPF data templating model provides you with great flexibility to define the presentation of your data. Les contrôles WPF possèdent des fonctionnalités intégrées permettant de prendre en charge la personnalisation de la présentation des données.WPF controls have built-in functionality to support the customization of data presentation. Cette rubrique explique d’abord comment définir un DataTemplate , puis introduit d’autres fonctionnalités de création de modèles de données, telles que la sélection de modèles en fonction de la logique personnalisée et la prise en charge de l’affichage des données hiérarchiques.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.

PrérequisPrerequisites

Cette rubrique porte sur les fonctionnalités de création de modèles de données ; elle ne constitue pas une introduction aux concepts de liaison de données.This topic focuses on data templating features and is not an introduction of data binding concepts. Pour plus d’informations sur les concepts de base de la liaison de données, consultez la Vue d’ensemble de la liaison de données.For information about basic data binding concepts, see the Data Binding Overview.

DataTemplateconcerne la présentation des données et est l’une des nombreuses fonctionnalités fournies par le modèle de création de styles et de modèles WPF.DataTemplate is about the presentation of data and is one of the many features provided by the WPF styling and templating model. Pour une introduction au modèle de création de styles et de modèles WPF, comme l’utilisation d' Style un pour définir des propriétés sur les contrôles, consultez la rubrique style et création de modèles .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.

En outre, il est important de comprendre Resources, ce qui est essentiellement ce qui permet de Style réutiliser des objets tels que et DataTemplate .In addition, it is important to understand Resources, which are essentially what enable objects such as Style and DataTemplate to be reusable. Pour plus d’informations sur les ressources, consultez la page Ressources XAML.For more information on resources, see XAML Resources.

Informations de base sur la création de modèles de donnéesData Templating Basics

Pour illustrer DataTemplate la raison pour laquelle est important, examinons un exemple de liaison de données.To demonstrate why DataTemplate is important, let's walk through a data binding example. Dans cet exemple, nous avons un ListBox qui est lié à une liste d' Task objets.In this example, we have a ListBox that is bound to a list of Task objects. Chaque objet Task a un TaskName (chaîne), une Description (chaîne), une Priority (entier) et une propriété de type TaskType, qui est un Enum avec des valeurs Home et Work.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>

Sans DataTemplateWithout a DataTemplate

Sans a DataTemplate, notre ListBox ressemble actuellement à ce qui suit:Without a DataTemplate, our ListBox currently looks like this:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Ce qui se passe est que, sans instructions spécifiques, ListBox le appelle ToString par défaut lors de la tentative d’affichage des objets dans la collection.What's happening is that without any specific instructions, the ListBox by default calls ToString when trying to display the objects in the collection. Par conséquent, si Task l’objet substitue la ToString méthode, le ListBox affiche la représentation sous forme de chaîne de chaque objet source de la collection sous-jacente.Therefore, if the Task object overrides the ToString method, then the ListBox displays the string representation of each source object in the underlying collection.

Par exemple, si la classe Task remplace la méthode ToString de cette façon, où name correspond au champ de la propriété TaskName :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

L' ListBox exemple ressemble à ce qui suit:Then the ListBox looks like the following:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Toutefois, cet affichage est restrictif et rigide.However, that is limiting and inflexible. En outre, si la liaison porte sur des données XMLXML, vous ne pourrez pas remplacer ToString.Also, if you are binding to XMLXML data, you wouldn't be able to override ToString.

Définir un DataTemplate simpleDefining a Simple DataTemplate

La solution consiste à définir un DataTemplate.The solution is to define a DataTemplate. Pour ce faire, vous pouvez affecter la valeur ItemTemplate à la propriété ListBox de DataTemplate.One way to do that is to set the ItemTemplate property of the ListBox to a DataTemplate. Ce que vous spécifiez DataTemplate dans votre devient la structure visuelle de votre objet de données.What you specify in your DataTemplate becomes the visual structure of your data object. Les éléments DataTemplate suivants sont assez simples.The following DataTemplate is fairly simple. Nous offrons des instructions indiquant que chaque élément apparaît sous TextBlock la forme de StackPaneltrois éléments dans un.We are giving instructions that each item appears as three TextBlock elements within a StackPanel. Chaque TextBlock élément est lié à une propriété de la Task classe.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>

Les données sous-jacentes pour les exemples de cette rubrique sont une collection d’objets CLR.The underlying data for the examples in this topic is a collection of CLR objects. si la liaison porte sur des données XMLXML, les concepts de base sont identiques, mais il y a une légère différence syntaxique.If you are binding to XMLXML data, the fundamental concepts are the same, but there is a slight syntactic difference. Par exemple, au lieu d' Path=TaskNameavoir, vous devez XPath affecter @TaskName à la TaskName valeur (si est un XMLXML attribut de votre nœud).For example, instead of having Path=TaskName, you would set XPath to @TaskName (if TaskName is an attribute of your XMLXML node).

À présent ListBox , notre ressemble à ceci:Now our ListBox looks like the following:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Créer un DataTemplate comme ressourceCreating the DataTemplate as a Resource

Dans l’exemple ci-dessus, nous DataTemplate avons défini l’Inline.In the above example, we defined the DataTemplate inline. Il est plus courant de le définir dans la section des ressources afin d’en faire un objet réutilisable, comme dans l’exemple suivant :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>

Vous pouvez à présent utiliser myTaskTemplate comme ressource, comme dans l’exemple suivant :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}"/>

Étant myTaskTemplate donné que est une ressource, vous pouvez maintenant l’utiliser sur d’autres contrôles qui ont une propriété DataTemplate qui prend un type.Because myTaskTemplate is a resource, you can now use it on other controls that have a property that takes a DataTemplate type. Comme indiqué ci-dessus ItemsControl , pour les objets, ListBoxtels que, il ItemTemplate s’agit de la propriété.As shown above, for ItemsControl objects, such as the ListBox, it is the ItemTemplate property. Pour ContentControl les objets, il s' ContentTemplate agit de la propriété.For ContentControl objects, it is the ContentTemplate property.

La propriété DataTypeThe DataType Property

La DataTemplate classe a une DataType propriété qui est très similaire à la TargetType propriété de la Style classe.The DataTemplate class has a DataType property that is very similar to the TargetType property of the Style class. Par conséquent, au lieu de x:Key spécifier un DataTemplate pour le dans l’exemple ci-dessus, vous pouvez effectuer les opérations suivantes: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>

Cette DataTemplate valeur est appliquée automatiquement à Task tous les objets.This DataTemplate gets applied automatically to all Task objects. Notez que, dans ce cas, la x:Key est définie implicitement.Note that in this case the x:Key is set implicitly. Par conséquent, si vous affectez x:Key cette DataTemplate valeur, vous substituez le implicite x:Key et DataTemplate le n’est pas appliqué automatiquement.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.

Si vous liez ContentControl un à une collection d' Task objets, le ContentControl n’utilise pas automatiquement les éléments DataTemplate ci-dessus.If you are binding a ContentControl to a collection of Task objects, the ContentControl does not use the above DataTemplate automatically. Cela est dû au fait que la ContentControl liaison sur un nécessite davantage d’informations pour distinguer si vous souhaitez effectuer une liaison à une collection entière ou aux objets individuels.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. Si votre ContentControl effectue le suivi de la sélection ItemsControl d’un type, vous pouvez Path définir la propriété ContentControl de la liaison/sur «» pour indiquer que vous êtes intéressé par l’élément actuel.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. Vous trouverez un exemple sur la page Effectuer une liaison à une collection et afficher des informations en fonction de la sélection.For an example, see Bind to a Collection and Display Information Based on Selection. Dans le cas contraire, vous devez DataTemplate spécifier explicitement en définissant la ContentTemplate propriété.Otherwise, you need to specify the DataTemplate explicitly by setting the ContentTemplate property.

La DataType propriété est particulièrement utile lorsque vous avez un CompositeCollection des différents types d’objets de données.The DataType property is particularly useful when you have a CompositeCollection of different types of data objects. Vous trouverez un exemple sur la page Implémenter une CompositeCollection.For an example, see Implement a CompositeCollection.

Ajouter d’autres informations au DataTemplateAdding More to the DataTemplate

Actuellement, les données s’affichent avec les informations nécessaires, mais on peut sans problème aller plus loin.Currently the data appears with the necessary information, but there's definitely room for improvement. Nous allons améliorer la présentation en ajoutant un Border, un Gridet certains TextBlock éléments qui décrivent les données affichées.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>

La capture d’écran suivante ListBox montre le avec DataTemplatece modifié:The following screenshot shows the ListBox with this modified DataTemplate:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Nous pouvons définir HorizontalContentAlignment Stretch sur sur ListBox pour s’assurer que la largeur des éléments occupe tout l’espace: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"/>

La propriété HorizontalContentAlignment ayant la valeur Stretch, ListBox se présente désormais comme suit:With the HorizontalContentAlignment property set to Stretch, the ListBox now looks like this:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Utiliser DataTrigger pour appliquer des valeurs de propriétéUse DataTriggers to Apply Property Values

La présentation actuelle n’indique pas si une Task est une tâche privée ou une tâche professionnelle.The current presentation does not tell us whether a Task is a home task or an office task. N’oubliez pas que l’objet Task a une propriété TaskType de type TaskType, qui est une énumération avec les valeurs Home et Work.Remember that the Task object has a TaskType property of type TaskType, which is an enumeration with values Home and Work.

Dans l’exemple suivant, le DataTrigger définit le BorderBrush de l’élément nommé border sur Yellow si la TaskType propriété a TaskType.Homela valeur.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>

Notre application se présente maintenant ainsi.Our application now looks like the following. Les tâches privées apparaissent avec une bordure jaune et les tâches professionnelles avec une bordure cyan :Home tasks appear with a yellow border and office tasks appear with an aqua border:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Dans cet exemple DataTrigger , utilise un Setter pour définir une valeur de propriété.In this example the DataTrigger uses a Setter to set a property value. Les classes de déclencheur ont EnterActions également ExitActions les propriétés et qui vous permettent de démarrer un ensemble d’actions, telles que des animations.The trigger classes also have the EnterActions and ExitActions properties that allow you to start a set of actions such as animations. En outre, il existe également une MultiDataTrigger classe qui vous permet d’appliquer des modifications en fonction de plusieurs valeurs de propriété liées aux données.In addition, there is also a MultiDataTrigger class that allows you to apply changes based on multiple data-bound property values.

Une autre façon d’obtenir le même effet consiste à lier la BorderBrush propriété à la TaskType propriété et à utiliser un convertisseur de valeur pour retourner la couleur en TaskType fonction de la valeur.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. Du point de vue des performances, il est légèrement plus efficace d’utiliser un convertisseur pour produire cet effet.Creating the above effect using a converter is slightly more efficient in terms of performance. En outre, le fait de créer votre propre convertisseur vous offre plus de souplesse, car vous fournissez votre propre logique.Additionally, creating your own converter gives you more flexibility because you are supplying your own logic. En somme, la technique choisie dépend du scénario et des préférences.Ultimately, which technique you choose depends on your scenario and your preference. Pour plus d’informations sur l’écriture d’un convertisseur IValueConverter, consultez.For information about how to write a converter, see IValueConverter.

Que contient un DataTemplate ?What Belongs in a DataTemplate?

Dans l’exemple précédent, nous avons placé le déclencheur DataTemplate dans le DataTemplateà l’aide du.TriggersIn the previous example, we placed the trigger within the DataTemplate using the DataTemplate.Triggers .property. Le Setter du déclencheur définit la valeur d’une propriété d’un élément (l' Border élément) qui se trouve dans DataTemplatele.The Setter of the trigger sets the value of a property of an element (the Border element) that is within the DataTemplate. Toutefois, Setters si les propriétés qui vous intéressent ne sont pas des propriétés des éléments qui se trouvent dans le actuel DataTemplate, il peut être plus approprié de définir les propriétés à l’aide d' ListBoxItem un Style qui est pour la classe (si le contrôle que vous liez est ListBoxun).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). Par exemple, si vous souhaitez que Trigger votre effectue l' Opacity animation de la valeur de l’élément quand une souris pointe sur un élément, vous définissez des ListBoxItem déclencheurs dans un style.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. Vous trouverez un exemple sur la page Présentation d’un exemple de création de style et de modèle.For an example, see the Introduction to Styling and Templating Sample.

En général, gardez à l’esprit que DataTemplate le est appliqué à chacun des générés ListBoxItem (pour plus d’informations sur la façon et l’endroit où il est réellement ItemTemplate appliqué, consultez la page.)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.). Vous DataTemplate vous intéressez uniquement à la présentation et à l’apparence des objets de données.Your DataTemplate is concerned with only the presentation and appearance of the data objects. Dans la plupart des cas, tous les autres aspects de la présentation, tels que l’apparence d’un élément quand il est ListBox sélectionné ou la manière dont le dispose les éléments, n’appartiennent pas DataTemplateà la définition d’un.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. Vous trouverez un exemple dans la section Création de styles et de modèles pour un ItemsControl.For an example, see the Styling and Templating an ItemsControl section.

Choisir un DataTemplate en fonction des propriétés de l’objet de donnéesChoosing a DataTemplate Based on Properties of the Data Object

Dans la section La propriété DataType, nous avons expliqué que vous pouvez définir différents modèles de données pour différents objets de données.In The DataType Property section, we discussed that you can define different data templates for different data objects. Cela s’avère particulièrement utile lorsque vous avez CompositeCollection un de types différents ou des collections avec des éléments de types différents.That is especially useful when you have a CompositeCollection of different types or collections with items of different types. Dans la section utiliser DataTriggers pour appliquer des valeurs de propriété , nous avons montré que si vous disposez d’une collection du même type d’objets de données, DataTemplate vous pouvez créer un, puis utiliser des déclencheurs pour appliquer les modifications en fonction des valeurs de propriété de chaque objet de données.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. Toutefois, si les déclencheurs vous permettent d’appliquer des valeurs de propriété ou de lancer des animations, ils ne vous donnent pas la possibilité de reconstruire la structure de vos objets de données.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. Dans certains scénarios, vous devrez peut-être DataTemplate créer un autre pour les objets de données du même type, mais avec des propriétés différentes.Some scenarios may require you to create a different DataTemplate for data objects that are of the same type but have different properties.

Par exemple, lorsque un objet Task a une valeur Priority égale à 1, vous avez la possibilité de lui donner un aspect différent qui vous servira d’alerte.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. Dans ce cas, vous créez un DataTemplate pour l’affichage des objets de priorité Task haute.In that case, you create a DataTemplate for the display of the high-priority Task objects. Nous allons ajouter ce qui DataTemplate suit à la section des ressources: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>

Notez que DataTemplatecet exemple utilise.ResourcesNotice this example uses the DataTemplate.Resources .property. Les ressources définies dans cette section sont partagées par les éléments DataTemplatedans le.Resources defined in that section are shared by the elements within the DataTemplate.

Pour fournir une logique permettant de DataTemplate choisir celle qui doit être Priority utilisée en fonction de la valeur de l’objet de données DataTemplateSelector , créez une sous SelectTemplate -classe de et substituez la méthode.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. Dans l’exemple suivant, la SelectTemplate méthode fournit une logique pour retourner le modèle approprié en fonction de la valeur Priority de la propriété.In the following example, the SelectTemplate method provides logic to return the appropriate template based on the value of the Priority property. Le modèle à retourner se trouve dans les ressources de l' Window élément enveloppant.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

On peut ensuite déclarer le TaskListDataTemplateSelector comme ressource :We can then declare the TaskListDataTemplateSelector as a resource:

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

Pour utiliser la ressource du sélecteur de modèle, assignez-la ListBoxà la ItemTemplateSelector propriété de.To use the template selector resource, assign it to the ItemTemplateSelector property of the ListBox. Appelle la SelectTemplate méthode deTaskListDataTemplateSelector pour chacun des éléments de la collection sous-jacente. ListBoxThe ListBox calls the SelectTemplate method of the TaskListDataTemplateSelector for each of the items in the underlying collection. L’appel passe l’objet de données en paramètre d’élément.The call passes the data object as the item parameter. Le DataTemplate retourné par la méthode est ensuite appliqué à cet objet de données.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"/>

Une fois le sélecteur de modèle en place ListBox , le s’affiche désormais comme suit:With the template selector in place, the ListBox now appears as follows:

Capture d’écran exemple de création de modèles de donnéesData templating sample screenshot

Ainsi se conclut notre étude de cet exemple.This concludes our discussion of this example. Vous trouverez l’exemple complet sur la page Présentation d’un exemple de création de modèles de données.For the complete sample, see Introduction to Data Templating Sample.

Création de styles et de modèles pour un ItemsControlStyling and Templating an ItemsControl

Même si ItemsControl n’est pas le seul type de contrôle avec lequel vous pouvez DataTemplate utiliser un avec, il s’agit d’un scénario très ItemsControl courant pour lier un à une collection.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. Dans la section qu’est- ce qui appartient à un DataTemplate , nous avons DataTemplate parlé que la définition de votre doit uniquement se préoccuper de la présentation des données.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. Pour savoir quand il n’est pas approprié d’utiliser un DataTemplate , il est important de comprendre les différentes propriétés de style et de modèle fournies par le. ItemsControlIn 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. L’exemple suivant est conçu pour illustrer la fonction de chacune de ces propriétés.The following example is designed to illustrate the function of each of these properties. Dans cet exemple, est lié à la même Tasks collection que dans l’exemple précédent. ItemsControlThe ItemsControl in this example is bound to the same Tasks collection as in the previous example. À des fins de démonstration, les styles et les modèles de cet exemple sont tous déclarés inline.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>

Voici une capture d’écran du rendu de l’exemple :The following is a screenshot of the example when it is rendered:

Capture d’écran de l’exemple ItemsControlItemsControl example screenshot

Notez qu’au lieu d' ItemTemplateutiliser, vous pouvez utiliser le. ItemTemplateSelectorNote that instead of using the ItemTemplate, you can use the ItemTemplateSelector. Vous trouverez un exemple dans la section précédente.Refer to the previous section for an example. De même, au lieu d’utiliser ItemContainerStylele, vous avez la possibilité d' ItemContainerStyleSelectorutiliser.Similarly, instead of using the ItemContainerStyle, you have the option to use the ItemContainerStyleSelector.

Les deux autres propriétés liées au ItemsControl style de qui ne sont pas indiquées ici sont GroupStyleSelector GroupStyle et.Two other style-related properties of the ItemsControl that are not shown here are GroupStyle and GroupStyleSelector.

Prise en charge des données hiérarchiquesSupport for Hierarchical Data

Jusqu’à présent, nous avons seulement vu comment lier et afficher une collection unique.So far we have only looked at how to bind to and display a single collection. Une collection peut contenir d’autres collections.Sometimes you have a collection that contains other collections. La HierarchicalDataTemplate classe est conçue pour être utilisée avec HeaderedItemsControl des types pour afficher ces données.The HierarchicalDataTemplate class is designed to be used with HeaderedItemsControl types to display such data. Dans l’exemple suivant, ListLeagueList est une liste d’objets League.In the following example, ListLeagueList is a list of League objects. Chaque objet League a un Name et une collection d’objets Division.Each League object has a Name and a collection of Division objects. Chaque Division a un Name et une collection d’objets Team et chaque objet Team a un 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>

L’exemple montre qu’avec l’utilisation de HierarchicalDataTemplate, vous pouvez facilement afficher des données de liste qui contiennent d’autres listes.The example shows that with the use of HierarchicalDataTemplate, you can easily display list data that contains other lists. Voici une capture d’écran de l’exemple.The following is a screenshot of the example.

Capture d’écran exemple HierarchicalDataTemplateHierarchicalDataTemplate sample screenshot

Voir aussiSee also