WPF-Diagram – Leistungsstarke und funktionsreiche Steuerung

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Syncfusion.SfDiagram.Wpf;component/Resources/BasicShapes.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        <DataTemplate x:Key="NodeContentTemplate">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
        </DataTemplate>
    </ResourceDictionary>
</Window.Resources>
<Grid>
    <!--Initializing the SfDiagram control-->
    <syncfusion:SfDiagram x:Name="diagram">
        <syncfusion:SfDiagram.Theme>
            <syncfusion:OfficeTheme/>
        </syncfusion:SfDiagram.Theme>
        <!--Initializing the Nodes collection-->
        <syncfusion:SfDiagram.Nodes>
            <syncfusion:NodeCollection>
                <syncfusion:NodeViewModel ID="Start" OffsetX="300" OffsetY="100" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="Start" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Input" OffsetX="300" OffsetY="180" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Get Input" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Decision" OffsetX="300" OffsetY="280" UnitWidth="100" UnitHeight="80"
                                          Shape="{StaticResource Decision}"
                                          Content="Make Decision" ContentTemplate="{StaticResource NodeContentTemplate}">
                    <syncfusion:NodeViewModel.Ports>
                        <syncfusion:PortCollection>
                            <syncfusion:NodePortViewModel ID="Decision_YesPort" NodeOffsetX="0" NodeOffsetY="0.5" />
                            <syncfusion:NodePortViewModel ID="Decision_NoPort" NodeOffsetX="1" NodeOffsetY="0.5" />
                        </syncfusion:PortCollection>
                    </syncfusion:NodeViewModel.Ports>
                </syncfusion:NodeViewModel>
                <syncfusion:NodeViewModel ID="Output1" OffsetX="210" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 1" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="Output2" OffsetX="390" OffsetY="360" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Process}"
                                          Content="Output 2" ContentTemplate="{StaticResource NodeContentTemplate}"/>
                <syncfusion:NodeViewModel ID="End" OffsetX="300" OffsetY="440" UnitWidth="100" UnitHeight="40"
                                          Shape="{StaticResource Terminator}"
                                          Content="End" ContentTemplate="{StaticResource NodeContentTemplate}"/>
            </syncfusion:NodeCollection>
        </syncfusion:SfDiagram.Nodes>
        <!--Initializing the Connectors collection-->
        <syncfusion:SfDiagram.Connectors>
            <syncfusion:ConnectorCollection>
                <syncfusion:ConnectorViewModel SourceNodeID="Start" TargetNodeID="Input"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Input" TargetNodeID="Decision"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output1" SourcePortID="Decision_YesPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="Yes" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Decision" TargetNodeID="Output2" SourcePortID="Decision_NoPort">
                    <syncfusion:ConnectorViewModel.Annotations>
                        <syncfusion:AnnotationCollection>
                            <syncfusion:AnnotationEditorViewModel Content="No" RotationReference="Page"/>
                        </syncfusion:AnnotationCollection>
                    </syncfusion:ConnectorViewModel.Annotations>
                </syncfusion:ConnectorViewModel>
                <syncfusion:ConnectorViewModel SourceNodeID="Output1" TargetNodeID="End"/>
                <syncfusion:ConnectorViewModel SourceNodeID="Output2" TargetNodeID="End"/>
            </syncfusion:ConnectorCollection>
        </syncfusion:SfDiagram.Connectors>
    </syncfusion:SfDiagram>
</Grid>

using Syncfusion.UI.Xaml.Diagram;
using Syncfusion.UI.Xaml.Diagram.Theming;
using System.Windows;
namespace SyncfusionWpfApp1
{
    public partial class MainWindow : Window
    {
        SfDiagram diagram;
        public MainWindow()
        {
            InitializeComponent();
            // Create a diagram instance
            diagram = new SfDiagram();
            // Initializing the Nodes collection
            diagram.Nodes = new NodeCollection();
            CreateNode("Start", 300, 100, 40, "Terminator", "Start");
            CreateNode("Input", 300, 180, 40, "Process", "Get Input");
            CreateNode("Decision", 300, 280, 80, "Decision", "Make Decision");
            CreateNode("Output1", 210, 360, 40, "Process", "Output 1");
            CreateNode("Output2", 390, 360, 40, "Process", "Output 2");
            CreateNode("End", 300, 440, 40, "Terminator", "End");

            // Initializing the Connectors collection
            diagram.Connectors = new ConnectorCollection();
            CreateConnector("Start", "Input");
            CreateConnector("Input", "Decision");
            CreateConnector("Decision", "Output1", "Decision_YesPort", "Yes");
            CreateConnector("Decision", "Output2", "Decision_NoPort", "No");
            CreateConnector("Output1", "End");
            CreateConnector("Output2", "End");

            diagram.Theme = new OfficeTheme();

            // Add the Diagram control to the Window
            this.Content = diagram;
        }

        private void CreateNode(string id, double offsetX, double offsetY, double height, string shape, string content)
        {
            NodeViewModel node = new NodeViewModel()
            {
                ID = id,
                OffsetX = offsetX,
                OffsetY = offsetY,
                UnitWidth = 100,
                UnitHeight = height,
                Shape = App.Current.MainWindow.Resources[shape] as string,
            };
            node.Annotations = new AnnotationCollection()
            {
                new AnnotationEditorViewModel() { Content = content }
            };

            if (shape == "Decision")
            {
                node.Ports = new PortCollection()
                {
                    new NodePortViewModel() { ID="Decision_YesPort", NodeOffsetX=0, NodeOffsetY=0.5 },
                    new NodePortViewModel() { ID="Decision_NoPort", NodeOffsetX=1, NodeOffsetY=0.5 },
                };
            }
            
            (diagram.Nodes as NodeCollection).Add(node);
        }

        private void CreateConnector(string sourceId, string targetId, string sourcePortID = default(string), string content = default(string))
        {
            ConnectorViewModel connector = new ConnectorViewModel()
            {
                SourceNodeID = sourceId,
                TargetNodeID = targetId,
            };

            if (!string.IsNullOrEmpty(sourcePortID))
            {
                connector.SourcePortID = sourcePortID;
            }
            
            if (!string.IsNullOrEmpty(content))
            {
                connector.Annotations = new AnnotationCollection()
                {
                    new AnnotationEditorViewModel() { Content = content, RotationReference = RotationReference.Page }
                };
            }

            (diagram.Connectors as ConnectorCollection).Add(connector);
        }
    }
}