Silverlight Games: Add Images and use the mouse to move images - Building games based on Silverlight and Expressions - Site Home

Moving images in Silverlight is pretty simple, the code works on the phone as well as on the web. Here is the simplest code I could come up with:

Create a canvas
Create a border for each image (for simplicity)
Add images
Add mouse events (for both phone and web, but it won’t work on a real phone)
Add variables
Add C# events for the mouse events

Step 1 and 2, Phone Silverlight:

For phone Silverlight, copy and paste the code below into the initial XAML Page, this assumes a single page of XAML which is default named MainPage.XAML, this creates a canvas and three images, but you haven’t added the Images yet. This effort completes steps 1 and 2, make sure that the line (2)

x:Class=”PaddleMove.MainPage” stays the same as the namespace in your project or it will throw an error:

Code Snippet
 <phone:PhoneApplicationPage 
    x:Class="PaddleMove.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <Canvas x:Name="Layout" 
            Background="White">
 
        <Border x:Name="paddle1" 
                Canvas.Top="100" 
                Canvas.Left="10"
                MouseMove="paddle1_MouseMove"
                MouseLeftButtonDown="paddle1_MouseLeftButtonDown" 
                MouseLeftButtonUp="paddle1_MouseLeftButtonUp" 
                >
            <Image x:Name="Paddle1" Source="images/paddle1.png" Stretch="Uniform" ></Image>
        </Border>
 
        <Border x:Name="Paddle2" 
                Canvas.Top="100" 
                Canvas.Left="100" 
                MouseMove="paddle2_MouseMove"
                MouseLeftButtonDown="paddle2_MouseLeftButtonDown" 
                MouseLeftButtonUp="paddle2_MouseLeftButtonUp" 
                >
            <Image x:Name="paddle2" 
                   Source="images/paddle2.png" 
                   Stretch="Uniform" >
            </Image>
        </Border>
 
        <Border x:Name="Ball" 
                Canvas.Top="100" 
                Canvas.Left="150" 
                
                >
            <Image x:Name="ball" 
                   Source="images/ball.png" 
                   Stretch="Uniform" >
            </Image>
        </Border>
    </Canvas>
 
</phone:PhoneApplicationPage>
 

Step 1 and 2, Web based Silverlight:

For Web Based Silverlight, copy and paste all of the code below into the initial XAML Page, replacing all of the code, except for the first line, if you change the name of the class then the namespace has to be changed as well.

Code Snippet
 <UserControl x:Class="DragAndMove.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="200">
 
    <Canvas x:Name="Layout" 
            Background="White">
        
        <Border x:Name="paddle1" 
                Canvas.Top="100" 
                Canvas.Left="10"
                MouseMove="paddle1_MouseMove"
                MouseLeftButtonDown="paddle1_MouseLeftButtonDown" 
                MouseLeftButtonUp="paddle1_MouseLeftButtonUp" 
                >            
                        <Image x:Name="Paddle1" Source="images/paddle1.png" Stretch="Uniform" ></Image>
        </Border>
 
        <Border x:Name="Paddle2" 
                Canvas.Top="100" 
                Canvas.Left="100" 
                MouseMove="paddle2_MouseMove"
                MouseLeftButtonDown="paddle2_MouseLeftButtonDown" 
                MouseLeftButtonUp="paddle2_MouseLeftButtonUp" 
                >
            <Image x:Name="paddle2" 
                   Source="images/paddle2.png" 
                   Stretch="Uniform" >                
            </Image>
        </Border>
 
    </Canvas>
 

Step 3 Add Images:

To add the images do the following, select “Existing Item…” and go to the location where your images are located, this completes step 3:

Step 4: Add the “Code behind”, code is the same for both projects:

Cut and paste the code below, in the Web Silverlight you will need to change the “PhoneApplicationPage” to “UserControl”. Make sure that the namespace matches.

Bear in mind that the Phone App won’t be able to use the mouse on the real application, but for now, the mouse gives you feedback that you have operational code.

Code Snippet
 using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
 
namespace PaddleMove
{
    public partial class MainPage : PhoneApplicationPage
    {
        private bool moving = false;
 
        private double offSetX;
        private double offSetY;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void paddle1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Left mouse button clicked within border. start moving.
            moving = true;
 
            Point offset = e.GetPosition(paddle1);
            offSetX = offset.X;
            offSetY = offset.Y;
        }
 
        private void paddle1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            // Left mouse button release. Stop moving.
            moving = false;
        }
 
        private void paddle1_MouseMove(object sender, MouseEventArgs e)
        {
            if (moving)
            {
                // Get the new mouse pointer position
                Canvas parent = (Canvas)this.paddle1.Parent;
                Point p = e.GetPosition(parent);
                double x = p.X - offSetX;
                double y = p.Y - offSetY;
 
                // Set the new position for the border control.
                this.paddle1.SetValue(Canvas.LeftProperty, x);
                this.paddle1.SetValue(Canvas.TopProperty, y);
            }
        }
 
        private void paddle2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // Left mouse button clicked within border. start moving.
            moving = true;
 
            Point offset = e.GetPosition(Paddle2);
            offSetX = offset.X;
            offSetY = offset.Y;
        }
 
        private void paddle2_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            // Left mouse button release. Stop moving.
            moving = false;
        }
 
        private void paddle2_MouseMove(object sender, MouseEventArgs e)
        {
            if (moving)
            {
                // Get the new mouse pointer position
                Canvas parent = (Canvas)this.Paddle2.Parent;
                Point p = e.GetPosition(parent);
                double x = p.X - offSetX;
                double y = p.Y - offSetY;
 
                // Set the new position for the border control.
                this.Paddle2.SetValue(Canvas.LeftProperty, x);
                this.Paddle2.SetValue(Canvas.TopProperty, y);
            }
        }
    }
}
 

That’s it, if you run the Windows Phone 7 App in the emulator, it should work. The same for the Web Silverlight.

If it doesn’t let me know. Leave a comment.