Migration of personal control to RadDiagram

[Geoffrey]

Hello,

In one of our project we used a WPF diagram control developed by me. It works well, but some features like printing, pagination, ... are missing so we plan to use RadDiagram control. I start a project for the migration (Q2 2015) and I have some questions. You can find attached my control based on a WPF canvas. We use MVVM in our software.

• Is it possible to have a margin between a shape and the selection ? I try set the margin property but it doesn't work. The shape is moved vertically and horizontally but is too big even if I reduce the geometry, I didn't found Stretch property for the geometry.
  

  <Style TargetType="telerik:RadDiagramShape" x:Key="ProcedureStepFinalStyle">
              <Setter Property="IsEditable" Value="False" />
              <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
              <Setter Property="RotationAngle" Value="{Binding RotationAngle}" />
              <Setter Property="IsResizingEnabled" Value="False" />
              <Setter Property="IsRotationEnabled" Value="False" />
              <Setter Property="Geometry" Value="M 0,24 A 24,24 45 0 1 24,0 L 132,0 A 24,24 45 0 1 156,24 A 24,24 45 0 1 132,48 L 24,48 A 24,24 45 0 1 0,24" />
              <Setter Property="BorderBrush" Value="#FF6b9100" />
              <Setter Property="Height" Value="48" />
              <Setter Property="Width" Value="168" />
              <Setter Property="AllowCut" Value="False" />
              <Setter Property="Padding" Value="5" />
              <Setter Property="Margin" Value="5" />
              <Setter Property="Background">
                  <Setter.Value>
                      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                          <GradientStopCollection>
                              <GradientStop Offset="0" Color="White" />
                              <GradientStop Offset="1" Color="#FFbdfc02" />
                          </GradientStopCollection>
                      </LinearGradientBrush>
                  </Setter.Value>
              </Setter>
              <Setter Property="ContentTemplate">
                  <Setter.Value>
                      <DataTemplate>
                          <TextBlock Text="{localization:LocText Courbon.Languages:Language:PageGraphic_End}" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" />
                      </DataTemplate>
                  </Setter.Value>
              </Setter>
          </Style>

• How to only authorize connection start from bottom shape to the top of another shape ?
• How to set connection stroked when and item is moving or when a connection is being drawn (like in I2.png attached picture) ?
• How to have the same connection logic thank in the pictures ?
  I have a look to IRouter interface, but I think it doesn't help... We cannot have arc on intersection.

Thanks in advance for our reply.

Best regards,
Geoffrey

[Petar Mladenov]

Hi Geoffrey,

Thank you for choosing our Diagramming framework for your business applications.

I will try to address your questions below.

- Margin in DiagramShapes. Setting margin / Padding on Diagram shape won't do the trick, not changing the default template of the Shapes because the ManipulationAdorner used for resizing / selection / rotating over the shape is not prepared for such calculations. Some of the functions - resize / rotate won't function as expected. However if you not need the default geometry of the shape, you can use the following technique:

<telerik:RadDiagramShape x:Name="root"  Content="ROOT" Geometry="{x:Null}">
               <telerik:RadDiagramShape.ContentTemplate>
                   <DataTemplate>
                       <Border Margin="10" BorderThickness="2" BorderBrush="Blue" >
                           <TextBlock Text="{Binding}" />
                       </Border>
                   </DataTemplate>
               </telerik:RadDiagramShape.ContentTemplate>
           </telerik:RadDiagramShape>

Null Geometry and ContentTemplate which takes care of the margin you need. Please let us know if this fits well in your scenario. This is also applicable in MVVM scenarios.

- Connection Direction. If you need all connections to start from the bottom of its source shape and to end in the top of its target shape you can use the following Style:

<Style TargetType="telerik:RadDiagramConnection">
              <Setter Property="SourceConnectorPosition" Value="Bottom" />
              <Setter Property="TargetConnectorPosition" Value="Top" />
          </Style>

- Stroked Connection. You can set style setter for connections and set their StrokeDashArray property. In Diagram ItemsChanged event you can remove / switch the StrokeDashArray property of the added connection. This way when you start making new connection with mouse - it will be dashed and once added in the diagram - it will revert to straight (non-dashed line). For existing, added connections, you can use the ConnectionManipulationStarted and ConnectionsManipulationCompleted events and switch the StrokeDashArray proeprty in their event handlers.

- Routed Connections without crossing. You can try the non-default AStar Connection Router in Diagram. It will try to avoid connection crossing, however this is not guaranteed. If none of the Routers fits your needs, you will need to create custom router, or handle the crossing with custom methods in your application. Also please note that before connection routing, the layout moves the shapes into their final positions. Our Tree Layouts do not support cycles in the graph , they support only acyclic trees.

Regards,
Petar Mladenov
Telerik