方法: 単純または複雑な TreeView を作成する
この例では、単純または複雑な TreeView コントロールを作成する方法を示します。
TreeView は TreeViewItem コントロールの階層から構成されます。このコントロールには、単純なテキスト文字列が含まれることもあれば、Button コントロールやコンテンツが埋め込まれた StackPanel など、もっと複雑なコンテンツが含まれることもあります。 TreeView コンテンツは明示的に定義できます。あるいは、データ ソースからコンテンツを提供できます。 このトピックではこうした概念の例を提供します。
例
TreeViewItem の Header プロパティには、その項目に対して TreeView で表示されるコンテンツが含まれます。 TreeViewItem には、その子要素として TreeViewItem コントロールが与えられることもあります。また、これらの子要素は Items プロパティを利用して定義できます。
次の例では、Header プロパティをテキスト文字列に設定することで TreeViewItem コンテンツを明示的に定義する方法を示します。
<TreeView>
<TreeViewItem Header="Employee1">
<TreeViewItem Header="Jesper"/>
<TreeViewItem Header="Aaberg"/>
<TreeViewItem Header="12345"/>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem Header="Dominik"/>
<TreeViewItem Header="Paiha"/>
<TreeViewItem Header="98765"/>
</TreeViewItem>
</TreeView>
次の例では、Button コントロールである Items を定義することで TreeViewItem の子要素を定義する方法を示します。
<TreeView>
<TreeViewItem Header ="Employee1">
<TreeViewItem.Items>
<Button>Jesper</Button>
<Button>Aaberg</Button>
<Button>12345</Button>
</TreeViewItem.Items>
</TreeViewItem>
<TreeViewItem Header="Employee2">
<TreeViewItem.Items>
<Button>Dominik</Button>
<Button>Paiha</Button>
<Button>98765</Button>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>
次の例では、XmlDataProvider によって TreeViewItem コンテンツが提供され、HierarchicalDataTemplate によってコンテンツの外観が定義される TreeView を作成する方法を示します。
<XmlDataProvider x:Key="myEmployeeData" XPath="/EmployeeData">
<x:XData>
<EmployeeData xmlns="">
<EmployeeInfo>
<EmployeeInfoData>Employee1</EmployeeInfoData>
<Item Type="FirstName">Jesper</Item>
<Item Type="LastName">Aaberg</Item>
<Item Type="EmployeeNumber">12345</Item>
</EmployeeInfo>
<EmployeeInfo>
<EmployeeInfoData>Employee2</EmployeeInfoData>
<Item Type="FirstName">Dominik</Item>
<Item Type="LastName">Paiha</Item>
<Item Type="EmployeeNumber">98765</Item>
</EmployeeInfo>
</EmployeeData>
</x:XData>
</XmlDataProvider>
<HierarchicalDataTemplate DataType="EmployeeInfo"
ItemsSource ="{Binding XPath=Item}">
<TextBlock Text="{Binding XPath=EmployeeInfoData}" />
</HierarchicalDataTemplate>
<TreeView ItemsSource="{Binding Source={StaticResource myEmployeeData},
XPath=EmployeeInfo}"/>
次の例では、TreeViewItem コンテンツには、コンテンツが埋め込まれている DockPanel コントロールが含まれる TreeView を作成する方法を示します。
<TreeView>
<TreeViewItem Header="Animals">
<TreeViewItem.Items>
<DockPanel>
<Image Source="data\fish.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Fish</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\dog.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Dog</TextBlock>
</DockPanel>
<DockPanel>
<Image Source="data\cat.png"/>
<TextBlock Margin="5" Foreground="Brown"
FontSize="12">Cat</TextBlock>
</DockPanel>
</TreeViewItem.Items>
</TreeViewItem>
</TreeView>
関連項目
.NET Desktop feedback