Label for ConnectionPoint

Hi,

I can create many ConnectionPoints at one side using IPositionCalculatorSelector.

How to make signatures to each ConnectionPoint?

I want to get the result shown in  the attached file.

Regards,

ShuraZ

Sorry for misprint, question is:

How to make label for each ConnectionPoint?

Hello

I would do this by styling the connection points. You should start by making a simple connection point style that doesn't include the label, just to understand how to let the diagram use your style instead of the default one. To provide your own connection point style, you can take a look at this blog post and this forum thread. The second to last entry in the forum thread has an attached sample demonstrating how to make a node style specifically for include connection point styles. Once you get your simple connection point style showing, then focus on putting the labels in. Let me know if you get stuck at that stage.

Cheers
 - Jason

Hello, Jason.

I have visited links. The second link it is especially useful. May be include it in a set of samples?

Now i can change color and size of connection points.

But how to place labels inside node?

ShuraZ

Hello ShuraZ

Good to hear you have it working, now the next step is to include a TextBlock into your connection point style. You can bind the Text of the text block to what ever you want the label to be which I assume your putting into the IDiagramConnectionPoint.Data property. I don't know how youv'e styled your new connection points, but here is how you would get the size of the label working based on the standard style:

Put setters on your style to set the width and the height to be large enough to fit any label. You could start with something like 100 by 100.
Set the width and height of the rectangle to be the width an height that you want the connection point to be. You'll also need to set the Vertical and Horizontal alignment of the Rectangle to be Top and Left respectively so that the connection point appears in the correct place.
Now put a StackPanel around the rectangle. StackPanel works better than a Grid in this situation because a Grid will mess with the mouse events due to our 100 by 100 size trick.
Put a TextBlock in the StackPanel and set the IsHitTestVisible property to false. For now I suggest you set the text to be some hard coded temporary string and sort out the label binding once you get the positioning right.

This should have the label showing up in the style. Now to get it into the right position you just need to set a margin on the TextBlock. If your labels are all going to be on the same edge then this will be easy. But if different nodes will have labels one different or multiple edges, you will want to use the IDiagramConnectionPoint.Edge property and either create a converter or a bunch of triggers to change the margin. Due to this style already having quite a few triggers, I would go for the converter approach to simplify the xaml code, but its up to you.

At this stage the labels will appear and disappear with the same mouse logic as the connection points. If you want the labels to always be visible, then you may want to change the existing triggers to only hide the connection point graphic rather than collapsing the whole thing.
You may also want to consider what will happen if the node gets too small because labels may overlap. You could either prevent nodes from being sized too small, or use some kind of converter to hide the labels if node bounds are less than a certain size.

This is just my way of getting it to work, there may be more elegant ways to do it but I hope this gets you started. Let me know if there is any confusion.

Cheers
 - Jason

 Thank you.

My style like this:

            <Style x:Key="ConnectionPointStyle" TargetType="ms:ConnectionPointThumb">

                   <Style.Triggers>

                   <DataTrigger Binding="{Binding FlowDirection}" Value="Outbound">

                        <Setter Property="Width" Value="100" />

                        <Setter Property="Height" Value="100" />

                        <Setter Property="Template">

                            <Setter.Value>

                                <ControlTemplate TargetType="ms:ConnectionPointThumb">

                                    <StackPanel Orientation="Horizontal">

                                        <TextBlock Text="123" IsHitTestVisible="False" Margin="-40 -8 10 0" Width="30"/>

                                        <Rectangle Name="Rect" Width="8" Height="8" RadiusX="2" RadiusY="2" Stroke="DarkGray" StrokeThickness="1" SnapsToDevicePixels="True"

                                               HorizontalAlignment="Left"

                                               VerticalAlignment="Top"

                                               >

                                            <Rectangle.Fill>

                                                <RadialGradientBrush GradientOrigin="0.4, 0.4">

                                                    <GradientStop Color="White" Offset="0" />

                                                    <GradientStop Color="LightBlue" Offset="1" />

                                                </RadialGradientBrush>

                                            </Rectangle.Fill>

                                            <Rectangle.RenderTransform>

                                                <TranslateTransform X="-4" Y="-4" />

                                            </Rectangle.RenderTransform>

                                        </Rectangle>

                                    </StackPanel>

                                    <ControlTemplate.Triggers>

                                        ...

                                    </ControlTemplate.Triggers>

                                </ControlTemplate>

                            </Setter.Value>

                        </Setter>

                    </DataTrigger>

                </Style.Triggers>

            </Style>

I try to migrate on Diagrams 2 and have a problem.

I wrote for custom DataTemplate like this file "...\WPF Diagrams 2\Samples\CustomStyle.FlowDiagrams\DemoStyleNodes.xaml" :

            <ms:MatchingStyleSelector x:Key="NodeStyleSelector">
                <local:CustomNodeStyleMatcher DataType="local:CustomNode" Style="{StaticResource  CustomNodeTemplate}" />
            </ms:MatchingStyleSelector>

            <Style x:Key="CustomNodeStyleTemplate" TargetType="ms:DiagramNodeElement" >
                <Setter Property="NodeTemplate">
                    <Setter.Value>
                        <DataTemplate>

....

It's worked good.

But i want to use custom ConnectionPointStyle and wrote like this:

    <DataTemplate x:Key="CustomConnectionPointTemplate">
        <ms:ConnectionPointThumb Style="{StaticResource ConnectionPointStyle}" ConnectionPoint="{Binding}" />
    </DataTemplate>

    <Style x:Key="NodeStyle" TargetType="{x:Type ms:DiagramNodeElement}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ms:DiagramNodeElement">

....

<ItemsControl ItemsSource="{Binding Content.ConnectionPoints, RelativeSource={RelativeSource TemplatedParent}}"
                          ItemTemplate="{StaticResource CustomConnectionPointTemplate}"

Question: how can i apply second style NodeStyle?

If i use both styles together in one style,  nothing working.

If i use both styles together with BasedOn,  nothing working.

I find solution.

ContentPresenter name was changed.

In old node style:

    <ContentPresenter Name="ContentPresenter" />

In new 2.0 node style:

     <ContentPresenter Name="Presenter" ContentTemplate="{Binding NodeTemplate, RelativeSource={RelativeSource TemplatedParent}}" />