Custom Node Help

[giiyms]

Hello,

I am trying to create a custom node that looks like this:

I basically want 3 rows, a title row, a collapsible row with some code editor, then the node connections row.
Is this possible?

[miroiu]

Hi! It is possible to create any node template. Create a viewmodel and a DataTemplate for it that contains the custom node.

If you want to use the built-in Node control you can add the code editor into the header:

<nodify:Node Header="{Binding}"
             Input="{Binding Input}"
             Output="{Binding Output}">
    <nodify:Node.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition />
                </Grid.RowDefinitions>

                <TextBlock Text="{Binding Title}"
                           Margin="5" />

                <Button Grid.Column="1">Edit</Button>

                <TextBox Grid.Row="1"
                         Grid.ColumnSpan="2"
                         TextWrapping="Wrap"
                         AcceptsReturn="True"
                         Height="50"
                         HorizontalScrollBarVisibility="Disabled"
                         VerticalScrollBarVisibility="Auto" />
            </Grid>
        </DataTemplate>
    </nodify:Node.HeaderTemplate>
</nodify:Node>

And if you want to create it from scratch you can do something like this:

<Grid Background="{DynamicResource Node.BackgroundBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="{Binding Title}"
               Margin="5" />

    <Button Grid.Column="1">Edit</Button>

    <TextBox Grid.Row="1"
             Grid.ColumnSpan="2"
             TextWrapping="Wrap"
             AcceptsReturn="True"
             Height="50"
             HorizontalScrollBarVisibility="Disabled"
             VerticalScrollBarVisibility="Auto" />

    <ItemsControl Grid.Row="2"
                  ItemsSource="{Binding Input}"
                  Focusable="False">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:ConnectorViewModel}">
                <nodify:NodeInput />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"
                            HorizontalAlignment="Left" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

    <ItemsControl Grid.Row="2"
                  Grid.Column="1"
                  ItemsSource="{Binding Output}"
                  Focusable="False">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:ConnectorViewModel}">
                <nodify:NodeOutput />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical"
                            HorizontalAlignment="Right" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

[giiyms]

Thank you for the help. Great package.