How to drag images freely anywhere? in UI for Silverlight DragAndDrop

Saad

82 posts

Member since:
Oct 2008

Posted 13 Dec 2008 Link to this post

I just want my pictures to load from database and make them draggable on my website. Dragging would be free, anywhere on page (not between controls). I am a new user of silverlight and dont know how to implement it. Please provide me a sample code of it so that i could do more with. I would learn two things from it:
1) How to interact silverlight application with database, and;
2) How make the loaded images draggable.

Please help!

Miroslav

Admin

922 posts

Posted 16 Dec 2008 Link to this post

Hello Saadi,

Here is what you may do:

Images in Slverlight are loaded with the help of the Image control, it has to be given the url of the picture to load. The url you provide can point to an address to your server which will retrieve an image from the DB and return it just as if it was a file.

There are plenty of resources on the subject so I will not dwell too much on that. There are some articles that can help you make your decision:

http://www.oracle.com/technology/products/intermedia/htdocs/why_images_in_database.html
http://blog.sqlauthority.com/2007/12/13/sql-server-do-not-store-images-in-database-store-location-of-images-url/
Some example code & ASP.net:
http://msforums.ph/forums/p/43405/229699.aspx
http://www.codeproject.com/KB/database/ImageSaveInDataBase.aspx

As for the drag/drop:

I created an example where thigs are dragged around in a Grid, today I modified it a little to work with a Canvas. This will be very simple drag-drop. You need to set the Canvas as a drop target, the image as a draggable object and then just do some math with the absolute position of the canvas, the relative position of the image and the current mouse position. This is the xaml:

    
            <UserControl x:Class="TestBench.DragDropCanvas" 
        
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:test="clr-namespace:TestBench" 
        
                    xmlns:dock="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking" 
        
                    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" 
        
                    xmlns:dragDrop="clr-namespace:Telerik.Windows.Controls.DragDrop;assembly=Telerik.Windows.Controls" 
        
                    xmlns:my="clr-namespace:TestBench" MinHeight="500" MinWidth="300">  
        
                <Grid x:Name="LayoutRoot" Background="BlanchedAlmond">  
        
                    <Canvas Background="BlanchedAlmond" x:Name="dropCanvas" 
        
                            dragDrop:RadDragAndDropManager.AllowDrop="True">  
        
                        <Image Canvas.Left="50" Canvas.Top="50" dragDrop:RadDragAndDropManager.AllowDrag="True" 
        
                                Source="/images/wizard.png" /> 
        
                    </Canvas> 
        
                </Grid> 
        
            </UserControl>

And the code-behind:

    
            public partial class DragDropCanvas : UserControl  
        
            {  
        
                public DragDropCanvas()  
        
                {  
        
                    InitializeComponent();  
        
                    this.dropCanvas.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));  
        
                    this.dropCanvas.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDropQuery));  
        
                }  
        
                private void OnDragQuery(object sender, DragDropQueryEventArgs e)  
        
                {  
        
                    if (e.Options.Status == DragStatus.DragQuery)  
        
                    {  
        
                        e.QueryResult = true;  
        
                        e.Handled = true;  
        
                    }  
        
                    if (e.Options.Status == DragStatus.DropSourceQuery)  
        
                    {  
        
                        e.QueryResult = true;  
        
                        e.Handled = true;  
        
                    }  
        
                }  
        
                private void OnDropQuery(object sender, DragDropQueryEventArgs e)  
        
                {  
        
                    if (e.Options.Status == DragStatus.DropDestinationQuery)  
        
                    {  
        
                        e.QueryResult = true;  
        
                        //Get the image:  
        
                        var image = e.Options.Source as FrameworkElement;  
        
                        //Get where the canvas is located relative to the root:  
        
                        var canvasPosition = dropCanvas.TransformToVisual(null).Transform(new Point(0,0));  
        
                        var mousePosition = e.Options.CurrentDragPoint;  
        
                        //Move the image accordingly:  
        
                        Canvas.SetLeft(image, mousePosition.X - canvasPosition.X - image.ActualWidth/2);  
        
                        Canvas.SetTop(image, mousePosition.Y - canvasPosition.Y - image.ActualHeight/2);  
        
                    }  
        
                }  
        
            }

I hope this will be enough to get you started,

Greetings,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Saad

82 posts

Member since:
Oct 2008

Posted 17 Dec 2008 Link to this post

Hey man these lines are giving me error

this

.dropCanvas.AddHandler(RadDragAndDropManager.DragQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDragQuery));

this.dropCanvas.AddHandler(RadDragAndDropManager.DropQueryEvent, new EventHandler<DragDropQueryEventArgs>(OnDropQuery));

Its saying that System.Windows.Controls.Canvas does not contain a definitrion for AddHandler.

Miroslav

Admin

922 posts

Posted 17 Dec 2008 Link to this post

Hi Saadi,

Yes, these are actually extension methods part of the Telerik.Windows this namespace, so it has to be included:

    
            using Telerik.Windows;

Sorry, I forgot to mention this initially.

Best wishes,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Saad

82 posts

Member since:
Oct 2008

Posted 17 Dec 2008 Link to this post

Now its giving xmlParseException on InitializeComponent();

:(

Saad

82 posts

Member since:
Oct 2008

Posted 17 Dec 2008 Link to this post

Hey man cant u send me the whole solution?
U know i am new to this silverlight thing and dont have much idea whats going on....plz help

Saad

82 posts

Member since:
Oct 2008

Posted 17 Dec 2008 Link to this post

pleaseee help me

Miroslav

Admin

922 posts

Posted 17 Dec 2008 Link to this post

Hi Saadi,

I have included the sample project.

Its xaml is very simple just a canvas and an image.

In the code-behind there are some routed event handlers. To learn more about routed events, you can refer to any information about the standard WPF implementation of routed events, also you can have a look at this post:

http://blogs.telerik.com/hristohristov/posts/08-07-23/Routed_Events_in_Silverlight_2.aspx

(It uses an older version of Silverlight, otherwise it is relevant).

Also, here is help for the DragDrop:

http://www.telerik.com/ClientsFiles/109360_RadDragDrop_Help_First_Draft.zip

A great resource for Silverlight information is

http://silverlight.net/

http://www.silverlightshow.net/

Kind regards,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

DragDropCanvas.zip

Saad

82 posts

Member since:
Oct 2008

Posted 17 Dec 2008 Link to this post

Hey THANKS alot man... :D
its great....now if i want to load images from database? I have already made a webservice in which i m getting images from database and saving them onto harddrive like in "C:\\Images\\", but dont know why it is not workin. Anyway so how could i load up those images saved on hardrive? And is there any possibility of making those drggable items to move with a little ease, that is when mouse drops an item it should stop after a while.

Miroslav

Admin

922 posts

Posted 18 Dec 2008 Link to this post

Hello Saadi,

Straight to your questions:

Silverlight has no direct access to the harddrive, so you cannot access information that is on the user's machine.

You have a file-open dialog with which you can ask the user to select image files and only then you will have access to them. Here is more information about the file-open dialog:

http://www.silverlightexamples.net/post/Open-File-Dialog-in-Silverlight.aspx

and about loading images from opened files:

http://impressionsoft.blogspot.com/2008/04/open-file-dialog-in-silverlight-20_26.html

Web service may not be the best way to serve an image, you need to retrieve the images from a database but expose them as a simple url that can be used in Silverlight. Unfortunately I cannot give you much guidance on that.

The example that I send you just "locks" he image while dragging, but wih a bit of maths you can add a delay effect, just replace this code:

    
            //Get where the canvas is located relative to the root:     
        
            var canvasPosition = dropCanvas.TransformToVisual(null).Transform(new Point(0,0));     
        
            var mousePosition = e.Options.CurrentDragPoint;     
        
            //Move the image accordingly:     
        
            Canvas.SetLeft(image, mousePosition.X - canvasPosition.X - image.ActualWidth/2);     
        
            Canvas.SetTop(image, mousePosition.Y - canvasPosition.Y - image.ActualHeight/2);

with whatever you would like to happen (e.g. the image lagging behind your mouse, etc). Using a Storyboard to animate the image is also an option.

Best wishes,
Miroslav
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

venkat

1 posts

Member since:
Jun 2009

Posted 17 Jun 2009 Link to this post

Hi

I just want to know how User should be able to (search for) load a previously saved project and edit it. on silverlight
pls can u help me. Am new to silverlight.

Thanks
Venkat

Miroslav

Admin

922 posts

Posted 21 Jun 2009 Link to this post

Hi venkat,

Are you referring to a VisualStudio project?

If this is the case, you can find your recenttly used projects under

File -> Recent Projects

in Visual Studio. Also, by default all projects are created under

My Documents\Visual Studio 2008\Projects

and this is where you will normally find them if you have created the project with File -> New Project... and you have not changed the default location.

Hopefully this will help you,

Kind regards,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Saad

82 posts

Member since:
Oct 2008

Posted 22 Jun 2009 Link to this post

Hi Venkat,

Well, you can have a list of projects recently been made and worked over in the list with the welcome page of Visual Studio, and other way is like as said. (And ofcourse you need to have Telerik for Silverlight Toolkit installed in order to open and edit silverlight enabled projects.)

Saad

82 posts

Member since:
Oct 2008

Posted 22 Jun 2009 Link to this post

Hi Venkat,

Well, you can have a list of projects recently been made and worked over in the list with the welcome page of Visual Studio, and other way is like as said. (And ofcourse you need to have Telerik for Silverlight Toolkit installed in order to open and edit silverlight enabled projects.)