[WinUI 3][TreeView] ノードの選択モードを変更する

TreeView

2022.05.04

TreeView のノードは既定では、１つしか選択できません。

この記事では TreeView のノードの選択方法を変更する方法について説明をします。

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

ノードの複数選択

環境
ノードの選択方法の設定
1. XAML の例
2. C# の例
WinUi Tips

環境

開発環境	Microsoft Visual Studio Enterprise 2019 Version 16.11.5
Framework	Microsoft .NET Framewohttps://blog.hiros-dot.net/?p=11007rk Version 4.8.04161

ノードの選択方法の設定

ノードは、既定では１つしか選択できないようになっていますが、SelectionMode プロパティの値を変更することで複数選択することも可能です。

SelectionMode プロパティには、以下に示す TreeViewSelectionMode 列挙体の値を指定します。

値	説明
None	ノードを選択することができません。
Single	１つのノードのみ選択することができます。
Multiple	複数のノードを選択することができます。

XAML の例

以下は、TreeNode を複数選択可能にする例です。

12行目で SelectionMode に Multiple を設定して、ノードを複数選択できるようにしています。

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 SelectionMode="Multiple">
            <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>

実行すると、選択したアイテムにチェックが付くようになります。

ノードの複数選択

C# の例

以下は、C# でノードを複数選択できるようにする例です。

public MainWindow()
{
    this.InitializeComponent();
    TreeView treeView = new TreeView();
    treeView.SelectionMode = TreeViewSelectionMode.Multiple;
}