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

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

2. Add Nodes to Diagram

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

3. Create Edges

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

コードのコピー

diagram.Edges.Add(new Edge()
{
  Source = startNode,
  Target = processNode,
  TargetArrow = ArrowStyle.Normal
});
diagram.Edges.Add(new Edge()
{
  Source = processNode,
  Target = endNode,
  TargetArrow = ArrowStyle.Normal
});

4. Set Layout Direction

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

Unbound FlexDiagram Sample

XAML

XAML	コードのコピー
<Window x:Class="FlexDiagram_WPF.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Unbound FlexDiagram" Height="450" Width="800"> <Grid> <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit"/> </Grid> </Window>

コードのコピー

<Window x:Class="FlexDiagram_WPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Unbound FlexDiagram" Height="450" Width="800">
  <Grid>
    <c1:FlexDiagram x:Name="diagram" ScaleMode="ScaleToFit"/>
  </Grid>
</Window>

Code Behind

C#	コードのコピー
using C1.Diagram; using C1.WPF.Diagram; using System.Windows; namespace FlexDiagram_WPF { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); Loaded += (s, e) => InitializeDiagram(); } private void InitializeDiagram() { // Layout direction 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); // Create edges diagram.Edges.Add(new Edge() { Source = startNode, Target = processNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Start → Execute" }); diagram.Edges.Add(new Edge() { Source = processNode, Target = endNode, TargetArrow = ArrowStyle.Normal, Tooltip = "Execute → End" }); // Optional refresh diagram.Invalidate(); } } }

コードのコピー

using C1.Diagram;
using C1.WPF.Diagram;
using System.Windows;
namespace FlexDiagram_WPF
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      Loaded += (s, e) => InitializeDiagram();
    }
    private void InitializeDiagram()
    {
      // Layout direction
      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);
      // Create edges
      diagram.Edges.Add(new Edge()
      {
        Source = startNode,
        Target = processNode,
        TargetArrow = ArrowStyle.Normal,
        Tooltip = "Start → Execute"
      });
      diagram.Edges.Add(new Edge()
      {
        Source = processNode,
        Target = endNode,
        TargetArrow = ArrowStyle.Normal,
        Tooltip = "Execute → End"
      });
      // Optional refresh
      diagram.Invalidate();
    }
  }
}