A simple treeview control for MAUI.
⚠️WARNING: This project is a PoC and main TreeView implementation is in UraniumUI. This project wont be maintained anymore.
Install TreeView.Maui
from NuGet.
Create your nodes with TreeViewNode
class.
public class MainPageViewModel : BindableObject
{
public ObservableCollection<TreeViewNode> Nodes { get; set; } = new();
public MainPageViewModel()
{
Nodes.Add(new TreeViewNode("A")
{
Children =
{
new TreeViewNode("A.1"),
new TreeViewNode("A.2"),
}
});
Nodes.Add(new TreeViewNode("B")
{
Children =
{
new TreeViewNode("B.1")
{
Children =
{
new TreeViewNode("B.1.a"),
new TreeViewNode("B.1.b"),
new TreeViewNode("B.1.c"),
new TreeViewNode("B.1.d"),
}
},
new TreeViewNode("B.2"),
}
});
Nodes.Add(new TreeViewNode("C"));
Nodes.Add(new TreeViewNode("D"));
}
}
Use TreeView
in XAML page and bind the noes as ItemsSource
<t:TreeView ItemsSource="{Binding Nodes}">
</t:TreeView>
Lazy-load
IEnumerable<TreeViewNode> GetNodes(string dir)
{
var directories = Directory.GetDirectories(dir);
foreach (string d in directories)
{
yield return new TreeViewNode
{
Name = d.Split(Path.DirectorySeparatorChar).LastOrDefault(),
Value = d,
// 👇 You can define func instead of initializing entire tree.
GetChildren = (node) => GetNodes(node.Value.ToString())
};
}
var files = Directory.GetFiles(dir);
foreach (string f in files)
{
var node = new TreeViewNode
{
Name = f.Split(Path.DirectorySeparatorChar).LastOrDefault(),
Value = f,
};
yield return node;
}
}
Using a custom item template
<t:TreeView ItemsSource="{Binding Nodes}">
<t:TreeView.ItemTemplate>
<DataTemplate>
<HorizontalStackLayout>
<Image Source="folder.png"/>
<Label Text="{Binding Name}">
<Image source="check.png" IsVisible="{Binding IsSelected}">
</HorizontalStackLayout>
</DataTemplate>
</t:TreeView.ItemTemplate>
</t:TreeView>
Using a custom class
public class MyNode : TreeViewNode
{
public string Color { get; set; }
// Your custom properties here...
}
public class MyViewModel
{
public List<MyNode> Nodes => new ()
{
new MyNode { /* ... */},
new MyNode { /* ... */},
}
}
<t:TreeView ItemsSource="{Binding Nodes}">
<t:TreeView.ItemTemplate>
<DataTemplate>
<!-- You can bind your custom properties 👇 -->
<Label Text="{Binding Name}" Color="{Binding Color}">
</DataTemplate>
</t:TreeView.ItemTemplate>
</t:TreeView>