非連結の 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

1. Add FlexDiagram in XAML.

2. Create nodes.

3. Add nodes to the diagram.

4. Create edges.

5. Set the layout direction.

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

C#	コードのコピー
using C1.Chart; using C1.Diagram; using C1.WinUI.Diagram; using Microsoft.UI.Xaml; namespace FlexDiagramWinUI_Unbound { public sealed partial class MainWindow : Window { public MainWindow() { 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.WinUI.Diagram;
using Microsoft.UI.Xaml;

namespace FlexDiagramWinUI_Unbound
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            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();
        }
    }
}