Diagrams 2.0 Default Styles

Hi, 

I am in the midst of migrating to Diagrams 2.0. So, I would like to get all the default styles for Diagrams 2.0 nodes as well as the connections. Just like what you have here: 

http://www.mindscapehq.com/blog/index.php/2009/09/29/wpf-diagrams-styling-a-node-element/

So that I can re-template everything according to the new nodes/connections styles.

Thanks.

Hello

I have attached a file with all the generic styles for nodes and connections. At the top of the file are the namespaces that are used. On line 250 is the style applied to DiagramNodeElements and line 535 has the style for DiagramConnectionElements. The file also include converters, brushes and styles that are used for the smaller controls such as the MoveThumb, Resizer, RotateThumb, ConnectionRelocatorThumb, ConnectionPointThumb and ConnectionSegmentThumb.

Some basic examples of custom styles can be found in the CustomStyle.FlowDiagrams sample project. Here it shows how to customize the structure and colors of a node by setting the NodeTemplate property within each node style. It also has a custom connection style that uses similar code to the default styles in the attached file.

Let us know if you need anything else.

Is there any reasons why you commenting out some of the styles in the ConnectionStyles area? 

    <!--<Style x:Key="{x:Type f:ConnectionPointThumb}" TargetType="f:ConnectionPointThumb">
        <Setter Property="Width" Value="10" />
        <Setter Property="Height" Value="10" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="f:ConnectionPointThumb">
                    <Border Background="Transparent" Margin="-5,-5,5,5" Width="10" Height="10">
                        <ContentPresenter Content="{Binding}" ContentTemplateSelector="{StaticResource ConnectionPointTemplateSelector}"
                                  Margin="4,4,-4,-4" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>-->

and also some RenderTransforms and Triggers:

                            <!-- 
                            <ContentControl.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform Angle="{Binding Connection.Segments, Converter={StaticResource EndArrowRotationConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                    <TranslateTransform X="{Binding ToConnectionPoint.Position.X, RelativeSource={RelativeSource TemplatedParent}}"
                                                        Y="{Binding ToConnectionPoint.Position.Y, RelativeSource={RelativeSource TemplatedParent}}" />
                                </TransformGroup>
                            </ContentControl.RenderTransform>
                            -->

                        <!-- 
                        <DataTrigger Binding="{Binding ConnectionContentTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}" Value="{x:Null}">
                            <Setter TargetName="DataPresenter" Property="ContentTemplate" Value="{StaticResource DefaultConnectionContentTemplate}" />
                        </DataTrigger>
                        -->

Sorry about that. These can safely be deleted.

 - Jason

Hi, thanks for the clarification. ;)

Anyway, here is another one:

I notice there is a ConnectionPointThumb control inside the default Node style, and below it, is the ItemsControl that binds to the ConnectionPoints.

So, which one is actually the ConnectionPointThumb itself? 

I am a bit confused, because you set the ConnectionPointThumb style to use:  Style="{StaticResource {x:Static f:MoveThumb.InvisibleStyleKey}}", which is invisible by default?

And then the ItemsControl, should be displaying all the ConnectionPoints that being defined when creating the node. In order to display our own visual styles for different ConnectionPoints, I assume we should create our own template and bind it to the ItemsControl ItemTemplate="{StaticResource ConnectionPointThumbTemplate}"? 

If so, what is the use of the previous ConnectionPointThumb?

Hello

Sorry for the confusion. The extra ConnectionPointThumb is related to the IDiagramNode.DefaultConnectionPoint property. This is used for a special connection-creation behaviour which isn't actually used in any of our diagram types or samples. It may be useful for some custom diagram types however which is why it does exist. For your project I'm sure you won't need it. Especially if you're not using the DefaultConnectionPoint property in the first place. So you will not need to include the extra ConnectionPointThumb in your styles.