how to drag and drop multiple labels over image in wpf from codebehind?

Question

4.50/5 (2 votes)

See more:

Hi,

I am generating a set of labels from codebehind in wpf, C#. I can drag and drop the last label only once. I am not able to drag and drop any other labels.

The C# code is as follows:

C#

ImgFloorPlan.Source = new BitmapImage(new Uri(rootDic + "\\" + filename));
   .
   .
   .
   .
foreach (string room in roomsList)
            {
                lbl = new Label();
                lbl.Content = room;
                lbl.Foreground = Brushes.White;
                lbl.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                lbl.Background = Brushes.Gray;
                lbl.Margin = new Thickness { Left = 5, Top = j };
                lbl.MouseDown += new MouseButtonEventHandler(StkRooms_MouseDown);
                lbl.MouseMove += new MouseEventHandler(StkRooms_MouseMove);
                lbl.Cursor = Cursors.Hand;
                lbl.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                CnvsFloorPlan.Children.Add(lbl);
                i++;
                j += 30;
            }

All the above labels are added to a canvas. ImgFloorPlan is also added to the canvas. All the above labels should be dragged and dropped over the image.

XAML code is as follows:

XML

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="26,63,98,185" x:Name="_scrollViewer">
            <Canvas x:Name="CnvsFloorPlan">
                   <Grid x:Name="GrdFloorPlan" HorizontalAlignment="Left" VerticalAlignment="Top" Width="{Binding ElementName=CnvsFloorPlan, Path=ActualWidth}" Height="{Binding ElementName=CnvsFloorPlan, Path=ActualHeight}" >
                         <Image x:Name="ImgFloorPlan" Source="Images/blank.png" HorizontalAlignment="left" VerticalAlignment="Top" AllowDrop="True" Drop="ImgFloorPlan_Drop"  Visibility="Visible"   />
                   </Grid>
            </Canvas>
        </ScrollViewer>

Can anyone help me with this please? I have spent more than 3 weeks trying to fix this. I just have to populate multiple labels depending on the condition. and user should be able to drag and drop these labels over the image. Please help me with this.

Thanks in advance

Posted 5-Jan-13 9:18am

syssofeng

Add a Solution

2 solutions

Solution 1

Probably the only trick I can think of is to use mouse capture, so that once you start dragging, the mouse events keep going to the control. I think it's a static property of the Mouse class in WPF, so type Mouse. and you should see a method you can use to make the mouse events keep going to your label. Then dragging it until the mouse button lifts becomes trivial. Don't forget to clear the capture when you're done

Posted 6-Jan-13 11:26am

Christian Graus

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

syssofeng · Accepted Answer · 2013-01-20T00:46:00

Thank you all for your solutions. HOwever, I have used Thumbs to solve this issue and it works quite well.

We have to first create a control template for the item to be dragged as follows:

XML

<resourcedictionary>
            <controltemplate x:key="rmIcon" targettype="Thumb" xmlns:x="#unknown">
                <stackpanel x:name="StkRoom" horizontalalignment="Center">
                    <image x:name="tplImage" source="Images\lightoffsmall.png"></image>
                    <textblock x:name="tplTextBlock" text="User stage" foreground="White" />
                </stackpanel>
            </controltemplate>
        </resourcedictionary>

Then I created the necessary draggable thumbs from codebehind as follows:

C#

TmbRoom = new Thumb();
                TmbRoom.Margin = new Thickness { Left = left, Top = top };
                TmbRoom.Template = this.Resources["rmIcon"] as ControlTemplate;
                TmbRoom.ApplyTemplate();
                TmbRoom.DragDelta += new DragDeltaEventHandler(onDragDelta);
                TmbRoom.PreviewMouseDown += TmbRoom_PreviewMouseDown;
                TmbRoom.PreviewMouseUp += TmbRoom_PreviewMouseUp;
                //changing text in the template
                TextBlock txt = (TextBlock)TmbRoom.Template.FindName("tplTextBlock", TmbRoom);
                txt.Text = room;
                // Put newly created thumb on the canvas
                CnvsFloorPlan.Children.Add(TmbRoom);
private void onDragDelta(object sender, DragDeltaEventArgs e)
        {
            Thumb thumb = e.Source as Thumb;

            double left = Canvas.GetLeft(thumb) + e.HorizontalChange;
            double top = Canvas.GetTop(thumb) + e.VerticalChange;

            Canvas.SetLeft(thumb, left);
            Canvas.SetTop(thumb, top);

            //LblStatus.Content = left.ToString() + ", " + top.ToString();
        }

The onDragdelta function enables dragging and is easier to handle compared to conventional dragging methods in wpf.