Now, you want to see the ghost moving on the screen while the mouse pointer changes its position. In order to do this, we must add some code to show the ghost and to move it. We will add both XAML and C# code as follows:
1. Stay in the
SilverlightMonsterproject.2. Open the XAML code for
MainPage.xaml(double-click on it in the Solution Explorer) and replace the existing code with the following:<UserControl x:Class="SilverlightMonster.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml /presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Cursor="None" Width="1366" Height="768" MouseMove="Ghost_MouseMove" xmlns:SilverlightMonster="clr-namespace:SilverlightMonster"> <Canvas x:Name="cnvMovementTest" Width="1366" Height="768" Background="Bisque"> <SilverlightMonster:Ghost Canvas.Left="10" Canvas.Top="10" x:Name="ghost"/> </Canvas> </UserControl>
3. You will see the ghost appearing in the upper-left corner of the page in the designer.
4. Now, expand
MainPage.xamlin the Solution Explorer and openMainPage.xaml.cs(double-click on it). We need to add an event handler to move the ghost on the screen to the position where the mouse has moved.5. Add the following lines of code in the
public partial class MainPage : UserControlto program the event handler for theMouseMoveevent:private void Ghost_MouseMove(object sender, MouseEventArgs e) { // Get the mouse current position Point point = e.GetPosition(cnvMovementTest); // Set the canvas Left property to the mouse X position ghost.SetValue(Canvas.LeftProperty, point.X); // Set the canvas Top property to the mouse Y position ghost.SetValue(Canvas.TopProperty, point.Y); }6. Build and run the solution. The IDE will ask whether you want to turn on debugging or not. It is always convenient to click on Yes because you will need to debug many times. The default web browser will appear showing a bisque background and the ghost will move following the mouse pointer, as shown in the following picture:
The ghost appeared in the web browser and it moved through the bisque rectangle as if it were a mouse pointer. You created and ran your first Silverlight application in the web browser.
First, we changed the XAML code for MainPage.xaml. We made some changes to do the following:
Hide the mouse pointer (the cursor):
<UserControl x:Class="SilverlightMonster.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml /presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Cursor="None"
Specify width and height of 1366X768 pixels:
Width="1366" Height="768"
Indicate a
MouseMoveevent handler:MouseMove="Ghost_MouseMove"
Reference the
SilverlightMonsternamespace to allow access to the definitions specified in it:xmlns:SilverlightMonster="clr-namespace:SilverlightMonster">
Then, we added a Canvas named cnvMovementTest (with a 1366X768 pixels width and height), a bisque background, and an instance of Ghost (SilverlightMonster:Ghost) named ghost located in the point (10, 10) taking into account both the Canvas and its upper-left corner:
<Canvas x:Name="cnvMovementTest" Width="1366" Height="768" Background="Bisque"> <SilverlightMonster:Ghost Canvas.Left="10" Canvas.Top="10" x:Name="ghost"/> </Canvas>
Once the ghost was shown using XAML code, we had to program code for the event handler, which is triggered when the mouse moves on the main page's UserControl. We had indicated the MouseMove event handler as Ghost_MouseMove. For this reason, we defined a private void method with that name in the C# class MainPage, associated with the previously explained XAML.
As mentioned earlier, we defined the cnvMovementTest Canvas in the XAML section. The code in the event is very simple. However, it interacts with some elements defined in the XAML code.
The following line retrieves the mouse's current position as an instance of Point—a 2D vector, with two coordinates (X and Y):
Point point = e.GetPosition(cnvMovementTest);
Now we call the SetValue method for ghost (the instance of Ghost is already defined in the XAML section). We assign the values of the X and Y coordinates of the 2D vector to the Left and Top properties of the canvas containing the ghost illustration:
ghost.SetValue(Canvas.LeftProperty, point.X); ghost.SetValue(Canvas.TopProperty, point.Y);