MAUI Tree Control - Part 1 -The Power of Hierarchies
Why do we need Hierarchies? Just look around and you see they are everywhere.
In Biology was the establishment of a hierarchical system of categories on the basis of natural relationships among organisms
Taxonomy - the science of classification of living and extinct organisms; In Greek this means the law of arrangement
The structure in writing - i.e. Table of Contents, Hypothesis
Originally before computers, we used hierarchical systems to organize large amounts of documents for paper filing systems.
Computers - Hierarchical File Systems, Network Control Systems, Command Hierarchies, Organizational Charts, Architectures, Internet Routing ORM's, Namespaces used to identify objects by prefixing namespaces, thus easing location, but also ensuring no name collisions; DNS the fundamental TCP/IP protocol that organizes websites and endpoints. All variations of XML, Machine Learning and AI also heavily use Hierarchies.
Libraries, whether using Dewy Decimal Classification(DDC),Universal Decimal Classification(UDC), Library of Congress Classification(LCC), Iconclass (Art), NLM Classification(Medicine), Dickenson Classification(music) in terms of functionality all use Hierarchical systems at their core.
The practice of classifying using Hierarchical systems enables human access to large amounts of material is used across industries and represents a very important and widely accepted means for human interaction. Complex systems require the use of Hierarchy theory to simplify description, improve comprehension, and hide complexity from humans.
Please add your comments as I'm sure I've left out many many examples
This leads me to my current interest which is MAUI .NET development. Since the rise and fall of Silverlight, .NET developers have been yearning for more. On top of this need, the limitation of .NET being a Windows only platform has sidelined some of us to be "Windows only" developers.
Those days are gone! Today we have MAUI which gives us all the blessings of cross platform Xamarin UI, plus a modern .NET 8 framework which is more granular, performant, and is truly a cross platform developers nirvana that .NET was originally meant to be. With MAUI we can even say goodbye to clunky HTML and all its hacks, and say hello to a wonderful OO integrated XAML instead. Any developer that has worked with the original .NET Framework from the last 22 years can see .NET is now positioned well for for the next 20 years.
All this excitement has led me to release my first open source software which I hope developers find useful.
Introducing PowerTree
It started with Luis Beltran at https://dev.to/icebeam7/creating-a-treeview-control-in-net-maui-49mp who created a hierarchical tree control as part of Matt Goldman's community contribution to MAUI in July 2022 https://goforgoldman.com/posts/maui-ui-july/. Currently (as of 1/15/2024) there are no Tree Controls built into MAUI, but you can find some at Telerik, SyncFusion, and UraniumUI. Please leave me a comment if you are aware of others.
Perhaps one reason for the lack of Tree controls is ambiguous requirements. Each system, each developer, and each company often have largely different needs and use cases. If you compare PowerTree with the others, especially UraniumUI, you will see the requirements seem endless. This often leads to companies creating their own custom hierarchical systems instead of attempting to rely on prebuilt ones.
You can find the source code for PowerTree at https://github.com/str37/PowerTree
Details
This is a hierarchical tree control designed specifically for MAUI. It uses .NET 8 and currently runs on Windows and SQL Server only.
Features include:
A data-driven control that utilizes its own dbcontext and creates and manages its own set of tables to support Hierarchies/Folders/Items.
A sort of in-process microservice that can provide separate hierarchies for multiple subsystems in an application.
While Folders share common icons, the items can use unique icons per item
Context menu's are attached to the folders and items, allowing full control
The consumer application creates a ViewModel that implements IPowerTreeViewModel
This consumer ViewModel provides full control over the actions that take place based on context menu and tap gesture selections.
Drag and Drop capabilty allows sorting of Folders and Items
Consuming applications handle their own entities, but share these entityId's with the TreeView control
Included is a sample application PowerTree.Sample that demonstrates a bookmark (Favorites) type of component implementation.
This Tree Control is in need of some improvements, some enhancements, and ultimately a NuGet Package. If anyone is interested in contributing please contact me at hopdev@outlook.com or leave a comment here.
Future enhancements:
Support for MacOS, iOS, and Chromebook (No more Windows Only)
Support for SQLite and/or Oracle
Icons to be integrated into project and modified/enhanced
Light Mode and Dark Mode color support
Creating a NuGet package for general developer consumption
Implementation of a "Node Only" mode, where the consumer, such as a Document Management System would be responsible for listing all the items; for scenarios where large numbers of items exist
Modify Implementation to support XAML syntax for PowerTreeView control and perhaps Folder and Item Templates
Variety of bug fixes and optimization
Build in support for those users who only want to use the UI component of the control and not the full microservice
T-SQL Scripts for EF Migrations or Auto EF Migrations (Currently you must you use the Package Manger Console to deploy tables to the database)
See the sample pictures of the control below:
Implementation Notes
Create your own View and ViewModel
Set your View to register a Hierarchy using a "subsystem" name
Store these Hierarchy names in your app to take advantage of many different hierarchies, each potentially for a different subsystem.
Within your ViewModel, initially implement it using the sample ViewModel in the project.
Integrate your Entities and project by hooking into all the PowerTree events from Tap gestures to Context menu events.
When an Item in the PowerTree is deleted, the consuming application can decide on whether to also delete the entity, or keep entities around. Certainly entities could be stored in multiple places in the hierarchy or only one, depending on your requirements.
When an Item is double tapped, take the action your application desires.
Wire up the methods that link to the context menus within PowerTree based on a specific entity types for each hierarchy; your app will use these entityId's (Links, Documents, Contacts, or other) when creating new Items for the PowerTree. Thus when selection of Items is performed, the PowerTree component will return these EntityId's allowing your app to perform the desired action using that entity.
In your project you need the following modifications
add .UseMauiPowerTreeMicroserviceSQLCore(ConnectionString) to your MauiAppBuilder in MauiProgram.cs. This will register all the components needed for the control including a DB context. The connectionstring you supply may be the same or different database from your primary application.
This component will prefix table names with 'pt' for clarity and collision avoidance.
Use the 'EFMigrations.txt' in the root of the project to help you use the correct commands in "Package Manager Console" to create the tables
Add a reference to the project "PowerTree.Maui" in your project
Create a ViewModel in your application that is linked to your View page.
Model this ViewModel after the "PowerTree.Maui.ViewModel.TreeViewPageViewModel.cs" file. This means your ViewModel will implement the ITreeViewPageViewModel interface
Using the PowerTree.Sample.Views.FavoriteLinks.xaml as an example, call the "PowerTreeInitializer.CreatePowerTreeControl(viewmodel, _subsystem)"
Please share comments here, or if you have issues, submit on GitHub as I plan to actively enhance this project.