Now, you want to see the ghost moving on the screen as an XBAP WPF application 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
SilverlightMonsterXBAPproject.2. Open the XAML code for
Page1.xaml(double-click on it in the Solution Explorer) and replace the existing code with the following:<Page x:Class="SilverlightMonsterXBAP.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml /presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Cursor="None"> <Canvas Width="1366" Height="768" MouseMove="Ghost_MouseMove" xmlns:SilverlightMonsterXBAP= "clr-namespace:SilverlightMonsterXBAP"> <Canvas x:Name="cnvMovementTest" Width="1366" Height="768" Background="Bisque"> <SilverlightMonsterXBAP:Ghost Canvas.Left="10" Canvas.Top="10" x:Name="ghost"/> </Canvas> </Canvas> </Page>
3. You will see the ghost appearing in the upper-left corner of the page in the designer.
4. Expand
Page1.xamlin the Solution Explorer and openPage1.xaml.cs(double-click on it). We need to add an event handler to move the ghost on the screen to the position to which the mouse has moved.5. Add the same lines of code previously explained for the Silverlight version in the
public partial class Page1 : Pageto program the event handler for theMouseMoveevent.6. Build and run the solution. The default web browser will appear showing a bisque background and the ghost will move following the mouse pointer. This time, it is running an XBAP WPF application, as shown in the following picture:
The ghost appeared in the web browser and moved through the bisque rectangle as if it were a mouse pointer. The application looked very similar to its Silverlight version. However, in this case, you have access to most of the WPF features and controls. You created and ran an XBAP WPF application in the web browser.
Note
XBAP WPF applications require more time to start than Silverlight applications. Therefore, we should not confuse Silverlight with XBAP WPF. They are two different technologies. However, we can transform a Silverlight application to an XBAP WPF application by making small changes to the source code, as shown in this example.
First, we changed the XAML code for Page1.xaml. We made some changes to do the following:
Hide the mouse pointer (the cursor) using the following code:
<Page x:Class="SilverlightMonsterXBAP.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Page1" Cursor="None">
Replace the Grid definition with a Canvas and indicate a
MouseMoveevent handler:MouseMove="Ghost_MouseMove"
Reference the
SilverlightMonsterXBAPnamespace to allow access to the definitions specified in it:xmlns:SilverlightMonsterXBAP="clr-namespace:SilverlightMonsterXBAP">
Next, we added a Canvas named cnvMovementTest with a resolution of 1366X768 pixels (width and height), a bisque background, and showed an instance of Ghost (SilverlightMonster:Ghost) named ghost located on the point (10, 10) by taking into account both the Canvas and its upper-left corner:
<Canvas x:Name="cnvMovementTest" Width="1366" Height="768" Background="Bisque"> <SilverlightMonsterXBAP:Ghost Canvas.Left="10" Canvas.Top="10" x:Name="ghost"/> </Canvas>
Once the ghost is shown using XAML code, we had to program the code for the event handler that triggered when the mouse moved on the main page's UserControl. We followed the same procedure previously explained in the Silverlight version of this application.
You receive an email from the game contest. They require each participant to send a Silverlight prototype of the first scene of the game without movement—a still snapshot.
Using the scalable vector graphics in an XAML format prepared for the Invader game, create a new Silverlight application that reproduces the first screen of the game with the aliens organized in five rows and eleven columns, the four tents, and the ship.
You can do it creating one UserControl for each vector graphics as we did for the ghost. Now, you can organize a nice Silverlight prototype by defining a Canvas for each alien and tent, and then for the ship using 2D coordinates.
1. When scaling raster digital assets:
a. Pixelation becomes easily visible.
b. Pixelation is no problem.
c. We must previously perform a conversion to XAML to avoid pixelation.
2. When scaling vector graphics:
a. We must previously perform a conversion to WMF to avoid pixelation.
b. Pixelation becomes easily visible.
c. Pixelation is no problem.
3. XamlPad is an utility whose main goal is:
a. To preview XAML content.
b. To convert WMF and EMF formats to XAML.
c. To test a Silverlight 3 application.
4. Silverlight 3 works great with raster digital assets in:
a. The TGA (Targa) format.
b. The PNG (Portable Network Graphics) format.
c. The XJT (Compressed XJT GIMP) format.
5. Silverlight 3 works great with vector graphics in:
a. The WMF (Windows Meta-File) format.
b. The CDR (CorelDRaw) format.
c. The XAML (eXtensible Application Markup Language) format.
a. A subset of WPF.
b. An extension to WPF.
c. A plugin to add more controls to the XBAP WPF applications.
7. XBAP WPF applications are:
a. The same as Silverlight applications (with just a different name).
b. .Net WPF applications that can run in a sandbox or inside a web browser with some security restrictions.
c. .Net WPF applications that can run on a desktop or in a web browser with no security restrictions.