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

原创

用户7152477

修改于 2022-02-25 17:24:47

6120

修改于 2022-02-25 17:24:47

文章被收录于专栏：CSharp编程CSharp编程

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

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

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

Newbeecoder.UI开源控件Demo下载链接：https://share.weiyun.com/py6W1dcK

控件库根据产品原型图开发出一样的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>

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。