How to Build a WinUI TreeGrid Control in Your App

Displaying hierarchical business data is a common challenge in desktop applications. Project plans contain tasks and subtasks, product catalogs contain categories and products, and organizational structures naturally form parent-child relationships.

While traditional data grids excel at presenting tabular information, they struggle to represent hierarchy. Developers are often forced to build custom controls or combine multiple UI elements to create a seamless experience.

A TreeGrid solves this problem by combining a TreeView-style hierarchy with the powerful column-based features of a data grid.

Using ComponentOne FlexGrid for WinUI, developers can quickly build rich TreeGrid experiences with only a few properties and minimal code.

In this tutorial, we'll cover:

• Why TreeGrids are useful in WinUI applications
• How to build a hierarchical TreeGrid with FlexGrid
• How to display relational data using row details
• How to customize the TreeGrid display and behavior

Ready to get started? Download ComponentOne today and start building modern WinUI data experiences.

Why Use a TreeGrid?

Many business applications need to display data that isn't flat.

Consider some common examples:

• Project management systems with tasks and subtasks
• Product category hierarchies
• Organization charts
• File system explorers
• Bills of materials

A standard grid can display records and columns effectively, but it cannot easily visualize parent-child relationships.

A TreeView solves the hierarchy problem but lacks robust column support and data-grid features.

A TreeGrid combines both approaches, giving users:

• Expandable parent-child relationships
• Multiple data columns
• Familiar spreadsheet-style navigation
• A compact and organized presentation of complex data

Rather than creating custom controls, ComponentOne FlexGrid includes built-in TreeGrid functionality that works directly with hierarchical data sources.

Creating a Hierarchical TreeGrid

Getting started with ComponentOne FlexGrid for WinUI is straightforward.

Install the WinUI FlexGrid package: C1.WinUI.Grid

Then, add the FlexGrid namespace:

<Window
    xmlns:c1="using:C1.WinUI.Grid"
    >

Finally, place a FlexGrid control onto your view.

The first sample demonstrates a classic project task hierarchy.

Each task contains a collection of child tasks, represented by a SubTasks property.

Define the Data Model

The ProjectTask model contains a self-referencing collection:

public List<ProjectTask> SubTasks { get; set; } = new();

This property is referenced by the ChildItemsPath setting in FlexGrid.

ChildItemsPath

This property tells FlexGrid where child records are located.

ChildItemsPath="SubTasks"

When FlexGrid encounters child objects in the specified collection, it automatically builds the hierarchy.

Configure FlexGrid

The entire TreeGrid is created with only a few properties:

<PivotItem Header="Hierarchical Data">
    <c1:FlexGrid
        x:Name="hierarchicalGrid"
        AutoGenerateColumns="False"
        ChildItemsPath="SubTasks"
        HeadersVisibility="All"
        TreeColumnIndex="1"
        TreeExpandMode="OnDemand"
        TreeIndent="18">
        <c1:FlexGrid.Columns>
            <c1:GridColumn Binding="WBS" Header="WBS" Width="90" />
            <c1:GridColumn Binding="Name" Header="Task" Width="*" MinWidth="220" />
            <c1:GridColumn Binding="Owner" Header="Owner" Width="150" />
            <c1:GridColumn Binding="Status" Header="Status" Width="130" />
        </c1:FlexGrid.Columns>
    </c1:FlexGrid>
</PivotItem>

Bind the Data

Once the hierarchy is defined in the model, binding the data is straightforward:

hierarchicalGrid.ItemsSource = ProjectTask.GetTasks();

FlexGrid automatically discovers the parent-child relationships and renders them as expandable nodes.

Users can expand and collapse projects, milestones, and subtasks while still viewing additional task information in adjacent columns.

Displaying Relational Data using Row Details

Not all datasets are hierarchical by design.

Many applications store information using relational structures, in which separate entities are connected through keys.

For example:

• Categories and Products
• Customers and Orders
• Departments and Employees

The second sample demonstrates this pattern by connecting Category and Product classes through CategoryId.

Products are linked to their category:

Products = products.FindAll(product => product.CategoryId == 1)

After constructing the relationships, the categories are displayed in the main grid.

relationalGrid.ItemsSource = Category.GetCategories();

Configure FlexGrid

<PivotItem Header="Relational Data">
    <c1:FlexGrid
        x:Name="relationalGrid"
        AutoGenerateColumns="False"
        HeadersVisibility="All">
        <c1:FlexGrid.Columns>
            <c1:GridColumn Binding="CategoryId" Header="Category ID" Width="120" />
            <c1:GridColumn Binding="Name" Header="Category" Width="*" MinWidth="220" />
            <c1:GridColumn Binding="Owner" Header="Owner" Width="160" />
        </c1:FlexGrid.Columns>
        <i:Interaction.Behaviors>
            <c1:FlexGridDetailProvider Height="150">
                <c1:FlexGridDetailProvider.RowDetailTemplate>
                    <DataTemplate>
                        <c1:FlexGrid
                            AutoGenerateColumns="False"
                            HeadersVisibility="Column"
                            ItemsSource="{Binding Products}">
                            <c1:FlexGrid.Columns>
                                <c1:GridColumn Binding="ProductId" Header="Product ID" Width="110" />
                                <c1:GridColumn Binding="Name" Header="Product" Width="*" MinWidth="200" />
                                <c1:GridColumn Binding="Status" Header="Status" Width="130" />
                            </c1:FlexGrid.Columns>
                        </c1:FlexGrid>
                    </DataTemplate>
                </c1:FlexGridDetailProvider.RowDetailTemplate>
            </c1:FlexGridDetailProvider>
        </i:Interaction.Behaviors>
    </c1:FlexGrid>
</PivotItem>

Customize TreeGrid Display and Behavior

The third sample, TreeFeatures, demonstrates how to modify TreeGrid display and behavior. This is useful when evaluating different TreeGrid configurations during development.

The sample exposes three important settings.

TreeExpandMode: Determines how nodes are expanded.

Available options include:

• OnDemand
• Expanded
• Collapsed

TreeExpandMode="OnDemand"

For larger datasets, OnDemand is often the preferred option because child nodes are created only when users expand them.

Changing TreeColumnIndex: Controls which column displays the tree structure and expansion buttons.

TreeColumnIndex="1"

For example, a project management application may place the hierarchy in the Task column, while an inventory application might use a Category column instead.

Changing TreeIndent: Controls the indentation level applied to each child node.

TreeIndent="15"

Increasing indentation can improve readability for deep hierarchies, while reducing indentation helps conserve horizontal space.

Ready to try it out? Download ComponentOne Today!

Conclusion

Hierarchical business data is everywhere, from task management systems to product catalogs and organizational structures. Presenting this information effectively requires more than a traditional data grid.

ComponentOne FlexGrid for WinUI makes it easy to create powerful TreeGrid interfaces by combining hierarchical navigation with rich tabular data presentation.

With just a few properties, such as ChildItemsPath, TreeExpandMode, TreeColumnIndex, and TreeIndent, developers can transform standard grids into intuitive hierarchical views.

Whether you're building project management software, enterprise dashboards, inventory systems, or file explorers, FlexGrid provides a flexible and performant foundation for displaying complex parent-child data within modern WinUI applications.

Check out the sample for yourself!