Dynamic Connection Point Styling For Connection Creation

Hello!

I'm a junior developer who recently started working on an existing and established system using Flow Diagrams , so apologies in advance if I've missed something obvious.

I've been tasked with altering the look and feel of our implementation of the Flow Diagram. The requirement/idea is to have the style that the connection points are using change dynamically when they are being displayed as targets for a connection creation. We want to display a different "connection target" style for the connection points when a connection is being dragged, and otherwise use our default style for the connection points.

I've built out these separate styles, and have setup a style-selection mechanism, but am unsure of what events/values I could wire into in order to tell the style selector that it needs to change which style is being used.

Here's a stripped down version of what I've set up so far:

<DataTemplate x:Key="DefaultConnectionPointTemplate" DataType="{x:Type ms:DiagramConnectionPoint}">
    <!--Template for Default Style Here-->
</DataTemplate>
<DataTemplate x:Key="ConnectionCreationTargetPointTemplate" DataType="{x:Type ms:DiagramConnectionPoint}">
    <!--Template for Target Style Here-->
</DataTemplate>
    <DataTemplate x:Key="DynamicConnectionPointTemplateSelector" DataType="{x:Type ms:DiagramConnectionPoint}">
    <ContentControl Content="{Binding}">
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
                <Setter Property="ContentTemplate" Value="{StaticResource DefaultConnectionPointTemplate}"/>
                <Style.Triggers>
                    <DataTrigger Binding="{????????????}" Value="??????">
                        <Setter Property="ContentTemplate" Value="{StaticResource ConnectionCreationTargetPointTemplate}"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
</DataTemplate>
<ms:FixedTemplateSelector x:Key="ProcessConnectionPointTemplateSelector" Template="{StaticResource DynamicConnectionPointTemplateSelector}"/>
<ms:DiagramFormatter x:Key="Formatter" ConnectionPointTemplateSelector="{StaticResource ProcessConnectionPointTemplateSelector}"/>

So, since we are using MVVM for the system, I would bind the ?????? sections in the data trigger to some view-model value, but how can I collect information from Flow Diagrams to know if the user is currently dragging a connection? Or, even more ideally, could I perform this task directly in the Xaml with no view-model interaction at all?

Or, am I simply missing some simpler method for achieving the same result?

Thanks so much in advance! -Jack

Hi Jack,

Welcome to our WPF Diagrams product.

I would recommend using the following binding:

<DataTrigger Binding="{Binding IsDragging, RelativeSource={RelativeSource TemplatedParent}}" Value="True">

The connection points are rendered via Thumb controls, and so the Thumb.IsDragging property is the best way to know if the user is dragging a new connection. Here is a more complete example:

<DataTemplate x:Key="DynamicConnectionPointTemplate">
  <Rectangle Name="Rect" Style="{StaticResource ConnectionPointRectangleStyle}" Fill="#FFFF00" />
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding IsDragging, RelativeSource={RelativeSource TemplatedParent}}" Value="True">
      <Setter TargetName="Rect" Property="Fill" Value="HotPink" />
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>

Here you'll see that all I'm doing when the user creates a connection is changing the color of the connection-point. If the difference between your default and connection-create templates is small, I'd recommend simply changing properties with setters like I've done here. If your templates are significantly different, then switching entire templates is fine.

Hope that helps, please let me know if you have further questions.

-Jason Fauchelle

Hey Jason,

These work great, thanks for your help

-Jack