Tim Huffam

Dotting the I and crossing the T of I.T.

  Home  |   Contact  |   Syndication    |   Login
  153 Posts | 0 Stories | 2422 Comments | 653 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

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 05, 2008 12:24 PM

Feedback

# re: How to move/drag objects in Silverlight (2.0) 7/8/2009 9:48 AM sandeep pawar
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???

# re: How to move/drag objects in Silverlight (2.0) 3/17/2010 11:33 PM Chetan Desai
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

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

# re: How to move/drag objects in Silverlight (2.0) 8/20/2010 12:59 PM sema
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


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

# re: How to move/drag objects in Silverlight (2.0) 4/10/2012 4:50 PM Instagram For Android
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..


Post A Comment
Title:
Name:
Email:
Website:
Comment:
Verification: