How to drag images freely anywhere?

14 posts, 0 answers
  1. Saad
    Saad avatar
    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!
  2. Miroslav
    Admin
    Miroslav avatar
    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.
  3. DevCraft banner
  4. Saad
    Saad avatar
    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.

  5. Miroslav
    Admin
    Miroslav avatar
    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.
  6. Saad
    Saad avatar
    82 posts
    Member since:
    Oct 2008

    Posted 17 Dec 2008 Link to this post

    Now its giving xmlParseException on InitializeComponent();

    :(
  7. Saad
    Saad avatar
    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
  8. Saad
    Saad avatar
    82 posts
    Member since:
    Oct 2008

    Posted 17 Dec 2008 Link to this post

    pleaseee help me
  9. Miroslav
    Admin
    Miroslav avatar
    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.
  10. Saad
    Saad avatar
    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.
  11. Miroslav
    Admin
    Miroslav avatar
    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.
  12. venkat
    venkat avatar
    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
  13. Miroslav
    Admin
    Miroslav avatar
    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.
  14. Saad
    Saad avatar
    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.)
  15. Saad
    Saad avatar
    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.)
Back to Top
DevCraft banner