How to Achieve the Stencil Preview Effect Without Dragging a Symbol in the WPF Diagram (SfDiagram)

In the WPF Diagram (SfDiagram), you can customize the preview effect of symbols without dragging them. Instead, click the symbol, move the pointer, and release it where you want. This is achieved using PreviewMouseMove and ItemTappedEvents, which display the symbol’s preview effect without starting a drag action from the stencil.

We have created a sample to achieve the Stencil preview effect without dragging a symbol. Please refer to the following code example.

We have used the PreviewMouseMove event to move the preview of the selected item in the diagram area.

//Adding previewMouseMove Event.

diagram.PreviewMouseMove += Diagram_PreviewMouseMove;


//Method for executing the PreviewMouseMove Event.

private void Diagram_PreviewMouseMove(object sender, MouseEventArgs e)
{
   ContentPresenter presenter = DiagramGrid.Children[1] as ContentPresenter;
   if (stencil.SelectedItems != null && stencil.SelectedItems.Any() && stencil.SelectedItems.Count > 0)
   {
       if(stencil.SelectedSymbol != null)
       {
           ImageSource img = (stencil.SelectedSymbol.Content as Image).Source;
           Image previewimage = new Image() { Source = img };
           presenter.Content = previewimage;
           presenter.Height = 100;
           presenter.Width = 100;
           presenter.HorizontalAlignment = HorizontalAlignment.Left;
           presenter.VerticalAlignment = VerticalAlignment.Top;
           presenter.RenderTransformOrigin = new Point(0, 0);
           presenter.RenderTransform = new TranslateTransform() { X = e.GetPosition(diagram).X, Y = e.GetPosition(diagram).Y };
       }
       else
       {
           presenter.Content = null;
       }
   }
}

We have utilized the ItemTapped event to add the selected node from the Stencil into the Diagram.

//Adding ItemTappedEvent.

(diagram.Info as IGraphInfo).ItemTappedEvent += MainWindow_ItemTappedEvent;


//Method to execute the ItemTappedEvent.

private void MainWindow_ItemTappedEvent(object sender, ItemTappedEventArgs args)
{
   if(args.Item is SfDiagram)
   {
       if(stencil.SelectedItems != null && stencil.SelectedItems.Any() && stencil.SelectedItems.Count > 0)
       {
           foreach(object obj in stencil.SelectedItems)
           {
               if(obj is NodeViewModel)
               {
                   NodeViewModel stencilnode = (NodeViewModel)obj;
                   NodeViewModel node = new NodeViewModel()
                   {
                       UnitHeight = stencilnode.UnitHeight,
                       UnitWidth = stencilnode.UnitWidth,
                       Shape = stencilnode.Shape,
                       OffsetX = (args.MouseEventArgs as MouseButtonEventArgs).GetPosition(diagram).X,
                       OffsetY = (args.MouseEventArgs as MouseButtonEventArgs).GetPosition(diagram).Y,
                   };

                   (diagram.Nodes as NodeCollection).Add(node);
                   ContentPresenter presenter = DiagramGrid.Children[1] as ContentPresenter;
                   presenter.Content = null;
                   stencil.SelectedItems.Clear();
                   break;
               }
           }
       }
   }
}

//Adding ItemSelectingEvent.

(diagram.Info as IGraphInfo).ItemSelectingEvent += MainWindow_ItemSelectingEvent;



//Method to execute the ItemSelectingEvent.

private void MainWindow_ItemSelectingEvent(object sender, DiagramPreviewEventArgs args)
{
   ContentPresenter presenter = DiagramGrid.Children[1] as ContentPresenter;
   presenter.Content = null;
   stencil.SelectedItems.Clear();
}

View sample in GitHub

Conclusion
I hope you enjoyed learning how to achieve the Stencil preview effect without dragging a symbol in the WPF Diagram (SfDiagram)

You can refer to our WPF Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our WPF Diagram example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums or feedback portal. We are always happy to assist you!