次の方法で共有

方法: 単純または複雑な 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}"/>

埋め込みコンテンツを持つ DockPanel コントロールを含む TreeViewItem コンテンツを作成する 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>

参照