Add ConnectionPoints to ChildViewModel

Hi,

is it possible to add CustomConnectionPoints to a ChildViewModel inside a CustomNodeElement.

the parent viewmodel represents my device, let's call it DeviceViewModel (the CustomNodeElement). the DeviceViewModel has an ObservableCollection with ValueViewModels and what i want to do now is: adding a CustomConnectionPoint foreach ValueViewModel

some code:

the DeviceViewModel;

internal class BuesMapDeviceViewModel : DiagramNode
{
    ObservableCollection<ValueViewModel> Values { get; set; }
}

the DeviceViewModel Style:

 <Style x:Key="DeviceStyle" TargetType="ms:DiagramNodeElement">
    <Setter Property="ToolTip" Value="{Binding Name}"/>
    <Setter Property="NodeTemplate">
        <Setter.Value>
            <DataTemplate DataType="local:DeviceViewModel">
                 <ItemsControl ItemsSource="{Binding Values}"/>
                 <!-- foreach Value i need a ConnectionPoint -->
           </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

In the Value Style i wanted to add the ConnectionPoint in a ContentControl:

ValueStyle.xaml

<DataTemplate DataType="{x:Type local:ValueViewModel}">
    <Grid Height="30" IsHitTestVisible="True">
         <ContentControl ContentTemplate="{StaticResource CustomConnectorTemplate}"
                            Content="{Binding Path=Connector}"/>
    </Grid>
</DataTemplate>

ValueViewModel.cs

internal class ValueViewModel
{

    public ValueViewModel()
    {
        //declare connector here
    }

    public CustomConnectionPoint Connector
    {
        get { return _connector; }
        set { _connector = value; }
    }
}

But in that way it doesn't work. Can i achieve this in a different way? Can you help me with this issue, would be very nice, thanks.

Patrick

Hi Patrick,

This should be possible to implement in some way, but will be a bit tricky as this scenario is not specifically supported.

The main thing to note is that for connection points to function correctly, they need to be hosted on either a node or a connection. This is because some of the logic needs to access the model (node or connection) that a connection point is mounted on which would not be possible through an arbitrary custom view model.

So the first step would be to implement a new type of custom node for your ValueViewModel - or if possible, just change your ValueViewModel to extend DiagramNode.

To help get an idea of how to do this, I recommend looking through the NodeGrouping sample that comes with the WPF Diagrams product. This is the closest sample to what you want, but is a lot more complex as it has UI and logic that allows the user to relocate the child nodes, whereas your child models will be permanently part of each device node.

A couple of things to keep in mind is that each child node will probably need to be added to the root DiagramModel object rather than a collection in the device models. This is because the grouping feature works by parenting the nodes, rather than building up a hierarchy (Something that we could improve in a future version). The device model could of course keep a collection of the child models if you need to access them in some of your logic, but this collection would not be what presents the child models to the view. i.e. your device view will not display the child elements in an ItemsControl. Instead, since the children are in fact nodes, they will need to be positioned in the usual way by setting their Bounds property.

Your child models will need to override the Parent property to return the device model node that they're attached to. And since your child model nodes wont be interactive, when you create a node style for them, you'll want to set the Template property instead of the NodeTemplate Property to override all the built-in UI controls and build whatever you want the child nodes to look like in that template. This template is also where you'll present the connection points on the child nodes.

I hope that helps to at least get you started. Try get as far as you can with this, and then if you get stuck, let me know and I'll help you out. If you are able to send me a project of how far you get and perhaps an image of what you want, I could help implement some of this. I might event be able to find places in WPF Diagrams that could be improved to make the implementation easier.

-Jason Fauchelle

Hi Jason,

thanks for your great support. I will have a look at the NodeGrouping sample and try to implement my project in that way.

Thanks

-Patrick

Great, let me know how it goes, or if the node grouping approach is too extreme for what you need.

A second alternative would be to host the connection-points on the device nodes. Then the device nodes could still present a list of your current child view models and display them in an ItemsSource. The challenge here though would be to write logic that sets the positions of the device-node connection-points to align themselves with the rendered child views. The difficulty of this would depend on if the child views will have different or dynamic sizes.

I can help out with any questions you have about which ever approach you take.

-Jason Fauchelle