WPF TreeViewの子要素にリストを表示したい

Question

お世話になっております。

WPF初心者でデータバインドの(書き方の)理解に苦しんでいるものです。

現在、TreeViewにデータを表示したいと思っており、ネット上のサンプルを見ながら
・表示したいオブジェクト(下の例ではfuga)
・自分と同じ型のリスト(下の例ではhoge)

を持つオブジェクトを階層構造で表示することは理解いたしました。

class hoge{
    public fuga Name;
    public List<hoge> Child;
}
class fuga{
    Point A;
    Point B;
    public override ToString(){
    //省略
    }
}

ここで、fugaを配列(リスト)にして、Treeにはそのリストの中身とhogeを表示してほしいのですが、XAMLの書き方がわからず困っております.

また、デフォルトではToStringの戻値が表示されるようですが、指定したメソッドの戻り値を表示させるにはどうすればよいのでしょうか

よろしくお願いいたします。

class hoge{
    public List<fuga> Name;
    public List<hoge> Child;
}
class fuga{
    Point A;
    Point B;
    public override ToString(){
    //省略
    }
}

よろしくお願いいたします。

追記---

イメージとしてこんな感じになります．

├hoge[0]┬fuga[0]
│       ├fuga[1]
│       ├fuga[2]
│       ├hoge[0]┬fuga[0]
│       │       ├fuga[1]
│       │       ├hoge[0]･･･
│       │       ├hoge[1]･･･
│       ├hoge[1]･･･
├hoge[1]･･･
・
・
・

Comments

[ebiryo]

stringの配列とhogeクラスの関係が良くわからないのですが、Treeに表示したいのはstringの配列なのでしょうか？hogeなのでしょうか？

[ebiryo]

fugaのListである Name　から　Treeに表示する文字列をどうやって設定したらよいか？ということですかね？

[ElecDove]

言葉足らずでした．表示したいのはList<fuga>の要素です．おっしゃるとおりです

[ebiryo]

すみません、理解できていないですが、Treeに表示したいのは hoge で、Treeのノードとして表示される各々のhogeの名称を　List<fuga>から生成したい、ということですかね？

[ElecDove]

TreeViewにhogeを表示し，その子要素としてList<fuga>とList<hoge>の両方を表示したいです．

[ElecDove]

あ，リストうまくいかないですね，質問本文を編集します

[ebiryo]

ん、 一番上の　hoge[0] と fuga[0]　などhogeとfugaが同じ階層あるということですかね？Treeなので入れ子構造ならわかりますが、同じ階層というのはあまり見たことのないですが。

[ElecDove]

やはり見かけない例なのですね…おっしゃるとおり同じ階層です。イメージは、Windowsのエクスプローラでしょうか。ファイルと、フォルダです。今のところfugaは入れ子になる予定はありませんが、hogeはガッツリ入れ子です。

[ElecDove]

fugaを一つしか内包しないhogeを作れば実現できますねこれ…ても、できれば最初に上げたやり方でやりたいです…

[ebiryo]

ん、fugaがファイルに相当し、hoge がフォルダに相当する、ということでしょうか？そうであれば、一番上のfuga[0]は一番上のhoge[0]の「下」にぶら下がるはずですよね（私が勘違いしているのでしょうか。。）

[ElecDove]

はい，そのとおりだと思います．

Answer 1

ここで、fugaを配列(リスト)にして、Treeにはそのリストの中身とhogeを表示してほしいのですが、XAMLの書き方がわからず困っております.

hoge・fugaではわかりにくいので、以下Folder・Fileとさせていただきます。

複数項目をマージするのは、CompositeCollectionが便利です。
CompositeCollection クラス (System.Windows.Data) | Microsoft Learn
方法: CompositeCollection を実装する - WPF | Microsoft Learn

ただバインドに癖があるのでコンバータを使用しました。
wpf - How do you bind a CollectionContainer to a collection in a view model? - Stack Overflow

また、デフォルトではToStringの戻値が表示されるようですが、指定したメソッドの戻り値を表示させるにはどうすればよいのでしょうか

Fileにそのメソッドを呼ぶプロパティを作ってバインドしてください。

<Window
  x:Class="Q82219.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Q82219"
  Width="800"
  Height="450"
  ThemeMode="System">
  <Grid>
    <TreeView ItemsSource="{Binding Folders}">
      <TreeView.Resources>
        <local:CompositeCollectionConverter x:Key="Converter" />

        <HierarchicalDataTemplate DataType="{x:Type local:Folder}">
          <HierarchicalDataTemplate.ItemsSource>
            <MultiBinding Converter="{StaticResource Converter}">
              <Binding Path="Files" />
              <Binding Path="Folders" />
            </MultiBinding>
          </HierarchicalDataTemplate.ItemsSource>
          <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate DataType="{x:Type local:File}">
          <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
      </TreeView.Resources>
    </TreeView>
  </Grid>
</Window>

using System.Collections;
using System.Globalization;
using System.IO;
using System.Windows;
using System.Windows.Data;

namespace Q82219;

public class Folder(DirectoryInfo info)
{
    public string Name => info.Name;
    public List<File> Files { get; } = [.. info.EnumerateFiles().Select(x => new File(x))];
    public List<Folder> Folders { get; } = [.. info.EnumerateDirectories().Select(x => new Folder(x))];
}

public class File(FileInfo info)
{
    public string Name => info.Name;
}

public partial class MainWindow : Window
{
    public List<Folder> Folders { get; } = [new(new(@"..\..\.."))];

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }
}


// [wpf - How do you bind a CollectionContainer to a collection in a view model? - Stack Overflow](https://stackoverflow.com/questions/6446699)
public class CompositeCollectionConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var c = new CompositeCollection();
        foreach (var v in values)
        {
            if (v is IEnumerable e) c.Add(new CollectionContainer { Collection = e, });
            else c.Add(v);
        }
        return c;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) => throw new NotImplementedException();
}

Answer 2

これでご要望の動きになるかわかりませんが、

• hogeクラスに、配下のhoge,fuga両方を列挙するプロパティを実装

public IEnumerable<object> Items
{
    get
    {
        foreach (var v in Name)
            yield return v;
        foreach (var v in Child)
            yield return v;
    }
}

• 実装したItemsプロパティをItemsSourceに指定
  hoge,fugaそれぞれに対応したHierarchicalDataTemplate も用意

<TreeView ItemsSource="{Binding XXX}">
    <TreeView.Resources>
        <!-- hoge用テンプレート-->
        <HierarchicalDataTemplate DataType="{x:Type local:hoge}" ItemsSource="{Binding Items}">
            <TextBlock Text="{Binding}" />
        </HierarchicalDataTemplate>
        <!-- fuga用テンプレート-->
        <HierarchicalDataTemplate DataType="{x:Type local:fuga}" >
            <TextBlock Text="{Binding}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>

でどうでしょうか?
※当然ですが、hoge配下のName、ChildはフィールドではなくPropertyで
※ChildはChildrenのほうが良いと思います

Comments

[ElecDove]

回答いただきありがとうございます．

今ちょっと実行できないので，後でやってみたいと思います．

※Childは単数でした(^^;Childrenにしておきます

[ElecDove]

思っていたとおりの動作をしました!!!ありがとうございます