データ テンプレートの概要Data Templating Overview

WPF のデータ テンプレート モデルは、データのプレゼンテーションを定義する優れた柔軟性を提供します。The WPF data templating model provides you with great flexibility to define the presentation of your data. WPF のコントロールには、データ プレゼンテーションのカスタマイズをサポートする組み込み機能があります。WPF controls have built-in functionality to support the customization of data presentation. このトピックの内容が最初に定義する方法を示します、DataTemplateし、カスタム ロジックと階層データを表示するためのサポートに基づくテンプレートの選択などのデータ テンプレート機能を紹介します。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.

必須コンポーネントPrerequisites

このトピックは、データ テンプレートの機能に関するものであり、データ バインディングの概念の紹介ではありません。This topic focuses on data templating features and is not an introduction of data binding concepts. データ バインディングの基本概念については、「データ バインディングの概要」をご覧ください。For information about basic data binding concepts, see the Data Binding Overview.

DataTemplate データのプレゼンテーションについては、WPF のスタイルとテンプレートのモデルによって提供される多くの機能の 1 つです。DataTemplate is about the presentation of data and is one of the many features provided by the WPF styling and templating model. WPF のスタイルとテンプレートなど、モデルを使用する方法の概要については、Styleコントロールのプロパティを設定するを参照してください。、スタイルとテンプレートトピックです。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.

さらであることを理解してResources、新機能を有効にするオブジェクトなど、これは基本的にStyleDataTemplate再利用できるようにします。In addition, it is important to understand Resources, which are essentially what enable objects such as Style and DataTemplate to be reusable. リソースについて詳しくは、「XAML リソース」をご覧ください。For more information on resources, see XAML Resources.

データ テンプレートの基礎Data Templating Basics

その理由を示すためにDataTemplateが重要ですが、データ バインディングの例を見てみましょう。To demonstrate why DataTemplate is important, let's walk through a data binding example. この例では、ListBoxの一覧にバインドされたTaskオブジェクト。In this example, we have a ListBox that is bound to a list of Task objects. Task オブジェクトには TaskName (string)、Description (string)、Priority (int)、および TaskType 型のプロパティがあり、これは値が HomeWorkEnum です。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>

DataTemplate がない場合Without a DataTemplate

なし、 DataTemplate、当社ListBox現在次に示します。Without a DataTemplate, our ListBox currently looks like this:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

ない場合の特定の手順では、何が起こっているか、ListBox既定の呼び出しによってToStringコレクションにオブジェクトを表示しようとしています。What's happening is that without any specific instructions, the ListBox by default calls ToString when trying to display the objects in the collection. したがって場合、Taskオブジェクトの上書き、 ToString 、メソッド、ListBox各ソース オブジェクトの文字列表現を基になるコレクションが表示されます。Therefore, if the Task object overrides the ToString method, then the ListBox displays the string representation of each source object in the underlying collection.

たとえば、Task クラスが ToString メソッドを次のようにオーバーライドするものとします。nameTaskName プロパティのフィールドです。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

続いて、ListBox次のようになります。Then the ListBox looks like the following:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

ただし、これは制限があり、柔軟性ではありません。However, that is limiting and inflexible. また、XMLXML データにバインドしている場合、ToString をオーバーライドすることはできません。Also, if you are binding to XMLXML data, you wouldn't be able to override ToString.

簡単な DataTemplate の定義Defining a Simple DataTemplate

ソリューションは、定義する、DataTemplateです。The solution is to define a DataTemplate. 1 つの方法を設定、ItemTemplateのプロパティ、ListBoxに、DataTemplateです。One way to do that is to set the ItemTemplate property of the ListBox to a DataTemplate. 指定した、DataTemplateデータ オブジェクトの視覚的な構造になります。What you specify in your DataTemplate becomes the visual structure of your data object. DataTemplateはきわめて単純です。The following DataTemplate is fairly simple. 3 つの各項目が表示される指示が向上していますTextBlock内の要素、StackPanelです。We are giving instructions that each item appears as three TextBlock elements within a StackPanel. TextBlockのプロパティに要素がバインドされて、Taskクラスです。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>

このトピックの例の基になるデータは、CLRCLR オブジェクトのコレクションです。The underlying data for the examples in this topic is a collection of CLRCLR objects. XMLXML のデータにバインドしている場合は、基本的な概念は同じですが、構文がわずかに違います。If you are binding to XMLXML data, the fundamental concepts are the same, but there is a slight syntactic difference. 例ではなくPath=TaskName、設定はXPath@TaskName(場合TaskNameの属性は、XMLXMLノード)。For example, instead of having Path=TaskName, you would set XPath to @TaskName (if TaskName is an attribute of your XMLXML node).

これで、ListBox次のようになります。Now our ListBox looks like the following:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

リソースとしての DataTemplate の作成Creating the DataTemplate as a Resource

上記の例では、定義した、DataTemplateインラインです。In the above example, we defined the DataTemplate inline. 再利用可能なオブジェクトになるように、リソース セクションで定義する方が一般的です。次に例を示します。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>

これで、次の例のように、myTaskTemplate をリソースとして使用できるようになります。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}"/>

myTaskTemplateリソースを使えるようになりましたことを受け取るプロパティを持つその他のコントロール、DataTemplate型です。Because myTaskTemplate is a resource, you can now use it on other controls that have a property that takes a DataTemplate type. に対して、上記で示されるItemsControlなどのオブジェクト、ListBoxは、ItemTemplateプロパティです。As shown above, for ItemsControl objects, such as the ListBox, it is the ItemTemplate property. ContentControlオブジェクトの場合に、ContentTemplateプロパティです。For ContentControl objects, it is the ContentTemplate property.

DataType プロパティThe DataType Property

DataTemplateクラスには、DataTypeプロパティとよく似ていますが、TargetTypeのプロパティ、Styleクラスです。The DataTemplate class has a DataType property that is very similar to the TargetType property of the Style class. 指定するのではなく、したがって、x:KeyDataTemplate上記の例では、次を実行することができます。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>

これは、DataTemplateすべてに自動的に適用されるTaskオブジェクト。This DataTemplate gets applied automatically to all Task objects. この場合、x:Key は暗黙的に設定されることに注意してください。Note that in this case the x:Key is set implicitly. そのため、これを割り当てる場合DataTemplatex:Key値、暗黙的なをオーバーライドするx:KeyDataTemplate自動的には適用されません。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.

バインドする場合、ContentControlのコレクションにTask、オブジェクト、ContentControl上記使わないDataTemplate自動的にします。If you are binding a ContentControl to a collection of Task objects, the ContentControl does not use the above DataTemplate automatically. これは、ためのバインドに、ContentControl詳細については、全体のコレクションまたは個々 のオブジェクトにバインドするかどうかを区別する必要があります。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. 場合、ContentControlの選択の追跡は、ItemsControlの種類を設定できます、Pathのプロパティ、ContentControlへのバインド"/"を現在のアイテムを興味のあることを示します。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. この例については、「コレクションにバインドして選択に基づく情報を表示する」をご覧ください。For an example, see Bind to a Collection and Display Information Based on Selection. それ以外の場合、指定する必要があります、DataTemplate設定して明示的に、ContentTemplateプロパティです。Otherwise, you need to specify the DataTemplate explicitly by setting the ContentTemplate property.

DataTypeがある場合、プロパティが特に便利ですが、CompositeCollectionさまざまな種類のデータ オブジェクト。The DataType property is particularly useful when you have a CompositeCollection of different types of data objects. 例については、「CompositeCollection を実装する」をご覧ください。For an example, see Implement a CompositeCollection.

DataTemplate へのその他の追加Adding More to the DataTemplate

現在、データでは必要な情報が表示されますが、間違いなく改善の余地があります。Currently the data appears with the necessary information, but there's definitely room for improvement. 追加することで、プレゼンテーションで改善しましょう、 BorderGridといくつかTextBlockは表示されるデータを記述する要素。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>

次のスクリーン ショットでは、ListBox変更このDataTemplate:The following screenshot shows the ListBox with this modified DataTemplate:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

設定することがHorizontalContentAlignmentStretch上、ListBoxアイテムの幅が領域全体を占めることを確認します。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"/>

HorizontalContentAlignmentプロパティに設定StretchListBoxは次のようになりました。With the HorizontalContentAlignment property set to Stretch, the ListBox now looks like this:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

DataTrigger を使ってプロパティ値を適用するUse DataTriggers to Apply Property Values

現在のプレゼンテーションでは、Task が家のタスクか会社のタスクかわかりません。The current presentation does not tell us whether a Task is a home task or an office task. Task オブジェクトには TaskType 型の TaskType プロパティがあり、これは値が HomeWork の列挙であることを思い出してください。Remember that the Task object has a TaskType property of type TaskType, which is an enumeration with values Home and Work.

次の例で、DataTrigger設定、BorderBrushという名前の要素のborderYellow場合、TaskTypeプロパティは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>

これで、アプリケーションの表示は次のようになります。Our application now looks like the following. 家のタスクは黄色の境界線で、会社のタスクは水色の境界線で示されます。Home tasks appear with a yellow border and office tasks appear with an aqua border:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

この例では、DataTriggerを使用して、Setterプロパティの値を設定します。In this example the DataTrigger uses a Setter to set a property value. トリガー クラスにもがある、EnterActionsExitActionsアニメーションなどのアクションのセットを開始できるようにするプロパティです。The trigger classes also have the EnterActions and ExitActions properties that allow you to start a set of actions such as animations. さらに、あるも、MultiDataTrigger複数のデータ バインドされたプロパティ値に基づいて、変更を適用できるようにするクラス。In addition, there is also a MultiDataTrigger class that allows you to apply changes based on multiple data-bound property values.

同じ効果を実現するために別の方法は、バインドする、BorderBrushプロパティをTaskTypeプロパティおよび使用する色を返す値コンバーターがに基づいて、TaskType値。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. コンバーターを使って上の効果を作成するのは、パフォーマンスに関して若干効率的です。Creating the above effect using a converter is slightly more efficient in terms of performance. さらに、独自のコンバーターを作成すると、独自のロジックを提供できるので柔軟性が向上します。Additionally, creating your own converter gives you more flexibility because you are supplying your own logic. 最終的に、どの手法を選ぶかは、シナリオと設定に依存します。Ultimately, which technique you choose depends on your scenario and your preference. コンバーターを作成する方法については、次を参照してください。IValueConverterです。For information about how to write a converter, see IValueConverter.

DataTemplate に含まれるものWhat Belongs in a DataTemplate?

内でトリガーを配置する前の例では、DataTemplateを使用して、DataTemplateです。TriggersIn the previous example, we placed the trigger within the DataTemplate using the DataTemplate.Triggers プロパティを使用する方法を示します。property. Setterトリガーの要素のプロパティの値を設定します (、Border要素) 内にある、DataTemplateです。The Setter of the trigger sets the value of a property of an element (the Border element) that is within the DataTemplate. ただし場合、プロパティをSettersに不安が現在内にある要素のプロパティではないDataTemplateを使用してプロパティを設定する適切な場合があります、Styleについては、ListBoxItemクラス (場合、バインドするコントロールは、 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). たとえば、する場合は、Triggerアニメーション化する、Opacity値アイテムのアイテムにマウスがポイントするとトリガーを定義する内で、ListBoxItemスタイル。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. 例については、「Introduction to Styling and Templating Sample」(スタイルとテンプレートのサンプルの概要) をご覧ください。For an example, see the Introduction to Styling and Templating Sample.

一般に、考慮する、DataTemplateが生成される各に適用されているListBoxItem(が実際に適用される方法と場所に関する詳細については、次を参照してください。、ItemTemplateページです。)。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.). DataTemplateはプレゼンテーション層とデータ オブジェクトの外観だけに関与します。Your DataTemplate is concerned with only the presentation and appearance of the data objects. ほとんどの場合、どのような項目などのプレゼンテーションの他のすべての側面次のように選択されているか、またはListBoxアイテム、レイアウトの定義に属していない、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. 例については、「ItemsControl のスタイルとテンプレートの設定」セクションをご覧ください。For an example, see the Styling and Templating an ItemsControl section.

データ オブジェクトのプロパティに基づく DataTemplate の選択Choosing a DataTemplate Based on Properties of the Data Object

DataType プロパティ」セクションでは、異なるデータ オブジェクトに対して異なるデータ テンプレートを定義できることを説明しました。In The DataType Property section, we discussed that you can define different data templates for different data objects. ある場合にすることは特に便利です、CompositeCollectionさまざまな種類のさまざまな種類の項目を含むコレクション。That is especially useful when you have a CompositeCollection of different types or collections with items of different types. プロパティ値の適用を使用して DataTriggers セクションで、示しました同じ種類のデータ オブジェクトのコレクションがあれば作成、DataTemplateし、トリガーを使用して、プロパティの値に基づいて変更を適用各データ オブジェクト。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. ただし、トリガーではプロパティ値を適用したりアニメーションを開始することはできますが、データ オブジェクトの構造を再構築できるような柔軟性はありません。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. 一部のシナリオには、異なるを作成する必要がありますDataTemplateデータが同じであるオブジェクト型しますが、あるさまざまなプロパティです。Some scenarios may require you to create a different DataTemplate for data objects that are of the same type but have different properties.

たとえば、Task オブジェクトの Priority の値が 1 のときは、自分用の警告としてまったく異なる外観にしたいような場合です。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. その場合は、作成、DataTemplate高優先度を表示するためTaskオブジェクト。In that case, you create a DataTemplate for the display of the high-priority Task objects. 次のコードを追加してみましょうDataTemplateresources セクションに。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>

この例で、DataTemplateです。ResourcesNotice this example uses the DataTemplate.Resources プロパティを使用する方法を示します。property. セクションでは、内の要素で共有されることで定義されているリソース、DataTemplateです。Resources defined in that section are shared by the elements within the DataTemplate.

選択するためのロジックを提供するDataTemplateに基づいて、使用するのには、Priority値のデータ オブジェクトのサブクラスを作成DataTemplateSelectorをオーバーライドし、SelectTemplateメソッドです。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. 次の例で、SelectTemplateメソッドの値に基づいて、適切なテンプレートを返すロジックの提供、Priorityプロパティです。In the following example, the SelectTemplate method provides logic to return the appropriate template based on the value of the Priority property. エンベロープのリソースに返されるテンプレートが見つかったWindow要素。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

その後、リソースとして TaskListDataTemplateSelector を宣言できます。We can then declare the TaskListDataTemplateSelector as a resource:

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

テンプレート セレクター リソースを使用するには、それを割り当てる、ItemTemplateSelectorのプロパティ、ListBoxです。To use the template selector resource, assign it to the ItemTemplateSelector property of the ListBox. ListBox呼び出し、SelectTemplateのメソッド、TaskListDataTemplateSelector基になるコレクション内の項目の各します。The ListBox calls the SelectTemplate method of the TaskListDataTemplateSelector for each of the items in the underlying collection. 呼び出しでは、項目パラメーターとしてデータ オブジェクトを渡します。The call passes the data object as the item parameter. DataTemplateによって返される、メソッドはそのデータ オブジェクトに適用されます。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"/>

代わりに、テンプレート セレクターをListBox次のように表示されます。With the template selector in place, the ListBox now appears as follows:

データ テンプレートのサンプルのスクリーンショットData templating sample screen shot

これがこの例の結論です。This concludes our discussion of this example. 完全なサンプルについては、「Introduction to Data Templating Sample」(データ テンプレート サンプルの概要) をご覧ください。For the complete sample, see Introduction to Data Templating Sample.

ItemsControl のスタイルとテンプレートの設定Styling and Templating an ItemsControl

場合でも、ItemsControl使用できる唯一のコントロール型ではない、DataTemplateが非常に一般的なシナリオにバインドする、ItemsControlをコレクションにします。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. DataTemplate に何が属するに説明したセクションの定義、DataTemplateデータの表示で考慮する必要がありますのみです。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. ときに適していません。 使用するかを知るために、DataTemplateによって提供されるさまざまなスタイルとテンプレートのプロパティを理解することが重要、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. 次の例は、これらの各プロパティの機能がわかるように設計されています。The following example is designed to illustrate the function of each of these properties. ItemsControlこの例にバインドされている同じTasks前の例のコレクション。The ItemsControl in this example is bound to the same Tasks collection as in the previous example. わかりやすいように、この例のスタイルとテンプレートはすべてインラインで宣言されています。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>

次に示すのは、この例がレンダリングされたときのスクリーンショットです。The following is a screenshot of the example when it is rendered:

ItemsControl の例のスクリーンショットItemsControl example screenshot

注意して使用する代わりに、 ItemTemplate、使用することができます、ItemTemplateSelectorです。Note that instead of using the ItemTemplate, you can use the ItemTemplateSelector. 例については、前のセクションをご覧ください。Refer to the previous section for an example. 同様に、代わりに、ItemContainerStyleを使用するオプションがある、ItemContainerStyleSelectorです。Similarly, instead of using the ItemContainerStyle, you have the option to use the ItemContainerStyleSelector.

2 つの他のスタイル関連プロパティ、ItemsControlここでは、表示されていないGroupStyleGroupStyleSelectorです。Two other style-related properties of the ItemsControl that are not shown here are GroupStyle and GroupStyleSelector.

階層データのサポートSupport for Hierarchical Data

これまでは、1 つのコレクションにバインドして表示する方法のみを説明してきました。So far we have only looked at how to bind to and display a single collection. 場合によっては、コレクションに他のコレクションが含まれることがあります。Sometimes you have a collection that contains other collections. HierarchicalDataTemplateクラスと共に使用するものではHeaderedItemsControlなどのデータを表示する型。The HierarchicalDataTemplate class is designed to be used with HeaderedItemsControl types to display such data. 次の例で、ListLeagueListLeague オブジェクトのリストです。In the following example, ListLeagueList is a list of League objects. League オブジェクトには、Name と、Division オブジェクトのコレクションがあります。Each League object has a Name and a collection of Division objects. Division には、NameTeam オブジェクトのコレクションがあり、各 Team オブジェクトには 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>

例では、ことを示していますの使用にHierarchicalDataTemplate、他のリストを含むリストのデータを簡単に表示できます。The example shows that with the use of HierarchicalDataTemplate, you can easily display list data that contains other lists. 次に示すのは、この例のスクリーンショットです。The following is a screenshot of the example.

HierarchicalDataTemplate サンプルのスクリーンショットHierarchicalDataTemplate sample screen shot

関連項目See Also

データ バインディングData Binding
DataTemplate によって生成された要素を検索するFind DataTemplate-Generated Elements
スタイルとテンプレートStyling and Templating
データ バインディングの概要Data Binding Overview
GridView の列ヘッダー スタイルおよびテンプレートの概要GridView Column Header Styles and Templates Overview