locked
open source TreeView for Xamarin.Forms - looking for contributors RRS feed

  • Question

  • User40038 posted

    Hey Xamarin.Forms gurus!

    I needed a TreeView control for Xamarin.Forms and couldn't find one, so I did a spike and came up with a working prototype and demo app.

    It its current version, data binding isn't set up, and the item template for the node header isn't separated out, but I think the demo provides a really good sense of the potential of this approach to building a TreeView as a set of nested StackLayouts (TreeNodeView inherits from StackLayout).

    There's a screen image that I checked in with the source code, and I designed the layout of the demo for my 7" tablet, but it should squeeze down okay to smaller devices.

    Here's the github repository: https://github.com/danvanderboom/Xamarin-Forms-TreeView

    KEY POINT: If you're familiar with best practices in building custom controls for Xamarin.Forms and you're interested in shaping the future of an open source TreeView control, let me know!

    Thursday, August 14, 2014 3:46 PM

All replies

  • User53097 posted

    thanks

    Thursday, August 14, 2014 11:41 PM
  • User40038 posted

    I was able to implement MVVM scenario support with hierarchical data binding of structure and content. The ability to create arbitrary item templates is now separate from the control itself. If you insert a new node into your tree model, the TreeView UI will update automatically.

    The demo app (tested so far only on Android) shows a complex layout, node and item template generation in the control, and MVVM data binding.

    Next steps will be to make proper use of ItemTemplate/DataTemplate instead of the factory method I employed, and to optimize it for performance to support larger trees. In the end, StackLayout may be too resource intensive, and something much lighter weight can instead project onto a single linear ListView or something.

    Sunday, August 17, 2014 5:58 AM
  • User40038 posted

    The demo app showing how to use TreeView now works for both Android and iOS. I didn't have to make any adjustments at all for it to work well on my iPad or in the simulator.

    Sunday, August 17, 2014 6:18 PM
  • User43486 posted

    Why I can't see the solution file in github? Thanks

    Wednesday, October 1, 2014 10:29 PM
  • User40038 posted

    Thanks for letting me know the solution file is missing. I'll fix!

    Sunday, October 12, 2014 11:31 PM
  • User71792 posted

    Hi, Dan, can you add the solution file? The treeview is of great interest to me for a current project. If you are able to help it will be much appreciated. Geoff

    Tuesday, December 16, 2014 11:14 AM
  • User40038 posted

    @GeoffSorensen.AU Hi Geoff, sorry for the missing file. It should be in there now, if you haven't already found it!

    Monday, May 25, 2015 8:01 PM
  • User71792 posted

    Dan, Cheers.

    In the meantime, I had implemented my own 'old fashioned' (code style) treeview lookalike solution.

    I investigated your project and rebuilt the solution file myself to get it running.

    Geoff

    Monday, May 25, 2015 10:29 PM
  • User40038 posted

    @GeoffSorensen.AU I have myself implemented a different version of the TreeView in a client project. Many of those changes will, at some point (when I get some time) make their way back into the open source TreeView, including major performance improvements and more powerful features. If your tree views need to contain a lot of data, I would actually not recommend using my open source project as it is. It was really just a proof of concept spike in its current form. The new version I'm using in a production app is actually based on ListView, so it takes advantage of virtualization (view re-use) and is very fast! I'm not sure I want the final TreeView to actually be based on ListView, but that's an implementation detail for another day.

    Monday, May 25, 2015 11:00 PM
  • User71792 posted

    @DanVanderboom, Interesting,

    Mine is also listview based. Not much code either...

    Its quite fast and relies on structured and ordered input data to add list items when expanded.

    The source data was already setup like that because it is synced to the device from a larger DB.

    Tuesday, May 26, 2015 4:07 AM
  • User140043 posted

    @GeoffSorensen.AU, @DanVanderboom, guys, can you share any code which describes how to render treeview [based on listview] faster, any help appreciated.

    Sunday, July 19, 2015 10:48 AM
  • User71792 posted

    Hi, Andrei, As I indicated, my code simply manages list item inserts based on a specific input data arrangement. I don't like iterating over several levels of items and adding objects, so I organise the node/item list, top to bottom, in node level/sequence order, by materialising the path to the node (\0001\0002\0003...) in (SQL) DB, then sync that onto device in SQLite. Treeview list is all reference data only, so never changes via UI on device. I track the 'child count' of each list item, this is also returned from the DB, and when an item is expanded, simply find the 'child' items (ones that have path starting with the parent of the expanding node/item) then insert them into the list after the expanding item. I maintain a +/- or blank (no child nodes) character in the list item template (fixed position at the right) to indicate expanded. I haven't bothered with treelines etc since the list appearance is a good native look as it is. I get the indented look by also returning a node level value from the DB table, and then just adjust the left position of textbox in list item template. Hope that is sufficient to help...

    Sunday, July 19, 2015 12:21 PM
  • User140043 posted

    @GeoffSorensen.AU, Thank you for extended reply.

    Monday, July 20, 2015 4:03 PM
  • User143183 posted

    Dan

    Can you please explain the folder structure. the code which is there in git hub is working well. but i am not able to understand the things. so it will be very good if you explain it clearly or atleast post a video on it in you tube.

    Tuesday, August 4, 2015 12:21 PM
  • User140935 posted

    Hello Dan, I just found your Framework for my App. The approach seems pretty nice, considering, that I stucked the last day to make an own generic hierarchical structure with a ListView with in a ListView. The Binding in the second ListView seems to fail. I downloaded your Code, but i can not start it. I can Build it, but every time it is started, it will be closed while loading.

    Tuesday, August 18, 2015 12:50 PM
  • User243976 posted

    @DanVanderboom, Thanks for the such a suggestion but here what I noticed is that tree can only have one parent node and as many child for the parent. MyTree = new Resources { Title = "Parent", Score = 0.5, IsExpanded = true }; MyTree.Children.Add(new Resources { Title = "A", Score = 0.75, IsExpanded = true }); MyTree.Children.Add(new Resources { Title = "B", Score = 0.25, IsExpanded = true }); But I'm not able to bind an ObservableCollection so that I can have many parent and many children corresponding to their parent.

    Also What are the use use of the following code used :

    `NodeCreationFactory = () => new ItemSource { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.Start, BackgroundColor = Color.Red

            };`
    

    `

            HeaderCreationFactory =
                () => new GridTemplateLayout
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    VerticalOptions = LayoutOptions.Start,
                    BackgroundColor = Color.Yellow
    
                };`
    

    Thanks

    Monday, August 22, 2016 11:49 AM
  • User243976 posted

    Hi @DanVanderboom, Thanks for suggestion but here what I noticed is I can only bind a single Parent to the tree. ` MyTree = new Resources { Title = "Parent", Score = 0.5, IsExpanded = true };

            MyTree.Children.Add(new Resources { Title = "A", Score = 0.75, IsExpanded = true });
            MyTree.Children.Add(new Resources { Title = "B", Score = 0.25, IsExpanded = true });
            MyTree.Children.Add(new Resources { Title = "C", Score = 0.75, IsExpanded = true });
    

    `

    But what if I want to bind an ObservableCollection using itemSource ??

    Also I'm not getting what are the use of the below code :

    `NodeCreationFactory = () => new ItemSource { HorizontalOptions = LayoutOptions.FillAndExpand, VerticalOptions = LayoutOptions.Start, BackgroundColor = Color.Red

            };
    
            HeaderCreationFactory =
                () => new GridTemplateLayout
                {
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    VerticalOptions = LayoutOptions.Start,
    
    
                };`
    

    Thanks

    Monday, August 22, 2016 12:37 PM
  • User227972 posted

    is any event that return the selected tree node object to the consumed page or xaml

    Tuesday, October 18, 2016 6:01 AM
  • User363081 posted

    Hi @DanVanderboom, What about the page navigation to another page when user tap on a tree node?

    Wednesday, January 17, 2018 11:03 AM