How to show the copied diagram elements as preview image along with the mouse pointer in WPF Diagram(SfDiagram)?
This article explains how to show the copied diagram elements as a preview along with the mouse pointer and paste it on the current mouse point. This requirement can be achieved by using the image exporting feature of the SfDiagram control.
When the user tries to copy the diagram elements then create the selected diagram region as an image and attach the created image to the mouse pointer such that when the user moves the mouse pointer then the created image must move along the mouse. To export the selected diagram region as an image, pass the bounds of the selected region to the Clip Property of the ExportSettings class where Clip is a Rectangle type property and it is used to export the specific area of the diagram as an image. Using the Info property of the SelectorViewModel class, you can get the selected diagram region bounds. You can save the exported image to stream using the ExportStream property of the ExportSettings.
The following KeyDown event code sample will export the selected diagram region as an image when the user presses Ctrl+C keys to copy the diagram elements. Once the image is exported, you can display it using the Canvas object over the diagram page.
XAML
<Grid>
<!--Initialize the Sfdiagram-->
<syncfusion:SfDiagram x:Name="diagram"
Nodes="{Binding Nodes}">
</syncfusion:SfDiagram>
<Canvas Background="Transparent" Visibility="Hidden" x:Name="CopiedImageCanvas">
<Image x:Name="CopiedImage" ></Image>
</Canvas>
</Grid>
C#
public MainWindow()
{
InitializeComponent();
//Adding KeyDown, MouseMove events.
this.KeyDown += MainWindow_KeyDown;
this.MouseMove += MainWindow_MouseMove;
//Adding ItemAdded event of SfDiagram
(diagram.Info as IGraphInfo).ItemAdded += OnDiagramItemAdded;
}
//Method to execute KeyDownEvent
private void MainWindow_KeyDown(object sender, KeyEventArgs e)
{
//When Ctrl+C keys are pressed.
if (e.Key == Key.C && (Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control)
{
MemoryStream stream = new MemoryStream();
//Getting bounds of selected items using SelectorViewModel.
Rect SelectedItemsBounds = ((diagram.SelectedItems as SelectorViewModel).Info as ISelectorInfo).Bounds;
//Setting ExportStream as stream to export the diagram as stream and passing selected elements bounds to Clip property.
ExportSettings settings = new ExportSettings()
{
Clip = SelectedItemsBounds,
ExportStream = stream
};
diagram.ExportSettings = settings;
//Method to export the clipped SfDiagram as stream.
diagram.Export();
//Bringing canvas image to visibility
CopiedImageCanvas.Visibility = Visibility.Visible;
//Convert stream to image
stream.Position = 0;
System.Drawing.Image img = System.Drawing.Image.FromStream(stream);
BitmapImage bitImage = new BitmapImage();
bitImage.BeginInit();
//System.IO.MemoryStream MS = new System.IO.MemoryStream();
img.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
stream.Seek(0, System.IO.SeekOrigin.Begin);
bitImage.StreamSource = stream;
bitImage.EndInit();
//setting source to image.
CopiedImage.Source = bitImage;
CopiedImage.Opacity = 0.6;
}
//when paste operation is happened by pressing Ctrl+V keys are pressed.
if (e.Key == Key.V && (Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control)
{
//hidding exported copied image.
CopiedImageCanvas.Visibility = Visibility.Hidden;
//clearing the image source.
CopiedImage.Source = null;
}
}
You can display the preview image along with the mouse pointer move using the MouseMove event by setting the current mouse position to the canvas image object.
C#
//Adding MouseMove events.
this.MouseMove += MainWindow_MouseMove;
//Method to execute MouseMoveEvent
private void MainWindow_MouseMove(object sender, MouseEventArgs e)
{
//Getting current mouse position of diagram.
cursorPosition = e.GetPosition(diagram.Page);
//Setting location to the canvas in which exported stream image is showing.
if (CopiedImageCanvas.Visibility == Visibility.Visible)
{
Canvas.SetLeft(CopiedImage, e.GetPosition(this).X);
Canvas.SetTop(CopiedImage, e.GetPosition(this).Y);
}
}
When copied elements are pasted by pressing Ctrl+V keys, the preview image will be cleared and copied items will be pasted at the current mouse position using the ItemAddedEvent and PropertyChanged event of the SelectorViewModel.
C#
// Create SfDiagram instance.
SfDiagram diagram = new SfDiagram();
//Adding KeyDown event.
this.KeyDown += MainWindow_KeyDown;
//Adding ItemAdded event of SfDiagram
(diagram.Info as IGraphInfo).ItemAdded += OnDiagramItemAdded;
//Method to execute KeyDownEvent
private void MainWindow_KeyDown(object sender, KeyEventArgs e)
{
//when paste operation is happened by pressing Ctrl+V keys are pressed.
if (e.Key == Key.V && (Keyboard.Modifiers & ModifierKeys.Control) == ModifierKeys.Control)
{
//hidding exported copied image.
CopiedImageCanvas.Visibility = Visibility.Hidden;
//clearing the image source.
CopiedImage.Source = null;
}
}
