C# WPF新版开源控件库：Newbeecoder.UI之NbTreeView

最新推荐文章于 2025-02-19 08:45:23 发布

有技巧搬砖

最新推荐文章于 2025-02-19 08:45:23 发布

阅读量683

点赞数

分类专栏：用户界面设计 c# WPF MVVM 文章标签： wpf ui c#

本文链接：https://blog.csdn.net/liaohaiyin/article/details/122208726

版权

c# WPF 同时被 3 个专栏收录

92 篇文章

订阅专栏

MVVM

92 篇文章

订阅专栏

用户界面设计

31 篇文章

订阅专栏

本文介绍了如何使用Newbeecoder.UI开源控件库创建具有自定义属性的Treeview，包括MaskBackground、ShowIcon等。通过示例代码展示了普通树状视图和文件树状视图的调用方式，提供了可快速构建漂亮界面的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

树状控件主要功能是显示分层结构可折叠的节点内容，在控件中可以使用ItemsSource作为数据源。

有一个重要的属性HierarchicalDataTemplate对象用于设置层级数据模板。

在NbTreeView控件TreeViewItem填充内容项，当设置IsExpanded属性为true表示展开，如果想获取选中状态使用IsSelected。

Newbeecoder.UI开源控件Demo下载链接：Newbeecoder.UI.zip-C#文档类资源-CSDN下载WPF开发桌面软件具有天然优势，能快速漂亮的界面程序。Newbeecoder.UI是一款简单易用漂更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/liaohaiyin/63234875

控件库根据产品原型图开发出一样的UI界面，先视频演示控件库效果：

WPF UI开源控件

在自定义NbTreeView增加几项属性，分别是MaskBackground（遮罩层背景色）、ShowIcon（显示展开图标）、ShowNoItemsIcon（无子项，是否显示展开图标）、IconWidth（项左侧展开图标宽度）、ExpanderStyle（展开样式）、ExpandedIcon（展开图标）等。需要更改样式通过修改自定义属性来完成。

接下来看一下树状控件效果图：

普通树状视图调用代码：

<TextBlock Text="普通树状图" Margin="5"/>
<NbTreeView Style="{DynamicResource DefaultTreeViewStyle}" Margin="5" Width="150">
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="选项一" IsSelected="True">
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项1"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项2"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项3"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="选项二">
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项1"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项2"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项3"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项4"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="子项5"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header="选项二"/>
</NbTreeView>

文件树状视图调用代码：

<TextBlock Text="文件树状图" Margin="5"/>
<NbTreeView Style="{DynamicResource FolderTreeViewStyle}" Margin="5" Width="150">
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="选项一" IsSelected="True">
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项1"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项2"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项3"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="选项二">
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项1"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项2"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项3"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项4"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="子项5"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header="选项二"/>
</NbTreeView>