Create Nodes with different data type connectors

[KeeeeepOn]

Suppose I want to create a Node with 2 input connectors.
The first input should have a title and a textbox. Incoming values should be of type "string", which would then be shown in the textbox.
The second input should have a title and a combobox. Incoming values should be of type "int", which would then be selected in the combobox.

How can I achieve this?

[miroiu]

Hi, there are multiple ways of doing this, depending on how you structure your view models.

Here's an example using data templating:

• create a base view model for the input and extend it for each input type

public class BaseInputViewModel
{
    public string Title { get; set; }
}

public class IntegerInputViewModel : BaseInputViewModel
{
    public int Value { get; set; }
    public ObservableCollection<int> AllowedValues { get; set; } = [];
}

public class StringInputViewModel : BaseInputViewModel
{
    public string Value { get; set; }
}

• create the node view model

public class NodeViewModel
{
    public ObservableCollection<BaseInputViewModel> Input { get; } = [];
    public string Title { get; set; }
}

• create the data templates

<DataTemplate DataType="{x:Type local:NodeViewModel}">
    <nodify:Node Input="{Binding Input}"
                 InputConnectorTemplate="{x:Null}"
                 Header="{Binding Title}" />
</DataTemplate>

<DataTemplate DataType="{x:Type local:StringInputViewModel}">
    <nodify:NodeInput IsConnected="True"
                      Header="{Binding}">
        <nodify:NodeInput.HeaderTemplate>
            <DataTemplate DataType="{x:Type local:StringInputViewModel}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Title}" />
                    <TextBox Text="{Binding Value}" />
                </StackPanel>
            </DataTemplate>
        </nodify:NodeInput.HeaderTemplate>
    </nodify:NodeInput>
</DataTemplate>

<DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
    <nodify:NodeInput IsConnected="True"
                      Header="{Binding}">
        <nodify:NodeInput.HeaderTemplate>
            <DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding Title}" />
                    <ComboBox SelectedValue="{Binding Value}"
                              ItemsSource="{Binding AllowedValues}" />
                </StackPanel>
            </DataTemplate>
        </nodify:NodeInput.HeaderTemplate>
    </nodify:NodeInput>
</DataTemplate>

Make sure the data templates can be found by WPF when constructing the nodes

[KeeeeepOn]

That's exactly what I needed, tyvm!

[KeeeeepOn]

Hey,
I'm still missing something. I put the data templates in nodify:NodifyEditor.Resources in EditorView.xaml, but the Inputs only show the title:

EditorView.xaml:

<nodify:NodifyEditor ItemsSource="{Binding Nodes}"
                     xmlns:nodify="https://miroiu.github.io/nodify"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:local="clr-namespace:Test1"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:test1="clr-namespace:Test1">
    <nodify:NodifyEditor.DataContext>
        <test1:EditorViewModel />
    </nodify:NodifyEditor.DataContext>
    <nodify:NodifyEditor.Resources>
        <DataTemplate DataType="{x:Type local:StringInputViewModel}">
            <nodify:NodeInput IsConnected="True">
                <nodify:NodeInput.HeaderTemplate>
                    <DataTemplate DataType="{x:Type local:StringInputViewModel}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}" />
                            <TextBox Text="{Binding Value}" />
                        </StackPanel>
                    </DataTemplate>
                </nodify:NodeInput.HeaderTemplate>
            </nodify:NodeInput>
        </DataTemplate>
                
        <DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
            <nodify:NodeInput IsConnected="True">
                <nodify:NodeInput.HeaderTemplate>
                    <DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}" />
                            <ComboBox SelectedValue="{Binding Value}"
                                      Width="100"
                                      ItemsSource="{Binding AllowedValues}" />
                        </StackPanel>
                    </DataTemplate>
                </nodify:NodeInput.HeaderTemplate>
            </nodify:NodeInput>
        </DataTemplate>
    </nodify:NodifyEditor.Resources>
</nodify:NodifyEditor>

NodeViewModel.cs:

using System.Collections.ObjectModel;

namespace Test1
{
    public class NodeViewModel
    {
        public string Title { get; set; }

        public ObservableCollection<BaseInputViewModel> Input { get; set; } = new ObservableCollection<BaseInputViewModel>();

        public NodeViewModel()
        {            
            var stringInputViewModel = new StringInputViewModel
            {
                Title = "Test1"
            };

            var integerInputViewModel = new IntegerInputViewModel
            {
                Title = "Test2",
                Value = 1,
                AllowedValues = [1,2]
            };

            Input.Add(stringInputViewModel);
            Input.Add(integerInputViewModel);
        }
    }
}

My questions are

• Why is the BaseInputViewModel being used instead of Integer-/StringInputViewModel?
• How is it possible that the BaseInputViewModel is displayed without having a corresponding data template?

[miroiu]

Sorry, I wrote the previous code from the top of my head. I did not test it. Below is a working example.

To answer your questions:

Why is the BaseInputViewModel being used instead of Integer-/StringInputViewModel?

This is standard WPF data templating behavior. It will apply the template for the most specific class.

How is it possible that the BaseInputViewModel is displayed without having a corresponding data template?

The BaseInputViewModel is not displayed if there is no data template for it. You can make the class abstract if you don't want instances of it.

Important

• make sure the Node has InputConnectorTemplate="{x:Null}" to allow it to use the custom connector templates
• make sure to bind the Header of the NodeInput to the current viewmodel to be able to access its properties inside the HeaderTemplate

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:nodify="https://miroiu.github.io/nodify"
        xmlns:local="clr-namespace:Test1"
        ThemeMode="Dark"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="450"
        Width="800">
    <nodify:NodifyEditor ItemsSource="{Binding Nodes}">

        <nodify:NodifyEditor.DataContext>
            <local:EditorViewModel />
        </nodify:NodifyEditor.DataContext>

        <nodify:NodifyEditor.Resources>
            <DataTemplate DataType="{x:Type local:NodeViewModel}">
                <nodify:Node Input="{Binding Input}"
                             InputConnectorTemplate="{x:Null}"
                             Header="{Binding Title}" />
            </DataTemplate>

            <DataTemplate DataType="{x:Type local:StringInputViewModel}">
                <nodify:NodeInput IsConnected="True"
                                  Header="{Binding}">
                    <nodify:NodeInput.HeaderTemplate>
                        <DataTemplate DataType="{x:Type local:StringInputViewModel}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Title}"
                                           VerticalAlignment="Center" />
                                <TextBox Text="{Binding Value}"
                                         Width="100"
                                         Margin="5,0,0,0" />
                            </StackPanel>
                        </DataTemplate>
                    </nodify:NodeInput.HeaderTemplate>
                </nodify:NodeInput>
            </DataTemplate>

            <DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
                <nodify:NodeInput IsConnected="True"
                                  Header="{Binding}">
                    <nodify:NodeInput.HeaderTemplate>
                        <DataTemplate DataType="{x:Type local:IntegerInputViewModel}">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Title}"
                                           VerticalAlignment="Center" />
                                <ComboBox ItemsSource="{Binding AllowedValues}"
                                          SelectedValue="{Binding Value}"
                                          Width="100"
                                          Margin="5,0,0,0" />
                            </StackPanel>
                        </DataTemplate>
                    </nodify:NodeInput.HeaderTemplate>
                </nodify:NodeInput>
            </DataTemplate>
        </nodify:NodifyEditor.Resources>
    </nodify:NodifyEditor>
</Window>

using System.Collections.ObjectModel;

namespace Test1
{
    public class NodeViewModel
    {
        public string Title { get; set; }

        public ObservableCollection<BaseInputViewModel> Input { get; set; } = [];

        public NodeViewModel()
        {
            var stringInputViewModel = new StringInputViewModel
            {
                Title = "Test1"
            };

            var integerInputViewModel = new IntegerInputViewModel
            {
                Title = "Test2",
                Value = 1,
                AllowedValues = [1, 2]
            };

            Input.Add(stringInputViewModel);
            Input.Add(integerInputViewModel);
        }
    }

    public class EditorViewModel
    {
        public ObservableCollection<NodeViewModel> Nodes { get; } = [];

        public EditorViewModel()
        {
            Nodes.Add(new NodeViewModel { Title = "Node1" });
            Nodes.Add(new NodeViewModel { Title = "Node2" });
        }
    }

    public class BaseInputViewModel
    {
        public string Title { get; set; }
    }

    public class IntegerInputViewModel : BaseInputViewModel
    {
        public int Value { get; set; }
        public ObservableCollection<int> AllowedValues { get; set; } = [];
    }

    public class StringInputViewModel : BaseInputViewModel
    {
        public string Value { get; set; }
    }
}

[miroiu]

I updated the initial answer.

[KeeeeepOn]

Hi,
thank you for your help, it's now working as expected.

Until next time ;)