Different connection point styles

Hi,

I want to add text to the connection points on the left and right edges but use the default style for the connection points on top and bottom edges.

I have seen examples for ConnectionStyleSelector.

How do I use the same concept for connection points?

Also, for a given connection point, can the style be changed based on a trigger?

Thanks.

Hello

You can control the look of connection points through the ConnectionPointTemplateSelector property of the DiagramFormatter. A good example of this is in the ConnectionPointValidation.FlowDiagrams sample provided with WPF Diagrams. (See MainWindow.xaml)

Create one or more DataTemplates to define the look of the connection points. Then either use a FixedTemplateSelector or a MatchingTemplateSelector with custom IDataTemplateMatchers to pick the appropriate DataTemplate for each connection point. Within the DataTemplates, you can use triggers to listen to connection point properties and change their look. So you could either create a single template that uses a trigger to change the position of the text, or you could create 3 separate templates and use a cusomt IDataTemplateMatcher to pick one based on the Edge property.

Note that using a template selector only gives you control over the look of the connection points, not their behavior. i.e. the way they appear or disappear based on mouse interactions is controlled by a style deeper in the core of the product. It is still possible to override this though, so if you need to customize the behavior of connection points based on mouse interaction, let me know.

Let me know if you have questions about any of this.

-Jason Fauchelle

Thanks Jason. I am able to make progress now.

Another question. I am using TreeLayoutAlgorithm and want to set the IsReadOnly property to True in ms:DiagramSurfaceElement. However, on doing this, none of the connection points are visible (or enabled). If I set IsReadOnly to False then the connection points become visible. How can I make the connection points visible when IsReadOnly is set to True.

Hello

The best way to do this is to override the core DiagramNodeElement style. The downside to this is it is quite a large bit of code, and needs to be applied by defining a custom node style for each of your different types of nodes (which you probably want to do anyway). The upside is that from this code you can control a lot of the behavior and look of nodes.

I've attached a text file containing most of the code you need. The first few bits are just some simple required resources. The next large chunk is the core diagram node style containing the layout of the various interaction controls and a lot of triggers that define the visibility of each control in various readonly scenarios. Then right at the end is the "entry point" of the core node style which determines when to use a simple light-weight node template, or the heavier full node template which helps improve performance. In the full node template you will see I have commented out one of the triggers which will allow connection points to be visible even in readonly mode.

Copy all this code into a xaml resource dictionary used by your application. Then, if you are not yet applying custom node styles to your node implementations, you'll need to do this now. This is done by setting the NodeStyleSelector property of a DiagramFormatter. Similar to ConnectionStyleSelector which you are already familiar with. The ActivityDiagram sample has examples of applying custom node styles. Now, all you need to do is set the BasedOn property of each custom node Style to point to the DiagramNodeStyleBase resource in the code I provided. (Note that BasedOn is a property on the Style tag itself, don't use a Setter).

Let me know if you have questions about any of this.

-Jason Fauchelle

Hi Daniel,

I started with the code from HierarchicalDiagramDemo (from another thread) that uses a ToggleButton to hide/show certain sections of the tree.

How do I modify DiagramNodeStylBase from the sample you sent in previous post to use ToggleButton? Basically I need to combine the code you send in previous post with the HierarchicalDiagramDemo.

Thanks.

      <Style x:Key="DiagramNodeStyleBase" TargetType="{x:Type ms:DiagramNodeElement}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="NodeTemplate"  Value="{StaticResource DefaultNodeTemplate}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ms:DiagramNodeElement}">
          <Grid Name="Grid" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
              <RotateTransform Angle="{Binding Node.Rotation, RelativeSource={RelativeSource TemplatedParent}}" />
            </Grid.RenderTransform>
            <Path Name="Path" Data="{TemplateBinding Geometry}" Stretch="Fill" Fill="Transparent" />
            <ContentPresenter ContentTemplate="{Binding NodeTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="Geometry" Value="{x:Null}">
              <Setter TargetName="Path" Property="Visibility" Value="Collapsed" />
              <Setter TargetName="Grid" Property="Background" Value="Transparent" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
      </Trigger>
      <Trigger Property="IsSelected" Value="True">
        <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
      </Trigger>
      <Trigger Property="IsKeyboardFocusWithin" Value="True">
        <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
      </Trigger>
      <DataTrigger Binding="{Binding IsToConnectionDragOver, RelativeSource={RelativeSource Self}}" Value="True">
        <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
      </DataTrigger>
      <DataTrigger Binding="{Binding IsFromConnectionDragOver, RelativeSource={RelativeSource Self}}" Value="True">
        <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
      </DataTrigger>
    </Style.Triggers>
  </Style>

Hello

Since you are following the HierarchicalDiagramDemo, this makes things a bit easier. You will notice that a lot of the code is similar between the hierarchical diagram demo styles and the file I sent. You can replace the BaseNodeStyle that you currently have from that demo with the FullDiagramNodeTemplate and DiagramNodeStyleBase from the file. Also, remove the OverridesDefaultStyle setter from the DiagramNodeStyleBase. Then your node styles can be BasedOn the DiagramNodeStyleBase.

Let me know how this goes.

-Jason Fauchelle

Thanks Jason. I am making progress.

HierarchicalDiagramDemo uses the IsChecked property of ToggleButton control to determine whether to make the node visible or not.

How can I introduce a similar property for FullDiagramNodeTemplate ?

Hello

Good to hear you are moving forward. You should still be able to have the IsVisible trigger on the high level node styles - that is, the same style that sets the NodeTemplate property. Let me know if you run into any trouble.

-Jason Fauchelle

Hi Jason,

This worked. Thanks.

Do you have an example of how to set the MouseDownEvent or MouseDoubleClickEvent for DiagramNodeElement?

Below is the code relevant to setting the style for the node. Most of it is what you had provided before

    <DataTemplate x:Key="ConnectionPointThumbTemplate">
        <ms:ConnectionPointThumb ConnectionPoint="{Binding}" />
    </DataTemplate>

    <DataTemplate x:Key="DefaultNodeTemplate">
        <Grid>
            <Rectangle Fill="{Binding color}" StrokeThickness="1" Stroke="Black" IsHitTestVisible="False"/>
            <TextBlock Text="{Binding Data}"  Margin="4" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
        </Grid>
    </DataTemplate>

    <ControlTemplate x:Key="FullDiagramNodeTemplate" TargetType="{x:Type ms:DiagramNodeElement}">
        <Grid>
            <Grid Canvas.Left="{TemplateBinding Left}" Canvas.Top="{TemplateBinding Top}" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <RotateTransform Angle="{Binding Node.Rotation, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid.RenderTransform>
                <ms:MoveThumb Name="Mover" Element="{Binding RelativeSource={RelativeSource TemplatedParent}}" Geometry="{TemplateBinding Geometry}" />
                <ms:Resizer Element="{Binding RelativeSource={RelativeSource TemplatedParent}}" Name="Resizer" />
                <ContentPresenter Name="Presenter" ContentTemplate="{Binding NodeTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
                <ms:RotateThumb Name="Rotater" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="-20,-20,0,0"
                             Element="{Binding RelativeSource={RelativeSource TemplatedParent}}" />
                <ms:ConnectionPointThumb ConnectionPoint="{Binding Content.DefaultConnectionPoint, RelativeSource={RelativeSource TemplatedParent}}"
                                    Width="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}"
                                    Height="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"
                                    IsHitTestVisible="False" Focusable="True" Visibility="Collapsed"
                                    Name="Connector" Style="{StaticResource {x:Static ms:MoveThumb.InvisibleStyleKey}}" />
            </Grid>
            <ItemsControl ItemsSource="{Binding Content.ConnectionPoints, RelativeSource={RelativeSource TemplatedParent}}" 
                      ItemTemplate="{StaticResource ConnectionPointThumbTemplate}"
                      Name="Connectors">
                <ItemsControl.RenderTransform>
                    <TranslateTransform X="{Binding Left, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Negative}}"
                          Y="{Binding Top, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Negative}}" />
                </ItemsControl.RenderTransform>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="Canvas.Left">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource CPX}">
                                    <Binding />
                                    <Binding Path="Formatter.Layout" RelativeSource="{RelativeSource AncestorType={x:Type ms:DiagramSurface}}" />
                                    <Binding Path="Position" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="Canvas.Top">
                            <Setter.Value>
                                <MultiBinding Converter="{StaticResource CPY}">
                                    <Binding />
                                    <Binding Path="Formatter.Layout" RelativeSource="{RelativeSource AncestorType={x:Type ms:DiagramSurface}}" />
                                    <Binding Path="Position" />
                                </MultiBinding>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </Grid>
        <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding Content.DefaultConnectionPoint, RelativeSource={RelativeSource TemplatedParent}}" Value="{x:Null}">
                <Setter TargetName="Connector" Property="Visibility" Value="Collapsed" />
            </DataTrigger>
            <Trigger Property="IsSelected" Value="False">
                <Setter TargetName="Resizer" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="Rotater" Property="Visibility" Value="Collapsed" />
            </Trigger>
            <DataTrigger Binding="{Binding CanRotateNodes, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="False">
                <Setter TargetName="Rotater" Property="Visibility" Value="Collapsed" />
            </DataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Node.IsResizable, RelativeSource={RelativeSource Self}}" Value="False" />
                    <Condition Binding="{Binding ReadOnlyCanSelect, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="False" />
                </MultiDataTrigger.Conditions>
                <Setter TargetName="Resizer" Property="Visibility" Value="Collapsed" />
            </MultiDataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Node.IsResizable, RelativeSource={RelativeSource Self}}" Value="False" />
                    <Condition Binding="{Binding ReadOnlyCanSelect, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="True" />
                </MultiDataTrigger.Conditions>
                <Setter TargetName="Resizer" Property="IsEnabled" Value="False" />
            </MultiDataTrigger>
            <!--DataTrigger Binding="{Binding IsReadOnly, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="True">
        <Setter TargetName="Connector" Property="Visibility" Value="Collapsed" />
        <Setter TargetName="Connectors" Property="Visibility" Value="Collapsed" />
      </DataTrigger-->
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="True" />
                    <Condition Binding="{Binding ReadOnlyCanSelect, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="False" />
                </MultiDataTrigger.Conditions>
                <Setter TargetName="Mover" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="Resizer" Property="Visibility" Value="Collapsed" />
            </MultiDataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="True" />
                    <Condition Binding="{Binding ReadOnlyCanSelect, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" Value="True" />
                </MultiDataTrigger.Conditions>
                <Setter TargetName="Mover" Property="IsEnabled" Value="False" />
                <Setter TargetName="Resizer" Property="IsEnabled" Value="False" />
            </MultiDataTrigger>
            <DataTrigger Binding="{Binding CanModifyConnectivity, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}"
                     Value="False">
                <Setter TargetName="Connector" Property="Visibility" Value="Collapsed" />
                <Setter TargetName="Connectors" Property="Visibility" Value="Collapsed" />
            </DataTrigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding Path=(ms:CursorAction.Current), Converter={StaticResource CursorActionTypeConverter}, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}" 
                       Value="{x:Static ms:CursorActionType.CreateConnection}" />
                    <Condition Binding="{Binding IsReadOnly, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramSurface}}}"
                       Value="False" />
                </MultiDataTrigger.Conditions>
                <Setter TargetName="Mover" Property="IsHitTestVisible" Value="False" />
                <Setter TargetName="Connector" Property="IsHitTestVisible" Value="True" />
                <Setter TargetName="Connector" Property="Visibility" Value="Visible" />
            </MultiDataTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

    <Style x:Key="DiagramNodeStyleBase" TargetType="{x:Type ms:DiagramNodeElement}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <!-- Setter Property="OverridesDefaultStyle" Value="True" / -->
        <Setter Property="NodeTemplate"  Value="{StaticResource DefaultNodeTemplate}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ms:DiagramNodeElement}">
                    <Grid Name="Grid" RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <RotateTransform Angle="{Binding Node.Rotation, RelativeSource={RelativeSource TemplatedParent}}" />
                        </Grid.RenderTransform>
                        <Path Name="Path" Data="{TemplateBinding Geometry}" Stretch="Fill" Fill="Transparent" />
                        <ContentPresenter ContentTemplate="{Binding NodeTemplate, RelativeSource={RelativeSource TemplatedParent}}" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Geometry" Value="{x:Null}">
                            <Setter TargetName="Path" Property="Visibility" Value="Collapsed" />
                            <Setter TargetName="Grid" Property="Background" Value="Transparent" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
            </Trigger>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
            </Trigger>
            <DataTrigger Binding="{Binding IsToConnectionDragOver, RelativeSource={RelativeSource Self}}" Value="True">
                <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding IsFromConnectionDragOver, RelativeSource={RelativeSource Self}}" Value="True">
                <Setter Property="Template" Value="{StaticResource FullDiagramNodeTemplate}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Node.IsVisible, RelativeSource={RelativeSource Self}}" Value="False">
                <Setter Property="Visibility" Value="Collapsed" />
            </DataTrigger>
        </Style.Triggers>
    </Style>

Hello

The way I would recommend to listen to mouse actions on a node is to actually add an event handler to the DiagramSurface to pick up all such events like this:

ds.AddHandler(Control.MouseDoubleClickEvent, new RoutedEventHandler(NodeDoubleClick), true);

(Where ds is the DiagramSurface instance). Then in the NodeDoubleClick handler, call a method we provide on the DiagramSurface to get the node under the mouse point like this:

private void NodeDoubleClick(object sender, RoutedEventArgs args)
{
  DiagramNodeElement node = ds.FindMouseOverNodeElement();
  if (node != null)
  {
    ...
  }
}

The other alternative is to attach events to the MoveThumb of the custom node template. This has slightly better performance, but is more difficult to manage as you would need to add a code-behind file for your xaml resource file, and also traverse the visual tree to get from the MoveThumb to the DiagramNodeElement in the handler.

-Jason Fauchelle

Thank you