階層データの 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
Tree structures
Nested data visualization

Create Hierarchical Data FlexDiagram

1. Define the data model.

2. Create the data source.

3. Bind the data to FlexDiagram.

4. Set the layout direction.

Define Data Model

C#	コードのコピー
public class DataItem { public string Name { get; set; } public DataItem[] Items { get; set; } }

Create Data Source

C#	コードのコピー
var data = new DataItem[] { new DataItem { Name = "Root", Items = new[] { new DataItem { Name = "Child 1" }, new DataItem { Name = "Child 2" } } } };

Bind Data to FlexDiagram

C#	コードのコピー
diagram.ItemsSource = data; diagram.Binding = "Name"; diagram.ChildItemsPath = "Items";

Set Layout Direction

C#	コードのコピー
diagram.Direction = DiagramDirection.LeftRight;

Hierarchical Data FlexDiagram Sample

C#	コードのコピー
using C1.Diagram; using Microsoft.UI.Xaml; namespace FlexDiagramWinUI_Hierarchical { public sealed partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { diagram.Direction = DiagramDirection.LeftRight; var data = DataService.CreateHierarchicalData(); 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 = "Computers & Tablets", Items = new[] { new SalesDataItem { Type = "Desktops", Items = new[] { new SalesDataItem { Type = "All-in-ones", Sales = rand() }, new SalesDataItem { Type = "Minis", Sales = rand() } } }, } } }; } } }

コードのコピー

using C1.Diagram;
using Microsoft.UI.Xaml;
namespace FlexDiagramWinUI_Hierarchical
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeDiagram();
        }
        private void InitializeDiagram()
        {
            diagram.Direction = DiagramDirection.LeftRight;
            var data = DataService.CreateHierarchicalData();
            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 = "Computers & Tablets",
                    Items = new[]
                    {
                        new SalesDataItem
                        {
                            Type = "Desktops",
                            Items = new[]
                            {
                                new SalesDataItem { Type = "All-in-ones", Sales = rand() },
                                new SalesDataItem { Type = "Minis", Sales = rand() }
                            }
                        },
                    }
                }
            };
        }
    }
}