Veri Şablonu Oluşturmaya Genel Bakış

WPF veri oluşturma modeli, verilerinizin sunumunu tanımlama konusunda size büyük esneklik sağlar. WPF denetimleri, veri sunumunu özelleştirmeyi destekleyen yerleşik işlevlere sahiptir. Bu konu başlığında önce bir tanımlaması ve ardından özel mantığa dayalı şablon seçimi ve hiyerarşik verilerin görüntüleme desteği gibi diğer veri şablonu oluşturma DataTemplate özellikleri gösterilir.

Önkoşullar

Bu konu, veri templating özelliklerine odaklanır ve veri bağlama kavramlarına giriş değildir. Temel veri bağlama kavramları hakkında bilgi için bkz. Veri Bağlamaya Genel Bakış.

DataTemplate , verilerin sunumuyla ilgilidir ve WPF stili ve templating modeli tarafından sağlanan birçok özellik arasında yer alan özelliklerden birisidir. Denetimler üzerinde özellikleri ayarlamak için bir kullanma gibi WPF stili ve templating modeline giriş için Stil oluşturma ve StyleStyle bakın.

Ayrıca, ve gibi nesnelerin yeniden kullanılabilir olması için temel olarak etkinleştiren olan 'yi ResourcesStyle anlamak DataTemplate önemlidir. Kaynaklar hakkında daha fazla bilgi için bkz. XAML Kaynakları.

Veri Templating Temel Bilgileri

Neden önemli DataTemplate olduğunu göstermek için bir veri bağlama örneğine bakalım. Bu örnekte, bir nesne ListBox listesine bağlı olan bir Task var. Her Task nesnenin bir TaskName (dize), Description bir (dize), bir Priority (int) TaskTypeEnumHome ve Work ve değerleri ve olan türünde bir özelliği vardır.

<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 Olmadan

olmadan, DataTemplate şu anda şu anda şu şekilde ListBox görünüyor:

Data templating sample screenshot

Burada olan şey, belirli bir yönergeler olmadan, ListBox koleksiyondaki nesneleri görüntülemeye çalışırken varsayılan ToString olarak çağrısı yapılır. Bu nedenle, nesne yöntemini geçersiz kılarsa, temel alınan koleksiyondaki her kaynak TaskToString nesnenin dize ListBox gösterimini görüntüler.

Örneğin, sınıfı yöntemi bu şekilde geçersiz TaskToString kılarsa, burada name özelliğinin TaskName alanıdır:

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

Ardından ListBox aşağıdakine benzer:

Data templating sample screenshot

Ancak bu sınırlayıcı ve esnek değildir. Ayrıca, XML verilerine bağlandıysanız, 'yi geçersiz kılayazabilirsiniz. ToString

Basit Bir DataTemplate Tanımlama

Çözüm bir DataTemplate tanımlamaktır. Bunu yapma yollarından biri, özelliğini ItemTemplate olarak ListBoxDataTemplate ayarlamaktır. içinde belirttiğiniz, veri DataTemplate nesnenizin görsel yapısı olur. Aşağıdakiler DataTemplate oldukça basittir. Her öğenin bir içinde üç öğe olarak TextBlock göründüğüne ilişkin yönergeler veriyoruz. StackPanel Her TextBlock öğe sınıfının bir özelliğine Task bağlı.

<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>

Bu konudaki örnekler için temel alınan veriler CLR nesneleri koleksiyonudur. XML verilerine bağlanacaksanız temel kavramlar aynıdır ancak küçük bir bozulma farkı vardır. Örneğin, yerine olarak Path=TaskNameXPath@TaskName ayarlanırsınız TaskName (XML düğümünün bir özniteliği ise).

Şimdi ListBox aşağıdaki gibi görünüyor:

Data templating sample screenshot

DataTemplate'i Kaynak Olarak Oluşturma

Yukarıdaki örnekte satır içi DataTemplate tanımlandı. Aşağıdaki örnekte olduğu gibi yeniden kullanılabilir bir nesne olması için kaynaklar bölümünde tanımlamak daha yaygındır:

<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>

Artık aşağıdaki örnekte myTaskTemplate olduğu gibi kaynak olarak kullanabilirsiniz:

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

bir myTaskTemplate kaynak olduğundan, artık türü alan bir özelliği olan diğer denetimlerde DataTemplate kullanabilirsiniz. Yukarıda gösterildiği ItemsControl gibi, gibi nesneler için ListBoxItemTemplate özelliğidir. Nesneler ContentControl için ContentTemplate özelliğidir.

DataType Özelliği

DataTemplatesınıfının, DataType sınıfının özelliğine çok benzer TargetType bir özelliği Style vardır. Bu nedenle, yukarıdaki örnekte x:Key için DataTemplate bir belirtmek yerine, şunları yapabilirsiniz:

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

Bu, DataTemplate tüm nesnelere otomatik olarak Task uygulanır. Bu durumda , x:Key örtülü olarak ayarlanır. Bu nedenle, bunu DataTemplate bir değer atarsanız, örtülü geçersiz x:Key kılınır ve otomatik olarak x:KeyDataTemplate uygulanmaz.

bir nesne ContentControl koleksiyonuna Task bağlıysanız, ContentControl yukarıdakini otomatik olarak DataTemplate kullanmaz. Bunun nedeni, bir bağlamanın bir koleksiyonun tamamına mı yoksa tek tek nesnelere mi bağlamak istediğinize ilişkin daha fazla ContentControl bilgiye ihtiyacı olmasıdır. Bir tür seçimini izliyorsanız, geçerli öğeyle ilgilendiğinizi belirtmek için bağlamanın özelliğini ContentControl " " " olarak ItemsControlPathContentControl/ ayarlayın. Bir örnek için bkz. Koleksiyona Bağlama ve Seçime Göre Bilgileri Görüntüleme. Aksi takdirde, özelliğini DataTemplate ayarerek açıkça belirtmeniz ContentTemplate gerekir.

özelliği, DataType özellikle farklı türlerde veri CompositeCollection nesnelerine sahip olduğunda kullanışlıdır. Örnek için bkz. CompositeCollection Uygulama.

DataTemplate'a Daha Fazla Ekleme

Şu anda veriler gerekli bilgilerle birlikte görünür, ancak kesinlikle iyileştirmeye yer vardır. Şimdi bir , ve görüntülenen verileri açıklayan bazı öğeler ekleyerek BorderGridTextBlock sunuyu geliştirin.


<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>

Aşağıdaki ekran görüntüsünde, ListBox bu değiştirilmiş ile birlikte : DataTemplate

Data templating sample screenshot

Öğelerin HorizontalContentAlignment genişliğinin Stretch tüm alanı ListBox kaplayana kadar olduğundan emin olmak için üzerinde olarak ayarlanmıştır:

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

özelliği HorizontalContentAlignment olarak ayarlanmış Stretch şekilde, ListBox artık şu şekildedir:

Data templating sample screenshot

Özellik Değerlerini Uygulamak için DataTriggers Kullanma

Geçerli sunu, bir giriş görevi mi yoksa ofis görevi mi Task olduğunu bize söylemez. nesnesinin Task ve TaskType değerlerine sahip bir TaskType numaralama olan türünde bir özelliği olduğunu HomeWork unutmayın.

Aşağıdaki örnekte, özelliği ise adlı öğesini olarak DataTriggerBorderBrushborderYellowTaskTypeTaskType.Home ayarlar.

<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>

Uygulamamız artık aşağıdaki gibi görünüyor. Giriş görevleri sarı kenarlıkla, ofis görevleri ise açık deniz mavisi kenarlıkla görüntülenir:

Data templating sample screenshot

Bu örnekte, DataTrigger bir özellik değeri ayarlamak için Setter kullanır. Tetikleyici sınıfları, animasyonlar EnterActions gibi bir dizi eylem ExitActions başlatmaya olanak sağlayan ve özelliklerine de sahiptir. Ayrıca, birden çok veriye MultiDataTrigger bağlı özellik değerine göre değişiklikler uygulamana olanak sağlayan bir sınıf da vardır.

Aynı etkiyi elde etmek için alternatif bir yöntem, özelliğini özelliğine bağlamak ve değeri temel alan rengi geri dönmek için değer BorderBrushTaskType dönüştürücü TaskType kullanmaktır. Bir dönüştürücü kullanarak yukarıdaki etkiyi oluşturmak performans açısından biraz daha verimlidir. Buna ek olarak, kendi mantığınızı sağlarsınız çünkü kendi dönüştürücüyü oluşturmak size daha fazla esneklik sağlar. Sonuç olarak, hangi tekniği seçtiğiniz senaryoya ve tercihlerinize bağlıdır. Dönüştürücü yazma hakkında bilgi için bkz. IValueConverter .

DataTemplate'a Ait Olan Nedir?

Önceki örnekte, özelliğini kullanarak tetikleyiciyi içine DataTemplateDataTemplate.Triggers yerleştirildik. Settertetikleyicisi, içindeki bir öğenin (öğesi) Border özelliğinin değerini DataTemplate ayarlar. Ancak, ilgili olduğu özellikler geçerli içindeki öğelerin özellikleri yoksa, sınıf için olan bir kullanarak özellikleri ayarlamak daha uygun olabilir (bağlama denetim bir SettersDataTemplateStyleListBoxItemListBox ise). Örneğin, fare bir öğeye geldiğinde öğenin değerine animasyonu yapmak için bir TriggerOpacity stilde tetikleyiciler ListBoxItem tanımlarsınız. Bir örnek için, Bkz. Stile Giriş ve Örnek Oluşturma.

Genel olarak, oluşturulan her bir için uygulandığını unutmayın (gerçekte nasıl ve nerede uygulandığı hakkında daha fazla bilgi için DataTemplateListBoxItem sayfaya ItemTemplate bakın.). Yalnızca DataTemplate veri nesnelerinin sunumu ve görünümüyle ilgili endişeleriniz var. Çoğu durumda, bir öğe seçildiğinde nasıl olduğu veya öğelerin nasıl sıra olduğu gibi sunumun diğer tüm yönleri bir tanımına ListBox ait DataTemplate değildir. Örnek için ItemsControl'da Stil Oluşturma ve Oluşturma bölümüne bakın.

Veri Nesnesinin Özelliklerine Göre DataTemplate Seçme

DataType Özelliği bölümünde, farklı veri nesneleri için farklı veri şablonları tanımlayabilirsiniz. Bu, özellikle farklı türlerden veya CompositeCollection farklı türlerde öğelere sahip koleksiyonlara sahip olduğunda kullanışlıdır. Özellik Değerlerini Uygulamak için DataTriggers Kullanma bölümünde, aynı türde bir veri nesnesi koleksiyonunuz varsa, her bir veri nesnesinin özellik değerlerine göre değişiklik uygulamak için bir oluşturabilir ve ardından tetikleyicileri kullanabileceğiniz gösterilmiştir. Ancak tetikleyiciler özellik değerleri uygulamanıza veya animasyon başlatmanıza olanak sağlar ancak veri nesnelerinizin yapısını yeniden oluşturma esnekliğini vermez. Bazı senaryolar, aynı türde olan ancak DataTemplate farklı özelliklere sahip veri nesneleri için farklı bir oluşturmanızı gerekli olabilir.

Örneğin, bir nesne değerine sahip olduğunda, kendinize uyarı olarak hizmet vermek için tamamen Task farklı bir görünüm vermek istiyor Priority1 olabilir. Bu durumda, yüksek öncelikli DataTemplate nesnelerin görüntüsü için bir Task oluştururuz. Şimdi kaynaklar bölümüne DataTemplate şunları ek o zaman:

<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>

Bu örnekte DataTemplate.Resources özelliği kullanılır. Bu bölümde tanımlanan kaynaklar içindeki öğeler tarafından DataTemplate paylaşılır.

Veri nesnesinin değerine göre hangisinin kullanıla seçecek mantığı sağlamak için bir alt sınıfı oluşturun DataTemplatePriority ve yöntemini geçersiz DataTemplateSelectorSelectTemplate kılın. Aşağıdaki örnekte yöntemi, SelectTemplate özelliğinin değerine göre uygun şablonun dönüş mantığını Priority sağlar. Dönüş şablonu, geliştirme öğesinin kaynaklarında Window bulunur.

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

Daha sonra bunu TaskListDataTemplateSelector kaynak olarak bildirebiliriz:

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

Şablon Seçici kaynağını kullanmak için, ItemTemplateSelector öğesinin özelliğine atayın ListBox . , ListBoxSelectTemplateTaskListDataTemplateSelector Temel koleksiyondaki öğelerin her biri için yöntemini çağırır. Çağrı, veri nesnesini öğe parametresi olarak geçirir. DataTemplateYöntemi tarafından döndürülen bu veri nesnesine uygulanır.

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

Şablon seçiciyle birlikte ListBox Şu şekilde görünür:

Data templating sample screenshot

Bu, bu örneğe ilişkin tartışmamızı yerine eriyor. Tüm örnek için bkz. veri şablonu oluşturma örneğine giriş.

Itembir denetimin stillendirilmesini ve şablon oluşturma

ItemsControlİle kullanabileceğiniz tek denetim türü olmasa da, bir DataTemplate koleksiyona bağlamak çok yaygın bir senaryodur ItemsControl . DataTemplate 'e ait olan Özellikler bölümünde, ' ın tanımının yalnızca veri sunumu ile ilgilenildiği açıklanmaktadır. Ne zaman kullanılması uygun olmadığını bilmek için DataTemplate , tarafından sunulan farklı stil ve şablon özelliklerini anlamak önemlidir ItemsControl . Aşağıdaki örnek, bu özelliklerin her birinin işlevini göstermek için tasarlanmıştır. ItemsControlBu örnekte, Tasks önceki örnekteki ile aynı koleksiyona bağlanır. Tanıtım amacıyla, bu örnekteki stillerin ve şablonların hepsi satır içi olarak bildirilmiştir.

<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>

Aşağıda, örneği işlendiğinde örnek bir ekran görüntüsü verilmiştir:

ItemsControl example screenshot

Kullanmak yerine, ItemTemplate kullanabilirsiniz ItemTemplateSelector . Bir örnek için önceki bölüme bakın. Benzer şekilde, öğesini kullanmak yerine, ItemContainerStyle kullanma seçeneğiniz vardır ItemContainerStyleSelector .

Burada gösterilmemiş olan diğer iki stille ilgili Özellikler ItemsControlGroupStyle ve ' dir GroupStyleSelector .

Hiyerarşik veri desteği

Şimdiye kadar, yalnızca tek bir koleksiyon için bağlama ve görüntüleme hakkında baktık. Bazen diğer koleksiyonları içeren bir koleksiyonunuz vardır. HierarchicalDataTemplateSınıfı, HeaderedItemsControl Bu tür verileri göstermek için türlerle birlikte kullanılmak üzere tasarlanmıştır. Aşağıdaki örnekte, ListLeagueList nesnelerinin bir listesidir League . Her League nesne bir Name ve bir nesne koleksiyonuna sahiptir Division . Her birinin Division bir Name ve bir nesne koleksiyonu vardır Team ve her Team nesne bir içerir 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>

Örnek, öğesinin kullanımını gösterir HierarchicalDataTemplate , diğer listeleri içeren liste verilerini kolayca görüntüleyebilirsiniz. Aşağıda, örneğin bir ekran görüntüsü verilmiştir.

HierarchicalDataTemplate sample screenshot

Ayrıca bkz.