首页 > 其他分享 >WPF TreeView 三层绑定模板

WPF TreeView 三层绑定模板

时间:2024-06-24 10:11:12浏览次数:19  
标签:ObservableCollection 绑定 set WPF TreeView public 模板

在WPF应用程序中,使用TreeView来展示三层数据结构是一个常见的需求。为此,你需要定义适当的数据绑定和模板。以下是一个完整的示例代码,展示如何实现这一点。

数据模型

首先,我们需要定义三层数据模型。假设我们有三层数据结构:RootItem包含ChildItemChildItem又包含SubChildItem

public class SubChildItem
{
    public string Name { get; set; }
}

public class ChildItem
{
    public string Name { get; set; }
    public ObservableCollection<SubChildItem> SubChildItems { get; set; } = new ObservableCollection<SubChildItem>();
}

public class RootItem
{
    public string Name { get; set; }
    public ObservableCollection<ChildItem> ChildItems { get; set; } = new ObservableCollection<ChildItem>();
}

视图模型

接下来,我们定义一个视图模型来供TreeView绑定使用。

public class MainViewModel
{
    public ObservableCollection<RootItem> RootItems { get; set; } = new ObservableCollection<RootItem>();

    public MainViewModel()
    {
        // 初始化数据
        var rootItem = new RootItem { Name = "Root 1" };
        var childItem = new ChildItem { Name = "Child 1" };
        var subChildItem = new SubChildItem { Name = "SubChild 1" };

        childItem.SubChildItems.Add(subChildItem);
        rootItem.ChildItems.Add(childItem);
        RootItems.Add(rootItem);
    }
}

XAML模板和绑定

为了展示三层数据结构,我们需要定义TreeViewHierarchicalDataTemplate

<Window x:Class="WpfApp.TreeViewThreeLayers"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewThreeLayers" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <TreeView ItemsSource="{Binding RootItems}">
            <TreeView.Resources>
                <!-- 数据层次模板 SubChildItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:SubChildItem}" ItemsSource="{Binding}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
                
                <!-- 数据层次模板 ChildItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:ChildItem}" ItemsSource="{Binding SubChildItems}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>

                <!-- 数据层次模板 RootItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:RootItem}" ItemsSource="{Binding ChildItems}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

代码解释

  1. 数据模型

    • SubChildItemChildItemRootItem定义了三层数据结构。
    • 每个类包含一个ObservableCollection属性,用于包含下一层的数据。
  2. 视图模型

    • MainViewModel包含一个ObservableCollection<RootItem>,保存根数据。
    • 构造函数用于初始化示例数据。
  3. XAML模板和绑定

    • TreeView直接绑定到MainViewModelRootItems
    • 使用HierarchicalDataTemplate定义每个数据层次的模板。
    • ItemsSource属性指定绑定到下一层的数据集合。
    • DataContext直接绑定到主窗口的MainViewModel

这样,你就可以在TreeView中展示三层嵌套的数据结构了。每一层的数据会按照你定义的模板展示,并且会自动展开包含下一层的数据。

标签:ObservableCollection,绑定,set,WPF,TreeView,public,模板
From: https://www.cnblogs.com/dyanblog/p/18264454

相关文章

  • WPF 做一个超级简单的 1024 数字接龙游戏
    这是一个我给自己做着玩的游戏,没有什么复杂的界面,就一些简单的逻辑游戏的规则十分简单,那就是有多个列表。程序会给出一个数字,玩家决定数字放在哪个列表里面。如果放入列表里面的数字和列表里面最后一个数字相同,那两个数字将会叠加进行合并,合并两个1024将会自动清理掉整个列表......
  • WPF中ComboBox几种数据绑定的方法
    一、用字典给ItemsSource赋值XMAL、<ComboBoxName="cmb_list"Grid.Row="1"Grid.Column="1"Height="23"DisplayMemberPath="Value"SelectedValuePath="Key"SelectionChanged="cmb1_SelectionChanged"......
  • WPF 视觉状态VisualState使用
    VisualState基本使用首先搭建一个自定义控件,继承自ContentControl,自动生成了这些文件由于CustomButton在Custom命名空间中,所以改一下xaml中的引用xmlns:local="clr-namespace:WpfApp1.Custom"定义部件和视觉状态TemplatePart是模板中的部件名TemplateVisualState是模板中......
  • WPF频繁更新UI卡顿问题
    我的WPF程序,需要连接PLC、CCD、RFID、扫码枪、控制卡所以我写了InitHardware();privatevoidInitHardware(){vartasks=newTask[]{//后台线程长连接,不取消令牌Task.Factory.StartNew(()=>InitConnPLC(),CancellationToken.None,Ta......
  • 苹果cms10影视网整站源码下载/苹果cms模板MXone Pro自适应影视电影网站模板
    下载地址:苹果cms10影视网整站源码下载/苹果cms模板MXonePro自适应影视电影网站模板模板带有夜间模式、白天晚上自动切换,有观影记录、后台设置页。全新UI全新框架,加载响应速度更快,seo更好,去除多余页面优化代码。MXonePro是一款简约清新,美观大气,单纯的影视模板,没有复杂的页面......
  • vue中的模板语法
    第1部分:引言1.1介绍Vue框架Vue.js,简称Vue,是一个用于构建用户界面的渐进式JavaScript框架。自从2014年首次发布以来,Vue因其简洁、易学和高效而迅速赢得了开发者的青睐。Vue的核心库只关注视图层,易于与其他库或现有项目整合,同时也可以支持通过各种插件和库构建复杂的单页应......
  • C#的无边框窗体项目模板 - 开源研究系列文章
          继续整理和编写代码及博文。      这次将笔者自己整理的C#的无边框窗体项目的基本模板进行总结,得出了基于C#的.netframework的Winform的4个项目模板,这些模板具有基本的功能,即已经初步将代码写了,直接在其基础上添加业务代码即可: 1、空项目;这个......
  • 在IDEA中使用Thymeleaf模板,报红色波浪线
    使用IDEA中打开使用了Thymeleaf模板的项目时,前端界面的模板报了很多红色的波浪线,提示Cannotresolve'###'如:代码没有任何问题,也能够正常运行解决办法:打开settings:这样就可以消除波浪线了......
  • WebView2UI - 在WPF之中使用WebView2的一些经验总结
    项目地址:https://gitee.com/skyw18/WebView2UI项目地址:https://github.com/skyw18/WebView2UIwebview简介与生命周期:WPF应用中的WebView2入门-MicrosoftEdgeDeveloperdocumentation|MicrosoftLearn具体代码可以参考微软官方示例文档WPF示例应用-MicrosoftEdge......
  • 【C#】WPF 类库项目 无法创建 “资源字典” 文件
    解决办法打开项目工程文件(project.csproj)在标签添加下面红色的三句话<Deterministic>true</Deterministic><ProjectTypeGuids>{60dc8134-eba5-43b8-bcc9-bb4bc16c2548};{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}</ProjectTypeGuids><WarningLevel>......