Wpf drag and drop application

Question

i am new to WPF and i am trying to develop drag and drop functionality in my application. I have two user controls Window1 and Window2.

How do I enable drag and drop on any of this user controls by clicking only in the orange area. Only orange area of the user control should be drag and drop enabled. Gray area should not be drag and drop enabled. I mean if we want to drag user control then we have to click in the orange area and gray area will also be dragged with it. If we click on gray area then user control should not move.

Please check the image below which will help in understanding the question.

https://www.dropbox.com/sh/wj9mcbyi9wpcxgq/AAAb9r_aWxKm2Eah3PrT__5sa?dl=0

Thanks in advance.

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

If you want to do it yourself then you can use my implementation here: https://stackoverflow.com/a/17014906/145757

Otherwise you can check the Blend SDK which includes the MouseDragElementBehavior.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 07 '14 at 13:13

Pragmateek

13,174
9
74
108

Thanks for the answer, i have tried your implementation. I am getting an exception "Object reference not set to an instance of an object". Please take a look at this images which will help you to understand the exception. https://www.dropbox.com/sh/7yy3p3qflb5kzek/AAAg-dN-cKkMLxXaTJ36Px5ca?dl=0 I am not sure if i am doing it right. – Rajput Pavan Sep 07 '14 at 15:50
Are you setting the `RenderTransform` yourself? Because seems like there is already a `RenderTransform` which is not a `TranslateTransform`... – Pragmateek Sep 07 '14 at 16:35
No i am not setting `RenderTransform` myself. I just tried your code as it is. – Rajput Pavan Sep 07 '14 at 16:55
@RajputPavan So here is a possible fix: `draggedBox.RenderTransform = draggedBox.RenderTransform as TranslateTransform ?? new TranslateTransform();`... – Pragmateek Sep 07 '14 at 17:20
Thanks again. But i am able to drag user control even if i click on the gray area. I need my whole user control(both orange and gray areas) to be dragged only when i click in orange area and not in the gray area. – Rajput Pavan Sep 07 '14 at 17:29
@RajputPavan Register the mouse event handlers on the header, instead of the whole box. – Pragmateek Sep 07 '14 at 17:34

Rajput Pavan · Answer 2 · 2014-09-08T02:31:33.460

Thanks a lot @Pragmateek for your help, it worked like a charm. Below is my code implemented.

I've a user control UCDragme, it has a dedicated orange drag area TBDragme.

<UserControl x:Class="NSR3.UCDragme"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="500" d:DesignWidth="300">
    <Grid Background="Gray">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Background="Orange" x:Name="TBDragme" Text="Dragme" />
        <TextBlock Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Background="AliceBlue" Margin="20" Text="No drag"></TextBlock>
   </Grid>
</UserControl>

Main window Home:

<Window x:Class="NSR3.Home"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Home"
    xmlns:nsr="clr-namespace:NSR3">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Canvas x:Name="panel">
        </Canvas>
        <Button Content="Add" Grid.Row="1" Grid.Column="0" Click="Button_Click" />
    </Grid>
</Window>

drag-and-drop engine in the Home window code-behind:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace NSR3
{
/// <summary>
/// Interaction logic for Home.xaml
/// </summary>
public partial class Home : Window
{
    UCDragme box;
    public Home()
    {
        InitializeComponent();

        box = new UCDragme();

        TextBlock tb = (TextBlock)box.FindName("TBDragme");

        tb.MouseLeftButtonDown += box_MouseLeftButtonDown;
        tb.MouseLeftButtonUp += box_MouseLeftButtonUp;
        tb.MouseMove += box_MouseMove;

        panel.Children.Add(box);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        box = new UCDragme();

        TextBlock tb=(TextBlock)box.FindName("TBDragme");

        tb.MouseLeftButtonDown += box_MouseLeftButtonDown;
        tb.MouseLeftButtonUp += box_MouseLeftButtonUp;
        tb.MouseMove += box_MouseMove;

        panel.Children.Add(box);
    }

    private TextBlock draggedBox;
    private Point clickPosition;

    private void box_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        draggedBox = sender as TextBlock;
        clickPosition = e.GetPosition(draggedBox);
        draggedBox.CaptureMouse();
    }

    private void box_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        draggedBox.ReleaseMouseCapture();
        draggedBox = null;
        //box = null;
    }

    private void box_MouseMove(object sender, MouseEventArgs e)
    {
        if (draggedBox != null)
        {
            Point currentPosition = e.GetPosition(panel);

            box.RenderTransform = draggedBox.RenderTransform as TranslateTransform ?? new TranslateTransform();

            TranslateTransform transform = box.RenderTransform as TranslateTransform;

            transform.X = currentPosition.X - clickPosition.X - draggedBox.Margin.Left;
            transform.Y = currentPosition.Y - clickPosition.Y - draggedBox.Margin.Right;
        }
    }

}
}

Wpf drag and drop application

2 Answers2