Geeks With Blogs

Tim Huffam Dotting the I and crossing the T of I.T.
The following code shows you how you can make Silverlight controls/objects moveable by dragging them with the mouse.
Page.cs:
<UserControl x:Class="MovingObjs.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Border CornerRadius="10" x:Name="brdMovable" BorderBrush="Black" BorderThickness="2" Background="AntiqueWhite" Canvas.Top="100" Canvas.Left="10" MouseLeftButtonDown="brdMovable_MouseLeftButtonDown" MouseLeftButtonUp="brdMovable_MouseLeftButtonUp" MouseMove="brdMovable_MouseMove">
            <Grid x:Name="grid1" Width="300" Margin="5" >
                <TextBlock x:Name="txtBlkTest" Text="Test"></TextBlock>
            </Grid>
        </Border>
    </Canvas>
</UserControl>
Page.xaml.cs:
namespace MovingObjs
{
    public partial class Page : UserControl
    {
        private bool moving = false;
        private double offSetX;
        private double offSetY;
 
        public Page()
        {
            InitializeComponent();
        }
 
        private void brdMovable_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            moving = true;
            Point offset = e.GetPosition(brdMovable);
            offSetX = offset.X;
            offSetY = offset.Y;
        }
        private void brdMovable_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            moving = false;
        }
 
        private void brdMovable_MouseMove(object sender, MouseEventArgs e)
        {
            if (moving)
            {
                Canvas parent = (Canvas)this.brdMovable.Parent;
                Point p = e.GetPosition(parent);
                double x = p.X - offSetX;
                double y = p.Y - offSetY;
 
                txtBlkTest.Text = "X: " + x.ToString() + ", Y: " + y.ToString();
 
                this.brdMovable.SetValue(Canvas.LeftProperty, x);
                this.brdMovable.SetValue(Canvas.TopProperty, y);
            }
        }
    }
}
 
Posted on Wednesday, November 5, 2008 12:24 PM C# .NET , ASP.NET , Web Development, JavaScript & CSS , WPF & Silverlight | Back to top


Comments on this post: How to move/drag objects in Silverlight (2.0)

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
hi..
great example of dragging canvas in silverlight... but i had seen most of example which using javascript to do dragging object then wht is difference???
Left by sandeep pawar on Jul 08, 2009 9:48 AM

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
Hi
Huffam

Your post is very usefull but I having problem with that please help me out for the same.

Proble as following.

First time object is moving on canvas no prob but if you click again on the same object will push back to it's orignal place.

Please kindly do the needful & send me reply.

Thanks in advance.

Regards,

Chetan Desai
Left by Chetan Desai on Mar 17, 2010 11:33 PM

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
Hey, thanks for sharing the codes! I really need to learn these basic stuff.
Left by Drain Services on May 12, 2010 6:24 AM

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
is there anyway to move the text out of grid. the goal is to move textblock from a grid or data grid to canvas.

thanks
Left by sema on Aug 20, 2010 12:59 PM

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
hi i've implement same code..but it throws exception at this
Canvas parent = (Canvas)this.brdMovable.Parent;
so how can i solve this?
Left by devangi on Apr 04, 2012 12:20 AM

# re: How to move/drag objects in Silverlight (2.0)
Requesting Gravatar...
I will be quite absolutely your will be able to go through many different one of a kind stuff right here as opposed to person healthier!.... Also there may be a wide range of cosmetic symbolism that may be sometimes advanced, in some cases certainly not much too alright..
Left by Instagram For Android on Apr 10, 2012 4:50 PM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net