階層データの FlexDiagram

A hierarchical data FlexDiagram automatically generates diagrams from parent-child relationships in a data source.

Each data item can contain child items that define hierarchical relationships within the diagram.

This approach is suitable for:

Organization charts
Category trees
Nested data visualization

Create Hierarchical Data FlexDiagram

Add FlexDiagram in XAML.
Define the data model.
Create the data source.
Bind the data to FlexDiagram.

Add FlexDiagram in XAML

XAML	コードのコピー
<c1:FlexDiagram x:Name="diagram" Direction="LeftRight" ScaleMode="ScaleToFit"/>

Define Data Model

C#	コードのコピー
public class SalesDataItem { public string Type { get; set; } public double Sales { get; set; } public SalesDataItem[] Items { get; set; } }

Create Data Source

C#	コードのコピー
var data = DataService.CreateHierarchicalData();

Bind Data to FlexDiagram

C#	コードのコピー
diagram.Direction = DiagramDirection.LeftRight; diagram.ItemsSource = data; diagram.Binding = "Type"; diagram.ChildItemsPath = "Items";

Hierarchical Data FlexDiagram Sample

XAML

XAML	コードのコピー
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:c1="clr-namespace:C1.Maui.Diagram;assembly=C1.Maui.Diagram" x:Class="FlexDiagramMaui_Hierarchical.MainPage"> <Grid> <c1:FlexDiagram x:Name="diagram" Direction="LeftRight" ScaleMode="ScaleToFit"/> </Grid> </ContentPage>

コードのコピー

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  xmlns:c1="clr-namespace:C1.Maui.Diagram;assembly=C1.Maui.Diagram"  x:Class="FlexDiagramMaui_Hierarchical.MainPage">
    <Grid>
        <c1:FlexDiagram x:Name="diagram"  Direction="LeftRight"  ScaleMode="ScaleToFit"/>
    </Grid>
</ContentPage>

Code-Behind

C#	コードのコピー
using C1.Diagram; using C1.Maui.Diagram; namespace FlexDiagramMaui_Hierarchical { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Layout direction diagram.Direction = DiagramDirection.LeftRight; // Create hierarchical data var data = DataService.CreateHierarchicalData(); // Bind data to diagram diagram.ItemsSource = data; diagram.Binding = "Type"; diagram.ChildItemsPath = "Items"; } } public class SalesDataItem { public string Type { get; set; } public double Sales { get; set; } public SalesDataItem[] Items { get; set; } } static class DataService { static Random rnd = new Random(); static int rand() => rnd.Next(10, 100); public static SalesDataItem[] CreateHierarchicalData() { return new SalesDataItem[] { new SalesDataItem { Type = "Electronics", Items = new[] { new SalesDataItem { Type = "Camera", Items = new[] { new SalesDataItem { Type = "Digital", Sales = rand() }, new SalesDataItem { Type = "Film", Sales = rand() } } }, new SalesDataItem { Type = "Headphones", Items = new[] { new SalesDataItem { Type = "Earbud", Sales = rand() }, new SalesDataItem { Type = "Over-ear", Sales = rand() }, new SalesDataItem { Type = "On-ear", Sales = rand() } } } } } }; } } }

コードのコピー

using C1.Diagram;
using C1.Maui.Diagram;
namespace FlexDiagramMaui_Hierarchical
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            InitializeDiagram();
        }
        private void InitializeDiagram()
        {
            // Layout direction
            diagram.Direction = DiagramDirection.LeftRight;
            // Create hierarchical data
            var data = DataService.CreateHierarchicalData();
            // Bind data to diagram
            diagram.ItemsSource = data;
            diagram.Binding = "Type";
            diagram.ChildItemsPath = "Items";
        }
    }
    public class SalesDataItem
    {
        public string Type { get; set; }
        public double Sales { get; set; }
        public SalesDataItem[] Items { get; set; }
    }
    static class DataService
    {
        static Random rnd = new Random();
        static int rand() => rnd.Next(10, 100);
        public static SalesDataItem[] CreateHierarchicalData()
        {
            return new SalesDataItem[]
            {
                new SalesDataItem
                {
                    Type = "Electronics",
                    Items = new[]
                    {
                        new SalesDataItem
                        {
                            Type = "Camera",
                            Items = new[]
                            {
                                new SalesDataItem { Type = "Digital", Sales = rand() },
                                new SalesDataItem { Type = "Film", Sales = rand() }
                            }
                        },
                        new SalesDataItem
                        {
                            Type = "Headphones",
                            Items = new[]
                            {
                                new SalesDataItem { Type = "Earbud", Sales = rand() },
                                new SalesDataItem { Type = "Over-ear", Sales = rand() },
                                new SalesDataItem { Type = "On-ear", Sales = rand() }
                            }
                        }
                    }
                }
            };
        }
    }
}