C WPF new open source control library: newbeecoder Nbtreeview of UI

The main function of the tree control is to display the collapsible node contents of the hierarchical structure , You can use... In the control ItemsSource As a data source .

There is an important attribute HierarchicalDataTemplate Object is used to set the hierarchical data template .

stay NbTreeView Control TreeViewItem Fill in content items , When setting IsExpanded The attribute is true Represents expansion , If you want to get the selected status, use IsSelected.

Newbeecoder.UI Open source controls Demo Download link ：https://share.weiyun.com/P1ZABPUd

The control library develops the same... According to the product prototype diagram UI Interface , First video demo control library effect ：

Video content

In the custom NbTreeView Add several attributes , Namely MaskBackground（ Mask layer background color ）、ShowIcon（ Display the expansion icon ）、ShowNoItemsIcon（ No children , Whether to display the expansion icon ）、IconWidth（ Item left expand icon width ）、ExpanderStyle（ Expand style ）、ExpandedIcon（ Expand the icon ） etc. . You need to change the style by modifying the custom attributes .

Next, let's take a look at the tree control rendering ：

The normal tree view calls the code ：

<TextBlock Text=" Normal tree view " Margin="5"/>
<NbTreeView Style="{DynamicResource DefaultTreeViewStyle}" Margin="5" Width="150">
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" Option one " IsSelected="True">
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 1"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 2"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 3"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" Option 2 ">
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 1"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 2"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 3"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 4"/>
        <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" children 5"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource DefaultTreeViewItemStyle}" Header=" Option 2 "/>
</NbTreeView>

File tree view calls code ：

<TextBlock Text=" Document tree view " Margin="5"/>
<NbTreeView Style="{DynamicResource FolderTreeViewStyle}" Margin="5" Width="150">
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" Option one " IsSelected="True">
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 1"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 2"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 3"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" Option 2 ">
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 1"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 2"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 3"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 4"/>
        <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" children 5"/>
    </NbTreeViewItem>
    <NbTreeViewItem Style="{DynamicResource FolderTreeViewItemStyle}" Header=" Option 2 "/>
</NbTreeView>