WPF Dynamic Dragging

Question

0.00/5 (No votes)

See more:

Hello I recently downloaded and played with the Drag Canvas in WPF. This fits what I'm trying to do with the program, but I would like to add UI objects during run-time and make them draggable. Right now dragging only works if the objects are defined in XAML before run. I can turn off/on dragging for these objects added before, but I want to be able to create new objects to drag as well. Any suggestions would be appreciated. I'll include my Mainwindow.XAML, utilizing the dragcanvas program.

Here is the original dragCanvas program I used, just replace the mainwindow.XAML and everything should be good. Dragging Elements in a Canvas[^]

C#

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Markup;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DragCanvas1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        int counter = 0;

        public MainWindow()
        {
            InitializeComponent();      
        }
        //New TextBox Button
      
        private void textButton_Click(object sender, RoutedEventArgs e)
        {
            counter++;
            TextBox myBox = new TextBox();
            myBox.Width = 100;
            myBox.Height = 50;
            myBox.Text = counter.ToString();
            DragCanvas.SetCanBeDragged(myBox, true);
            myCanvas.Children.Add(myBox);
            //myBox = textBox1;
        }
        //Drag Button
        private void dragButton_Click(object sender, RoutedEventArgs e)
        {
            if (textBox1.Text == "Dragging Off")
            {
                textBox1.Text = "Dragging On";
                DragCanvas.SetCanBeDragged(textBox1, true);
            }
            else
            {
                textBox1.Text = "Dragging Off";
                DragCanvas.SetCanBeDragged(textBox1, false);
            }
       }
    }
}

Posted 21-Jun-12 9:44am

kal727

Updated 21-Jun-12 10:22am

Sandeep Mewara

v4

Add a Solution

2 solutions

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)

Clifford Nelson · Answer 1 · 2012-06-22T09:29:00

You have not stated much about what you have tried, so it is a little difficult to help you, but I will take a shot:

You will have to add something to the canvas, like a textbox(which has the advantage of you already dragging a textbox around). When you define the textbox in C#, add the events that you already have for the current textboxbut change the handler so that it will handle any textbox:

C#

private void dragButton_Click(object sender, RoutedEventArgs e)
{
    var textBox = sender as TextBox;
    if (textBox == null) return;//Don't have textbox
    if (textBox.Text == "Dragging Off")
    {
        textBox.Text = "Dragging On";
        DragCanvas.SetCanBeDragged(textBox, true);
    }
    else
    {
        textBox.Text = "Dragging Off";
        DragCanvas.SetCanBeDragged(textBox, false);
    }
}

Ian Shlasko · Answer 2 · 2012-06-22T10:42:00

You'll need to be a bit more specific if you want to get a complete solution here, but let me see if I can help a bit...

If you just want to add any arbitrary control to the canvas and have it become draggable, that will be slightly more complicated, but let's operate under the assumption that you have a specific type of control you're adding. Just to keep everything organized, you might want to do this regardless, so it's easy to iterate through them.

So, say everything you put in the canvas that you want to be draggable is inside a "DragContainer" (A subclass of Border, maybe). You can use some WPF styles to make sure they all behave the same way...

<window.resources>
	<style targettype="local:DragContainer">
		<setter>
                   Property="dragcanvas:DragCanvas.CanBeDragged" 
                   Value="True"/>
	</setter></style>
</window.resources>

That little block will cause EVERY object of that type (Adjust the namespaces to whatever you're using) to have that property as soon as it's added to the window or its children.

But from the code you posted, it looks like you're trying to toggle dragging on and off with a button. That's where Data Binding comes in. The simplest way would be to add a toggle button to the window instead of just a button:

<togglebutton name="btnToggleDraggable" content="Drag On/Off" />

Once that's in place, you can modify the style code I posted above, to look like this:

XML

<window.resources>
	<style targettype="local:DragContainer">
		<setter>
                   Property="dragcanvas:DragCanvas.CanBeDragged" 
                   Value="{Binding IsChecked,ElementName=btnToggleDraggable,Mode=OneWay}"/>
	</setter></style>
</window.resources>

So when you're adding UI controls, all you have to do is make sure they're wrapped up in a DragContainer, which could be as simple as this:

public class DragContainer : Border { }

You could even get fancy and add some sort of indicator on the DragContainer when dragging is enabled, such as using a ValueConverter to turn the borders red or add a drop shadow... WPF makes those things incredibly easy once you get the hang of it.

WPF Dynamic Dragging

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0