Home

Welcome to Nodify!

Nodify is a WPF node-based editor control featuring a collection of useful components like nodes, connections, and connectors aiming to simplify the process of building node based tools.

Requirements

Install Nodify from Nuget

Install-Package Nodify

Table of contents

• Editor overview
• ItemContainer overview
• Nodes overview
• Connections overview
• Connectors overview

Application examples

• Playground
• State machine
• Calculator

Quick start

Declare the namespace: xmlns:nodify="http://miroiu.github.io/winfx/xaml/nodify"

Use the following XAML:

<nodify:NodifyEditor>
    <nodify:Node Header="My node"
                 nodify:ItemContainer.LocationOverride="100 100" />
    <nodify:Node Header="My other node"
                 nodify:ItemContainer.LocationOverride="200 100" />
    <nodify:GroupingNode Header="Grouping node"
                         Width="300"
                         Height="150"
                         nodify:ItemContainer.LocationOverride="50 50" />
    <nodify:KnotNode nodify:ItemContainer.LocationOverride="400 100" />
</nodify:NodifyEditor>

Merge one of the following dictionaries in your application's resources to change the theme:

Dark theme (default if not specified):

<ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Dark.xaml" />

Light theme:

<ResourceDictionary Source="pack://application:,,,/Nodify;component/Themes/Light.xaml" />

If you see this, then we're good to go:

Common XAML structure for MVVM:

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     Connections="{Binding Connections}"
                     ConnectionCompletedCommand="{Binding ConnectionCompletedCommand}">
    <nodify:NodifyEditor.ItemTemplate>
        <DataTemplate>
            <nodify:Node Header="{Binding Title}"
                         Input="{Binding Input}"
                         Output="{Binding Output}">
                <nodify:Node.InputConnectorTemplate>
                    <DataTemplate>
                        <nodify:NodeInput Header="{Binding Title}"
                                          Anchor="{Binding Anchor, Mode=OneWayToSource}"
                                          IsConnected="{Binding IsConnected}" />
                    </DataTemplate>
                </nodify:Node.InputConnectorTemplate>
                <nodify:Node.OutputConnectorTemplate>
                    <DataTemplate>
                        <nodify:NodeOutput Header="{Binding Title}"
                                           Anchor="{Binding Anchor, Mode=OneWayToSource}"
                                           IsConnected="{Binding IsConnected}" />
                    </DataTemplate>
                </nodify:Node.OutputConnectorTemplate>
            </nodify:Node>
        </DataTemplate>
    </nodify:NodifyEditor.ItemTemplate>
    <nodify:NodifyEditor.ConnectionTemplate>
        <DataTemplate>
            <nodify:Connection Source="{Binding Input.Anchor}"
                               Target="{Binding Output.Anchor}" />
        </DataTemplate>
    </nodify:NodifyEditor.ConnectionTemplate>
    <nodify:NodifyEditor.ItemContainerStyle>
        <Style TargetType="{x:Type nodify:ItemContainer}">
            <Setter Property="Location"
                    Value="{Binding Location}" />
        </Style>
    </nodify:NodifyEditor.ItemContainerStyle>
</nodify:NodifyEditor>