Silverlight - Drag / Drop / Snap To Grid

Here is a very simple example of how to do Drag & drop and Snap To grid


The XAML


<UserControl x:Class="SilverlightApplication7.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"

    mc:Ignorable="d"

    d:DesignHeight="500" d:DesignWidth="500">



    <Canvas Height="500" Width="500" x:Name="mainCanvas">



    </Canvas>

</UserControl>



The Code Behind


using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;



namespace SilverlightApplication7

{

    public partial class MainPage : UserControl

    {

        Canvas dragcanvas;

        bool isDragging = false;

        private Point clickPosition;



        public MainPage()

        {

            InitializeComponent();

            // draw the Grid

            double canvasHeight = 500;

            double canvasWidth = 500;

            for (double x = 1; x < canvasHeight; x += 10)

            {

                mainCanvas.Children.Add(new System.Windows.Shapes.Line()

                {

                    X1 = 0,

                    X2 = canvasWidth,

                    Y1 = x,

                    Y2 = x,

                    Stroke = new SolidColorBrush(Colors.LightGray),

                    StrokeThickness = .50

                });

            }



            for (double x = 1; x < canvasWidth; x += 10)

            {

                mainCanvas.Children.Add(new System.Windows.Shapes.Line()

                {

                    X1 = x,

                    X2 = x,

                    Y1 = canvasHeight,

                    Y2 = 0,

                    Stroke = new SolidColorBrush(Colors.LightGray),

                    StrokeThickness = .50

                });

            }

            // Add  a canvas to test the Drag Drop & Snap To Grid

            // You can use any Control to drag and drop



            dragcanvas = new Canvas() { Background = new SolidColorBrush(Colors.Yellow) };

            dragcanvas.Height = 30;

            dragcanvas.Width = 200;

            // Setup Events for Drag & drop

            dragcanvas.MouseLeftButtonDown += new System.Windows.Input.MouseButtonEventHandler(dragcanvas_MouseLeftButtonDown);

            dragcanvas.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(dragcanvas_MouseLeftButtonUp);

            dragcanvas.MouseMove += new System.Windows.Input.MouseEventHandler(dragcanvas_MouseMove);

            mainCanvas.Children.Add(dragcanvas);

            // Border

            Border border = new Border()

            {

                BorderThickness = new Thickness(1),

                BorderBrush = new SolidColorBrush(Colors.Black),

                Height = 31,

                Width = 201,

                Padding = new Thickness(5)

            };

            dragcanvas.Children.Add(border);

            // Text Block

            border.Child = new TextBlock() { Text = "Drag Me Around and Snap to Grid!!!" };

        }



        private void dragcanvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

        {

            var draggableControl = (Canvas)sender;



            if (isDragging)

            {

                Point currentPosition = e.GetPosition(mainCanvas);

                double xPoint = currentPosition.X - clickPosition.X;

                double yPoint = currentPosition.Y - clickPosition.Y;

                Canvas.SetLeft(draggableControl, xPoint);

                Canvas.SetTop(draggableControl, yPoint);

            }

        }



        private void dragcanvas_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {

            isDragging = false;

            var draggableControl = (Canvas)sender;

            // When Mouse is released get tthe position and snap to the nearest 10 Pixels

            Point currentPosition = e.GetPosition(mainCanvas);

            Canvas.SetLeft(draggableControl, Roundoff(currentPosition.X - clickPosition.X));

            Canvas.SetTop(draggableControl, Roundoff(currentPosition.Y - clickPosition.Y));

            draggableControl.ReleaseMouseCapture();

        }



        private void dragcanvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {

            isDragging = true;

            var draggableControl = (Canvas)sender;

            clickPosition = e.GetPosition(draggableControl);

            draggableControl.CaptureMouse();

        }



        private double Roundoff(double points)

        {

            return Math.Round(points / 10, 0) * 10;

        }

    }

}