フラット/表形式データの 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

Define FlexDiagram in XAML.
Create a DataTable.
Bind the data to FlexDiagram.
Set the layout direction.

Define FlexDiagram in XAML

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

Create a DataTable

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

Bind Data to FlexDiagram

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

Set Layout Direction

C#	コードのコピー
diagram.Direction = DiagramDirection.LeftRight; // Other options: // TopBottom // BottomTop // RightLeft

Flat/Tabular Data FlexDiagram Sample

XAML

XAML	コードのコピー
<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_TabularData.MainPage"> <Grid> <c1:FlexDiagram x:Name="diagram" Direction="LeftRight" ScaleMode="ScaleToFit"/> </Grid> </ContentPage>

コードのコピー

<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_TabularData.MainPage">
    <Grid>
        <c1:FlexDiagram x:Name="diagram"  Direction="LeftRight"  ScaleMode="ScaleToFit"/>
    </Grid>
</ContentPage>

Code-Behind

C#	コードのコピー
using C1.Diagram; using System.Data; using C1.Maui.Diagram; namespace FlexDiagramMaui_TabularData { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Layout direction diagram.Direction = DiagramDirection.LeftRight; // Create tabular data var table = CreateSkillsTable(); // Bind data to diagram diagram.ItemsSource = table; // Define hierarchy levels 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 System.Data;
using C1.Maui.Diagram;
namespace FlexDiagramMaui_TabularData
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            InitializeDiagram();
        }
        private void InitializeDiagram()
        {
            // Layout direction
            diagram.Direction = DiagramDirection.LeftRight;
            // Create tabular data
            var table = CreateSkillsTable();
            // Bind data to diagram
            diagram.ItemsSource = table;
            // Define hierarchy levels
            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;
        }
    }
}