Drag and Drop Symbols

Drag and Drop Symbols

I want to implement functionality of Drag and Drop of symbols (UML,ER diagrams etc....).......For more clarity i want to inplement like http://www.gliffy.com/ then click on Lets get started:Try it now free, then click on create document , then it will allow to drag and drop of symbols......Same thing i want to implement.but i dont know from where to start.....Suggest me some suitable solution for implementing this.

Answers & Comments...

Answer: 1

Hi Jigna,

First of all, you may take a look at a basic example on how to drag and drop objects in UI layout:

http://msdn.microsoft.com/en-us/library/cc189066(v=vs.95).aspx

When you drag a object from the Basic Shapes panel, there would be create a new control in the Layout.

Best Regards,

Answer: 2

I m able to drag symbols from listbox to canvas....but after dropping in canvas,symbols are invisible........

Answer: 3

Here is my code:-

Xaml:

<UserControl x:Class="dragdropeg.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolKit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
Loaded="UserControl_Loaded">

<Grid x:Name="LayoutRoot" Background="White">
<toolKit:ListBoxDragDropTarget AllowDrop="True">
<ListBox x:Name="customerListBoxMain" Height="200" Width="200" Margin="54,46,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" SelectionChanged="customerListBoxMain_SelectionChanged">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</toolKit:ListBoxDragDropTarget>

<Canvas Background="Pink"
Height="150"
HorizontalAlignment="Left"
Margin="33,250,0,0"
Name="canvas1"
VerticalAlignment="Top" Width="320" AllowDrop="True" />
</Grid>
</UserControl>

xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace dragdropeg
{
public partial class MainPage : UserControl
{
private bool isDragging;
private Point previousPosition;
private Point currentPosition;

public MainPage()
{

InitializeComponent();
Loaded += this.UserControl_Loaded;
customerListBoxMain.Items.Add("Shapes");

Rectangle rect1 = new Rectangle();
rect1.Width = 50;
rect1.Height = 50;
rect1.Fill = new SolidColorBrush(Colors.White);
rect1.StrokeThickness = 1;
rect1.Stroke = new SolidColorBrush(Colors.Black);
customerListBoxMain.Items.Add(rect1);
rect1.MouseMove += new MouseEventHandler(item_MouseMove);
rect1.MouseLeftButtonUp += new MouseButtonEventHandler(item_MouseLeftButtonUp);

Ellipse ellipse1 = new Ellipse();
ellipse1.Width = 50;
ellipse1.Height = 50;
ellipse1.Fill = new SolidColorBrush(Colors.White);
ellipse1.StrokeThickness = 1;
ellipse1.Stroke = new SolidColorBrush(Colors.Black);
customerListBoxMain.Items.Add(ellipse1);
ellipse1.MouseMove += new MouseEventHandler(item_MouseMove);
ellipse1.MouseLeftButtonUp += new MouseButtonEventHandler(item_MouseLeftButtonUp);
}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
foreach (ListBoxItem item in customerListBoxMain.Items)
{
item.RenderTransform = new TranslateTransform();
item.MouseLeftButtonUp += new MouseButtonEventHandler(item_MouseLeftButtonUp);
item.MouseMove += new MouseEventHandler(item_MouseMove);
}
}

private void customerListBoxMain_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBoxItem item = (ListBoxItem)customerListBoxMain.SelectedItem;
item.CaptureMouse();
MatrixTransform mt = (MatrixTransform)item.TransformToVisual(LayoutRoot);
previousPosition =new Point(mt.Matrix.OffsetX, mt.Matrix.OffsetY);
isDragging = true;
customerListBoxMain.Items.Remove(item);
LayoutRoot.Children.Add(item);
}

void item_MouseMove(object sender, MouseEventArgs e)
{
if (isDragging)
{
ListBoxItem item = (ListBoxItem)sender;
TranslateTransform transform = (TranslateTransform)item.RenderTransform;
Point currentPosition = e.GetPosition(LayoutRoot);
transform.X += currentPosition.X - previousPosition.X;
transform.Y += currentPosition.Y - previousPosition.Y;
previousPosition = currentPosition;
}
}

void item_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
ListBoxItem item = (ListBoxItem)sender;
item.ReleaseMouseCapture();
isDragging = false;
}
}
}

After dropping(rectangle & ellipse) in canvas ,they are invisible...........

Answer: 4

Hi Jigna,

According to the code you posted above, there are some suggestions:

Handle ItemDragStarting and ItemDroppedOnTarget events for ListBoxDragDropTarget; handle the MouseLeftButtonUp event of Canvas to deal with the dropped item.

http://forums.silverlight.net/p/146104/325231.aspx

Best Regards,

---