WPFで検索条件に基づいてクリックしてクエリし、対応するノードを表示するにはどうすればよいですか

2年 ago
陽, 向宇
1 minute

WPF では、TreeView コントロールを使用してノードを表示し、検索条件に基づいて関連するノードを表示できます。

最初に、TreeView コントロールを WPF ウィンドウに追加し、ノードのデータ モデルを定義する必要があります。たとえば、データ モデルが単純なツリー構造であると仮定します。

public class Node
{
    public string Name { get; set; }
    public ObservableCollection<Node> Children { get; set; }
}

次に、ウィンドウのコードファイルにルートノードの集合を定義し、TreeViewのデータソースとして使用することができます。

public partial class MainWindow : Window
{
    public ObservableCollection<Node> Nodes { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        Nodes = new ObservableCollection<Node>
        {
            new Node
            {
                Name = "Node 1",
                Children = new ObservableCollection<Node>
                {
                    new Node { Name = "Node 1.1" },
                    new Node { Name = "Node 1.2" }
                }
            },
            new Node
            {
                Name = "Node 2",
                Children = new ObservableCollection<Node>
                {
                    new Node { Name = "Node 2.1" },
                    new Node { Name = "Node 2.2" }
                }
            }
        };

        treeView.ItemsSource = Nodes;
    }
}

続いて、検索ボタンのクリックイベントで検索条件にあったノードを絞り込んで、TreeViewのデータソースを再設定します。

private void SearchButton_Click(object sender, RoutedEventArgs e)
{
    string searchKeyword = searchTextBox.Text.Trim();

    if (string.IsNullOrWhiteSpace(searchKeyword))
    {
        treeView.ItemsSource = Nodes;
    }
    else
    {
        var filteredNodes = new ObservableCollection<Node>();
        FilterNodes(Nodes, filteredNodes, searchKeyword);
        treeView.ItemsSource = filteredNodes;
    }
}

private void FilterNodes(IEnumerable<Node> nodes, ObservableCollection<Node> filteredNodes, string searchKeyword)
{
    foreach (var node in nodes)
    {
        if (node.Name.Contains(searchKeyword))
        {
            filteredNodes.Add(node);
        }

        if (node.Children != null)
        {
            FilterNodes(node.Children, filteredNodes, searchKeyword);
        }
    }
}

FilterNodesメソッドは、このコードで再帰的にすべてのノードを探索し、検索条件に一致するノードをfilteredNodesコレクションに追加します。

最後に XAML ファイルにて、検索ボタンのクリックイベントにイベントハンドラを追加する必要があります:

<Button Content="搜索" Click="SearchButton_Click" />

こうして、検索条件を入力して検索ボタンを押すと、TreeView に対応するノードが表示されます。

bannerAds