Drag and Drop Simple Game in Silverlight 2.0

Hi All,

If you want to see the capabilities of Drag and Drop in Silverlight 2.0, Here is a simple Game which I tried.

While doing this demonstration I have used ,

1) Microsoft Expression Design 2.0.

2) Microsoft Expression Blend 2.0.

3) Visual Studio 2008.

You can try this now !! (Drag and Drop the Images Bellow and make my Picture)

Steps :

1) First take a Image which you like (I took a Tiger Image) in Microsoft Expression Design as shown bellow.

2) Then Slice the image as per your requirement.For Slicing you can use bellow tool.

3) Then export your slice in .JPG format.

4) Now, As you got slices of the image, Create Silverlight 2.0 Application using Microsoft Expression Blend 2.0.

5) Add all slices in the project which you have just created.

6) Change the Panel of Page.xaml from Grid to Canvas and arrange all Images as shown bellow.

7) Now you are ready with the design, let’s write the code to make this work. So, open the same project in Microsoft Visual Studio 2008 and open you Page.xaml.cs.

8) First job is to make these images display in random format. I have used a very simple logic here. But if you want you can choose your own logic. To do so, I have written few functions.

ImageSource[] imgs = new ImageSource[12];
private void RandamizeImages()
{
int j = 0;

FillArray();
for (int i = 11; i >=0; i--)
{
ImageSource source = GetImage(i);
SetImage(j, source);
j++;
}
}
private void SetImage(int i,ImageSource image)
{
switch (i)
{
case 0:
Slice1.Source = null;
Slice1.Source = image;
break;
case 1:
Slice2.Source = null;
Slice2.Source = image;
break;
case 2:
Slice3.Source = null;
Slice3.Source = image;
break;
case 3:
Slice4.Source = null;
Slice4.Source = image;
break;
case 4:
Slice5.Source = null;
Slice5.Source = image;
break;
case 5:
Slice6.Source = null;
Slice6.Source = image;
break;
case 6:
Slice7.Source = null;
Slice7.Source = image;
break;
case 7:
Slice8.Source = null;
Slice8.Source = image;
break;
case 8:
Slice9.Source = null;
Slice9.Source = image;
break;
case 9:
Slice10.Source = null;
Slice10.Source = image;
break;
case 10:
Slice11.Source = null;
Slice11.Source = image;
break;
case 11:
Slice12.Source = null;
Slice12.Source = image;
break;
}
}
private void FillArray()
{
imgs[0] = Slice1.Source;
imgs[1] = Slice2.Source;
imgs[2] = Slice3.Source;
imgs[3] = Slice4.Source;
imgs[4] = Slice5.Source;
imgs[5] = Slice6.Source;
imgs[6] = Slice7.Source;
imgs[7] = Slice8.Source;
imgs[8] = Slice9.Source;
imgs[9] = Slice10.Source;
imgs[10] = Slice11.Source;
imgs[11] = Slice12.Source;

}
private ImageSource GetImage(int index)
{
return imgs[index];
}

9) Now call this RandamizeImages() function in the constructor of Page class.

public Page()
{
// Required to initialize variables
InitializeComponent();
RandamizeImages();
}

10) Now, If you try to run this application, you will see all images are getting rendered in Random order.

11) So now, let’s go and write our Drag and Drop logic which is the heart of this application.

12) First you need to declare few variables at class level as bellow.

public partial class Page : UserControl
{

bool IsDragging = false;
Point offset = new Point();
bool Flag=false;
Image img;

13) On every image which you took, you have to write three events as bellow:

a) MouseLeftButtonDown.

b) MouseMove.

c) MouseLeftButtonUp.

private void Slice_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
img = ((Image)sender);
IsDragging = true;
offset = e.GetPosition(img);
img.CaptureMouse();
}

private void Slice_MouseMove(object sender, MouseEventArgs e)
{

if (IsDragging)
{
img.SetValue(Canvas.TopProperty, e.GetPosition(LayoutRoot).Y - offset.Y);
img.SetValue(Canvas.LeftProperty, e.GetPosition(LayoutRoot).X - offset.X);
}

}

private void Slice_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
IsDragging = false;
img.ReleaseMouseCapture();
Flag = false;

}

14) Now the last step is make

bool Flag=false; variable True in the constructor of you Page class and you are done.

15) Run your application and See you game is working :).

Enjoy !!!