This is a migrated thread and some comments may be shown as answers.

How to drag images freely anywhere?

13 Answers 298 Views

DragAndDrop

This is a migrated thread and some comments may be shown as answers.

13 Answers, 1 is accepted

answered on 16 Dec 2008, 04:58 PM

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.

answered on 17 Dec 2008, 03:36 PM

DragDropCanvas.zip

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.

answered on 18 Dec 2008, 11:42 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

How to drag images freely anywhere?

13 Answers, 1 is accepted