Preview Settings in WPF SfDiagram

18 Nov 20183 minutes to read

WPF Diagram provides support to drag objects as an outline without affecting the original object. When multiple elements are selected, the outline of every selected element is moved.

Preview Dragging can be enabled by assigning values other than PreviewMode.Preview to SfDiagram.PreviewSettings.PreviewMode.

Drag the preview of the node instead of original object

By default, Outline of the connectors connected to the dragging objects will be disabled state. But, you can view the outline of the connectors, by holding dragged objects for certain time span. ConnectorRefreshingSpan property of PreviewSettings allows you to specify the time span and the value should be greater than 300ms.

<!--Create SfDiagram Instance-->
  <syncfusion:SfDiagram x:Name="Diagram">
      <syncfusion:SfDiagram.PreviewSettings>
          <syncfusion:PreviewSettings PreviewMode="Preview" ConnectorRefreshingSpan="300"></syncfusion:PreviewSettings>
      </syncfusion:SfDiagram.PreviewSettings>
  </syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();

this.diagram.PreviewSettings = new PreviewSettings() { PreviewMode = PreviewMode.Preview, ConnectorRefreshingSpan = 300 };

Refresh the original object with specific time

Appearance

Appearance of the preview can be customized using PreviewStyle property of PreviewSettings.

<Style TargetType="Shape" x:Key="previewstyle">
    <Setter Property="Stroke"
            Value="CornflowerBlue"></Setter>
    <Setter Property="StrokeThickness"
            Value="1.5"></Setter>
    <Setter Property="StrokeDashArray"
            Value="3,3"></Setter>
</Style>


  <!--Create SfDiagram Instance-->
  <syncfusion:SfDiagram x:Name="Diagram">
      <syncfusion:SfDiagram.PreviewSettings>
          <syncfusion:PreviewSettings PreviewMode="Preview" ConnectorRefreshingSpan="300" PreviewStyle="{StaticResource previewstyle}"></syncfusion:PreviewSettings>
      </syncfusion:SfDiagram.PreviewSettings>
  </syncfusion:SfDiagram>
SfDiagram diagram = new SfDiagram();

var previewStyle = new Style();
previewStyle.TargetType = typeof(Shape);
previewStyle.Setters.Add(new Setter() { Property = Shape.StrokeProperty, Value = new SolidColorBrush(Colors.CornflowerBlue) });
previewStyle.Setters.Add(new Setter() { Property = Shape.StrokeThicknessProperty, Value = 1.5 });
previewStyle.Setters.Add(new Setter() { Property = Shape.StrokeDashArrayProperty, Value = new DoubleCollection { 3, 3 } });
this.diagram.PreviewSettings = new PreviewSettings() { PreviewMode = PreviewMode.Preview, ConnectorRefreshingSpan = 300, PreviewStyle = previewStyle };

customization of drag preview

View sample in GitHub.