Display a Linear list in tree view

[Ahmed moussa]

I have this class,

The Bones collection is linear with all of my bone objects are in the collection directly

While the children collection tells what Nodes are children to the bone

How to bind Bones with the item source of the TreeView Control to display the collection in hierarchical view?

public abstract class NodeViewModel : ObservableObject, IDisposable

{

private string _name;

public string Name

{

get => _name;

set => SetProperty(ref _name, value);

}

private NodeViewModel _parent;

public NodeViewModel Parent

{

get { return _parent; }

set

{

if (SetProperty(ref _parent, value))

{

if (_parent != null)

{

OnPropertyChanged(nameof(Parent));

}

}

}

}

private ObservableCollection<NodeViewModel> _children;

public ObservableCollection<NodeViewModel> Children

{

get { return _children; }

set { if (SetProperty(ref _children, value)) { } }

}

}

public class BoneNodeViewModel : NodeViewModel { }

public ObservableCollection<BoneNodeViewModel> Bones

{

get => _bones;

set => SetProperty(ref _bones, value);

}

//This is how i populate the collection

public async void CreateBoneModels()

{

    Bones.Clear();

    foreach (MyBone mySceneBone in myScene.Bones)

    {

        var model = new BoneNodeViewModel(mySceneBone, RootNode, myScene.Bones);

        model.BoneTransformations(model, RootNode);

        Bones.Add(model);

        if (mySceneBone.ParentNode != null)

        {

            var parentmodel = Bones.FirstOrDefault(bm => bm.Name == mySceneBone.Parent);

            if (parentmodel != null)

            {

                parentmodel.AddChild(model);

             

            }

        }

       

    }

}

//

this is my attempt in XAML

<syncfusion:SfTreeView

x:Name="BonesTree"

AllowDeleting="True"

AllowDragging="True"

AllowEditing="True"

CheckBoxMode="Recursive"

ItemContextMenuOpening=" BonesTree s_ItemContextMenuOpening"

ItemsSource="{Binding Bones}"

PreviewMouseLeftButtonDown=" BonesTree _PreviewMouseLeftButtonDown"

SelectedItem="{Binding SelectedBoneVM, UpdateSourceTrigger=PropertyChanged}"

SelectionChanged=" BonesTree _SelectionChanged"

SelectionMode="Extended">

<syncfusion:SfTreeView.ItemTemplate>

<HierarchicalDataTemplate DataType="{x:Type Models:BoneNodeViewModel}">

<StackPanel Orientation="Horizontal">

<Image

Width="15"

Height="15"

Margin="0,0,5,0"

Source="{svgc:SvgImage Source=/IncludeResources/IconsSvg/bone_data.svg,

AppName=Studio}" />

<TextBlock Text="{Binding Bone.Name}" />

StackPanel>

HierarchicalDataTemplate>

syncfusion:SfTreeView.ItemTemplate>

<syncfusion:SfTreeView.HierarchyPropertyDescriptors>

<engine:HierarchyPropertyDescriptor

ChildPropertyName="Children"

IsSelectedPropertyName="IsSelected"

TargetType="{x:Type Models:BoneNodeViewModel}" />

syncfusion:SfTreeView.HierarchyPropertyDescriptors>

<syncfusion:SfTreeView.ItemContextMenu>

<ContextMenu>

<MenuItem

x:Name="AddBoneMenuItem"

Click="AddBoneMenuItem_Click"

Header="Add Bone" />

<MenuItem

x:Name="RemoveBonesMenuItem"

Click="RemoveBonesMenuItem_Click"

Header="Remove Bone/s" />

<MenuItem

x:Name="DublicateBonesMenuItem"

Click="DublicateBonesMenuItem_Click"

Header="Duplicate Bone" />

<MenuItem

x:Name="SnapBonesMenuItem"

Click="SnapBonesMenuItem_Click"

Header="Snap Bone To Position" />

ContextMenu>

syncfusion:SfTreeView.ItemContextMenu>

<syncfusion:SfTreeView.SelectionBackgroundColor>

<SolidColorBrush Color="#FF807F81" />

syncfusion:SfTreeView.SelectionBackgroundColor>

syncfusion:SfTreeView>

I get correct hierarchy But I get a lot of duplication

For each bone it will appear as a child node for its parent and a root node as well, How to prevent that ?

[Vijayarasan Sivanandham]

Hi Ahmed moussa,

We have checked the provided code snippet from our end. In SfTreeView.ItemTemplate, you have loaded data as HierarchicalDataTemplate.

We also regret to inform you that currently, Our SfTreeView does not contain support for achieving your requirement of “loaded data as HierarchicalDataTemplate in SfTreeView”. You can populate data by creating a hierarchical data model and binding it to SfTreeview. For more information related to Data Population, please refer to the below user guide documentation,

UG Link: Data Population in WPF TreeView control | Syncfusion

You can download the SfTreeView Samples from below mentioned link,

GitHub Link: wpf-demos/treeview at master · syncfusion/wpf-demos (github.com)

Based on the provided information, it seems that there is a lot of duplication in your application. If possible, could you please provide a simple sample that mirrors your scenario? This will help in replicating the reported problem accurately. It will be more helpful for us to check the possibilities to resolve the reported problem.

Regards,
Vijayarasan S