非連結の FlexDiagram

An unbound FlexDiagram is created programmatically without using data binding. Nodes and edges are manually defined and added to the diagram.

This approach is suitable for:

Static diagrams
Flowcharts
Custom graph structures

Create Unbound FlexDiagram

Add FlexDiagram in XAML.
Create nodes.
Add nodes to the diagram.
Create edges.
Set the layout direction.

Add FlexDiagram in XAML

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

Create Nodes

C#	コードのコピー
var startNode = new Node { Text = "Start Process", Tooltip = "Start Node" }; var processNode = new Node { Text = "Execute", Shape = Shape.RoundedRectangle, Tooltip = "Processing Step" }; var endNode = new Node { Text = "Complete", Tooltip = "End Node" };

コードのコピー

var startNode = new Node
{
    Text = "Start Process",
    Tooltip = "Start Node"
};
var processNode = new Node
{
    Text = "Execute",
    Shape = Shape.RoundedRectangle,
    Tooltip = "Processing Step"
};
var endNode = new Node
{
    Text = "Complete",
    Tooltip = "End Node"
};

Add Nodes to Diagram

C#	コードのコピー
diagram.Nodes.Add(startNode);diagram.Nodes.Add(processNode); diagram.Nodes.Add(endNode);

Create Edges

C#	コードのコピー
diagram.Edges.Add(new Edge { Source = startNode, Target = processNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Start ?EExecute" }); diagram.Edges.Add(new Edge { Source = processNode, Target = endNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Execute ?EEnd" });

コードのコピー

diagram.Edges.Add(new Edge
{
    Source = startNode,
    Target = processNode,
    TargetArrow = ArrowStyle.Normal,
    Tooltip = "Start ?EExecute"
});
diagram.Edges.Add(new Edge
{
    Source = processNode,
    Target = endNode,
    TargetArrow = ArrowStyle.Normal,
    Tooltip = "Execute ?EEnd"
});

Set Layout Direction

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

Unbound FlexDiagram Sample

XAML

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

Code-Behind

C#	コードのコピー
using C1.Chart; using C1.Diagram; using C1.Maui.Diagram; namespace FlexDiagramMaui_Unbound { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { diagram.Direction = DiagramDirection.TopBottom; // Create nodes var startNode = new Node { Text = "Start Process", Tooltip = "Start Node" }; var processNode = new Node { Text = "Execute", Shape = Shape.RoundedRectangle, Tooltip = "Processing Step" }; var endNode = new Node { Text = "Complete", Tooltip = "End Node" }; // Add nodes diagram.Nodes.Add(startNode); diagram.Nodes.Add(processNode); diagram.Nodes.Add(endNode); // Add edges diagram.Edges.Add(new Edge { Source = startNode, Target = processNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Start ?EExecute" }); diagram.Edges.Add(new Edge { Source = processNode, Target = endNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Execute ?EEnd" }); diagram.Invalidate(); } } }

コードのコピー

using C1.Chart;
using C1.Diagram;
using C1.Maui.Diagram;
namespace FlexDiagramMaui_Unbound
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            InitializeDiagram();
        }
        private void InitializeDiagram()
        {
            diagram.Direction = DiagramDirection.TopBottom;
            // Create nodes
            var startNode = new Node
            {
                Text = "Start Process",
                Tooltip = "Start Node"
            };
            var processNode = new Node
            {
                Text = "Execute",
                Shape = Shape.RoundedRectangle,
                Tooltip = "Processing Step"
            };
            var endNode = new Node
            {
                Text = "Complete",
                Tooltip = "End Node"
            };
            // Add nodes
            diagram.Nodes.Add(startNode);
            diagram.Nodes.Add(processNode);
            diagram.Nodes.Add(endNode);
            // Add edges
            diagram.Edges.Add(new Edge
            {
                Source = startNode,
                Target = processNode,
                TargetArrow = ArrowStyle.Normal,
                Tooltip = "Start ?EExecute"
            });
            diagram.Edges.Add(new Edge
            {
                Source = processNode,
                Target = endNode,
                TargetArrow = ArrowStyle.Normal,
                Tooltip = "Execute ?EEnd"
            });
            diagram.Invalidate();
        }
    }
}