情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

WPFのTreeViewコントロールの基本的な使い方

Step1 データ構造を定義する

INotifyPropertyChangedを継承したデータ表現クラスを作ります。

TreeViewに表示するデータは普通木構造なので、子を表すObservableCollection<T>型のメンバが必要です(ここではObservableCollection<Node>型のNodesプロパティ)。

public class Node : INotifyPropertyChanged
{
    public Node(string _title, int _count, bool _isUpdated, ObservableCollection<Node> _nodes)
    {
        keyword = _title;
        count = _count;
        isUpdated = _isUpdated;
        nodes = _nodes;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

    private ObservableCollection<Node> nodes = null;
    public ObservableCollection<Node> Nodes
    {
        get
        {
            return nodes;
        }
        set
        {
            if (value != nodes)
            {
                nodes = value;
                NotifyPropertyChanged("Nodes");
            }
        }
    }

    private string keyword = "";
    public string Keyword
    {
        get
        {
            return keyword;
        }
        set
        {
            if (value != keyword)
            {
                keyword = value;
                NotifyPropertyChanged("Keyword");
            }
        }
    }

    private int count = 0;
    public int Count
    {
        get
        {
            return count;
        }
        set
        {
            if (value != count)
            {
                count = value;
                NotifyPropertyChanged("Count");
            }
        }
    }

    private bool isUpdated = false;
    public bool IsUpdated
    {
        get
        {
            return isUpdated;
        }
        set
        {
            if (value != isUpdated)
            {
                isUpdated = value;
                NotifyPropertyChanged("IsUpdated");
            }
        }
    }
}

Step2 データを作成する

上で定義したデータ表現クラスを使ってデータを作成します。

TreeViewItemsControlの派生型)に表示するので、データはコレクションです。ObservableCollection<T>型を使います。

public static ObservableCollection<Node> items = new ObservableCollection<Node>()
{
    new Node("√", 0, true, new ObservableCollection<Node>()
    {
        new Node("キーワード1", 0, false, new ObservableCollection<Node>()
        {
            new Node("条件1", 0, false, new ObservableCollection<Node>(){}),
            new Node("条件2", 0, false, new ObservableCollection<Node>(){}),
        }),
        new Node("キーワード2", 0, true, new ObservableCollection<Node>(){}),
        new Node("キーワード3", 0, false, new ObservableCollection<Node>(){}),
        new Node("キーワード4", 0, true, new ObservableCollection<Node>(){}),
    }),
};

Step3 TreeViewコントロールを作成・設定する

ResourcesにHierarchicalDataTemplateを追加します。

このテンプレートでデータ表現クラス(この場合はNodeクラス)の表示方法を指定します。ItemsSourceには子を表すプロパティをバインドします。

スタイル設定なども追加します。

<TreeView x:Name="tv">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:Node}" ItemsSource="{Binding Nodes}">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Keyword}"></TextBlock>
                <TextBlock Text="("></TextBlock>
                <TextBlock Text="{Binding Count}"></TextBlock>
                <TextBlock Text=")"></TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsUpdated}" Value="True">
                    <Setter Property="Background" Value="Pink"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
</TreeView>

Step4 データを設定する

最初から表示しておきたいのでInitializeComponentの後でTreeViewItemsSourceにデータを設定します。

public Window1()
{
    InitializeComponent();

    tv.ItemsSource = items;
}

Step5 その他

項目の変更や追加をしたい場合はボタンなどを作成して、イベントを処理します。

データオブジェクトを操作すれば自動的に表示も更新されます。

private void bChange_Click(object sender, RoutedEventArgs e)
{
    items[0].Nodes[0].Keyword = "変更しました!";
}

private void bAdd_Click(object sender, RoutedEventArgs e)
{
    items[0].Nodes.Add(new Node("追加しました!", 0, false, new ObservableCollection<Node>()
    {
        new Node("追加しました!!", 0, true, new ObservableCollection<Node>(){}),
    }));
}

結果は下のようになります。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-wpf