フラット/表形式データの FlexDiagram

A flat or tabular data FlexDiagram generates hierarchical diagrams from structured datasets such as tables or database results.

Each column specified in the Binding property represents a hierarchy level in the generated diagram.

This approach is suitable for:

Database-driven structures
Spreadsheet-based data
Multi-level categorization
Structured business data

Create Flat/Tabular Data FlexDiagram

1. Create a DataTable.

2. Add data.

3. Bind the data to FlexDiagram.

4. Set the layout direction.

Create a DataTable

C#	コードのコピー
DataTable table = new DataTable(); table.Columns.Add("Field"); table.Columns.Add("Domain"); table.Columns.Add("Category");

Add Data

C#	コードのコピー
table.Rows.Add("Technology", "Frontend", "React"); table.Rows.Add("Technology", "Backend", "Python");

Bind Data to FlexDiagram

C#	コードのコピー
diagram.ItemsSource = table; diagram.Binding = "Field,Domain,Category";

Set Layout Direction

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

Flat/Tabular Data FlexDiagram Sample

C#	コードのコピー
using C1.Diagram; using C1.WinUI.Diagram; using Microsoft.UI.Xaml; using System.Data; namespace FlexDiagramWinUI_TabularData { public sealed partial class MainWindow : Window { public MainWindow() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Layout direction diagram.Direction = DiagramDirection.LeftRight; // Create tabular data var table = CreateSkillsTable(); // Bind data to diagram diagram.ItemsSource = table; diagram.Binding = "Field,Domain,Specialty,Skill"; } private DataTable CreateSkillsTable() { DataTable table = new DataTable(); table.Columns.Add("Field"); table.Columns.Add("Domain"); table.Columns.Add("Specialty"); table.Columns.Add("Skill"); table.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development"); table.Rows.Add("Technology", "Data Science", "AI", "Machine Learning"); table.Rows.Add("Technology", "Database", "Query", "SQL Optimization"); table.Rows.Add("Technology", "Backend", "Languages", "Python Programming"); table.Rows.Add("Technology", "Infrastructure", "AWS", "Cloud Architecture"); return table; } } }

コードのコピー

using C1.Diagram;
using C1.WinUI.Diagram;
using Microsoft.UI.Xaml;
using System.Data;
namespace FlexDiagramWinUI_TabularData
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            InitializeDiagram();
        }
        private void InitializeDiagram()
        {
            // Layout direction
            diagram.Direction = DiagramDirection.LeftRight;
            // Create tabular data
            var table = CreateSkillsTable();
            // Bind data to diagram
            diagram.ItemsSource = table;
            diagram.Binding = "Field,Domain,Specialty,Skill";
        }
        private DataTable CreateSkillsTable()
        {
            DataTable table = new DataTable();
            table.Columns.Add("Field");
            table.Columns.Add("Domain");
            table.Columns.Add("Specialty");
            table.Columns.Add("Skill");
            table.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development");
            table.Rows.Add("Technology", "Data Science", "AI", "Machine Learning");
            table.Rows.Add("Technology", "Database", "Query", "SQL Optimization");
            table.Rows.Add("Technology", "Backend", "Languages", "Python Programming");
            table.Rows.Add("Technology", "Infrastructure", "AWS", "Cloud Architecture");
            return table;
        }
    }
}