[WinUI 3][TreeView] ノードを展開する

TreeView のノードは既定では折り畳まれた状態です。

この記事では TreeView のノードの展開方法について説明をします。

公式サイト情報はコチラを参照してください。

環境

ノードの展開方法

ノードは、既定では折り畳まれた状態になっています。これを展開状態にするには、IsExpanded プロパティに True を設定します。

XAML の例

以下は、Folder1というコンテンツを持つノードを展開状態にする例です。

XAML の例

<Window
    x:Class="WinUISample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUISample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel x:Name="myStackPanel" Orientation="Vertical" HorizontalAlignment="Left" >

        <TreeView>
            <TreeView.RootNodes>
                
                <TreeViewNode Content="File1" />
                
                <TreeViewNode Content="Folder1" IsExpanded="True">
                    <TreeViewNode.Children>
                        <TreeViewNode Content="File1" />
                        <TreeViewNode Content="File2" />
                        <TreeViewNode Content="File3" />
                    </TreeViewNode.Children>
                </TreeViewNode>
                
                <TreeViewNode Content="Folder2">
                    <TreeViewNode.Children>
                        <TreeViewNode Content="FoldrerA">
                            <TreeViewNode.Children>
                                <TreeViewNode Content="File1" />
                                <TreeViewNode Content="File2" />
                                <TreeViewNode Content="File3" />
                            </TreeViewNode.Children>
                        </TreeViewNode>
                    </TreeViewNode.Children>
                </TreeViewNode>
                
            </TreeView.RootNodes>
        </TreeView>

    </StackPanel>
</Window>

Folder1 ノードを展開した例

C# の例

XAML と同様に C# でも　TreeNode の IsExpanded プロパティにTrueを設定して、ノードを展開することができます。

public MainWindow()
{
    this.InitializeComponent();

    TreeView treeView = new TreeView();
    TreeViewNode file1 = new TreeViewNode();
    TreeViewNode folder1 = new TreeViewNode();
    TreeViewNode folder1File1 = new TreeViewNode();
    TreeViewNode folder1File2 = new TreeViewNode();
    TreeViewNode folder1File3 = new TreeViewNode();
    TreeViewNode folder2 = new TreeViewNode();
    TreeViewNode folderA = new TreeViewNode();
    TreeViewNode folderAFile1 = new TreeViewNode();
    TreeViewNode folderAFile2 = new TreeViewNode();
    TreeViewNode folderAFile3 = new TreeViewNode();

    // 各子ノードのコンテンツを設定
    file1.Content = "File1";

    folder1.Content = "Folder1";
    folder1File1.Content = "File1";
    folder1File2.Content = "File2";
    folder1File3.Content = "File3";

    folder2.Content = "Folder2";
    folderA.Content = "FolderA";
    folderAFile1.Content = "File1";
    folderAFile2.Content = "File2";
    folderAFile3.Content = "File3";

    // 子ノード folder1 を作成
    folder1.Children.Add(folder1File1);
    folder1.Children.Add(folder1File2);
    folder1.Children.Add(folder1File3);

    // 孫ノード folderA 配下を作成
    folderA.Children.Add(folderAFile1);
    folderA.Children.Add(folderAFile2);
    folderA.Children.Add(folderAFile3);
    // 子ノード folder2 を作成
    folder2.Children.Add(folderA);

    // ノードを展開する例
    folder1.IsExpanded = true;

    // ルートノードに子ノードを追加
    treeView.RootNodes.Add(file1);
    treeView.RootNodes.Add(folder1);
    treeView.RootNodes.Add(folder2);

    // 作成した TreeView を StackPanel に追加
    myStackPanel.Children.Add(treeView);
}

WinUi Tips

本サイトでまとめている WinUI Tips の一覧はこちらから確認できます。

Please follow and like us: