Clickable DragSource and Target Images

Jun 15, 2009 at 12:07 PM
Edited Jun 15, 2009 at 12:16 PM

Kevin, 1st of all thanks for sharing this great Silverlight Manager with us!

I got started on Silverlight a few months ago, and are still trying to understand it all. I have a question, and hope it is feasable with the control.

I need to make the dragsource a clickable image. What I want to do is the following; create images of 1,2 or 4 U equipment (e.g.Blades) that can

be dragged to the dragtarget. The dragtarget reperesents a 19inch rack, where you can drag the equipment to. I am using your example as a starting point.

I started out modifying the DragSourceContent.xaml;

<UserControl x:Class="SL_Drag_Drop.DragSourceContent"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="100" Height="100">
    <Grid x:Name="LayoutRoot" Background="#FFEEB99D" Margin="5">
        <Button Content="{Binding DummyText}" FontSize="22" Click="Button_Click">
        </Button>
    </Grid>
</UserControl>

This gives me clickable Buttons with text (that can be set with the DummyText property in the sucDragDrop0.xaml.cs file), however I can't seem to get an Image as the Button background....

Can you give me directions? Am I on the right track by modifying the DragSourceContent.xaml like this, or should I create a Control in the sucDragDrop0.xaml.cs file?

Regards, and keep up the good work!

Stephen

Coordinator
Jun 15, 2009 at 3:27 PM

Hello,

 

thanks for the compliments! :-)  I think your question is more of a general silverlight-question than a question that's related to the dragdropmanager, but I'll try and help you out :-)  If I understand correctly, you want an image as button content, right (stretched over the complete button)?  Well, in Silverlight, the button can contain about anything... Text, Images, whatever.  In my example, the content of the button is some text, "DummyText".  You could, however, make the content into an image, like this:

 

<Button>
<Button.Content>
<Image Source="imagesource"/>
</Button.Content>
</Button>

=> imagesource is the URL of your image, or a path to it.  To use binding on this, you might want to add a new property to the class you're using as datacontext, containing the path to the image.  When you've done that, you can bind the Source-property to that new property in your class.

As far as using the DragSourceContent.xaml-control is concerned: I just used this as an example to show that a dragsource can have content.  You're free to keep on using it, you can also set the content of a dragsource directly, or in code, or in XAML.  Lots of possibilities ;-)  I'd advise you to have a look at Silverlight.net: they have some great video tutorials concerning some general principles, databinding & datacontext.  They don't use this dragdropmanager of course, but all those principles can be used on the dragdropmanager as well - you'll be coding your equipment rack in no time! :-)  

If you need more help, feel free to let me know!