Over a million developers have joined DZone.

Build Your First Silverlight Application for Windows Phone 7

· Mobile Zone

Learn how to Deliver Better Mobile Apps Faster with Continuous Quality by managing the complexities of testing multiple devices and scenarios with this whitepaper from Perfecto Mobile.

Windows Phone 7 gives developers all the rich visual capabilities and design/code separation that WPF and Silverlight have grown to rely on. Whether you’re a Silverlight expert or new to Silverlight, this walkthrough will help you build your first Windows Phone 7 app, providing a jumping off point for your more sophisticated application concepts.

The latest version of Microsoft’s mobile platform gives Windows phone developers an entirely new playing field. The look is different. The phones are different. Even the name of the OS is slightly different – Windows Phone 7. The development experience, however, will be comfortably familiar to .NET developers in general and Silverlight coders in particular.

As with any device development effort, to make your app really sing you’ll want to tap into the mobile-specific features, such as:

  • Location Services
  • Push Notification
  • Accelerometer

However, even before getting into device functionality, you can apply your Silverlight skills to get a basic app up and running quickly.

For the following walkthrough, you’ll need to have these components installed, all of which are included in the Windows Phone Developer Tools package (except for the Framework):

.NET Framework 4

  • Visual Studio 2010 Express (this walkthrough uses C#)
  • Silverlight 4 Tools for Visual Studio
  • Windows Phone Emulator
  • XNA Game Studio 4.0 (not needed for this walkthrough)
  • Microsoft Expression Blend for Windows Phone

You can find this package and a ton of other useful information on Microsoft’s developer site.

Step One: Create the Basic App


The goal of this walkthrough is to get a basic Windows Phone 7 application up and running. From there you can dive into more advanced functionality. This app will let you select an image thumbnail from a list to see a larger view of it.

Once your Developer Tools Package is installed and ready to go, launch Visual Studio 2010 Express for Windows Phone and start a New Project. Select the “Silverlight for Windows Phone” template and choose “Windows Phone Application”.



If you’re already a Silverlight programmer, then right out of the gate your solution should feel familiar. As you can see in Figure 2, you have a XAML file already mocked up like a Windows Phone 7 app.



As with any of Visual Studio’s templates, you could technically run this right now, but just to test interactivity, add a button first. From the Toolbox, grab a Button and drag it to the middle of the canvas. In the Properties pane, change the button’s Content to “Click Me”. You should end up with something like this:



Double-click the button on the canvas. This generates a method stub for the Click event and takes you directly to it in the code-behind file for the canvas (the file is named MainPage.xaml.cs if you want to locate it in the Solution Explorer – it’s collapsed with MainPage.xaml). Add the following code:

MessageBox.Show("Clicked!");

Before you run the app, you need to do one more thing. Unfortunately, as great as these new tools are, they’re evidently not quite smart enough to recognize if you have a device plugged in. So you need to manually set your target to “Windows Phone 7 Emulator”.



Now you can go ahead and run the app (F5). If everything is wired up correctly, the emulator should launch with the app running. Click the button you added to make sure a message pops up.



Stop the application and go back to the code. Delete the button from the XAML canvas and delete the Click event from the code-behind.

Step Two: Create the Image Picker


On the XAML canvas, click on the words “MY APPLICATION”. Change the text to “DZONE DEMO APPLICATION”. Select the words “page name” and change that text to “image picker”.

From the Toolbox, drag an Image control onto the canvas. This will be the target image, so change the name of the control to imgTarget. Make it approximately 400 wide by 300 tall. You can set the dimensions exactly using the Width and Height properties. Make sure it’s in the top center of the content grid of the canvas. Change the Stretch property to “UniformToFill”. Normally you would set the Source property for the Image control as well, but not in this case.

Under imgTarget, add three smaller Image controls and name them imgThumb1, imgThumb2, and imgThumb3. Make them each about 100 by 80. You can use the guide lines to align the controls.

Click on imgThumb1 and select Source. Doing this serves triple-duty. First, you’re copying images from a source directory to the profile folder. Second, you’re creating a Resource library can be used throughout the app. Third, you’re assigning the images to specific Image controls. So for this first image, click Add and navigate to your Sample Pictures folder (or any other location that you want to grab images from) and select three images. You’ll see that all three get added both to the Solution Explorer and to the Images pane of the “Choose Image” dialog. On top of that, the Path now references your project resources and currently points to the first image:



Go ahead and click OK to accept the first image. Now when you select the Source for the second image, you can select it from the project resources. Do this for imgThumb2 and imgThumb3. Once all the images are selected, the canvas should look like this:



Click on each of the new images in the Solution Explorer. The Build Action for each one should be set to “Resource”. Change the Copy to Output property to “Copy if newer”.

Since the Image control doesn’t have the Click event handler implemented, you need to approach the problem a bit differently. Instead of Click, there is the MouseLeftButtonDown event that is triggered on initial object touch. Don’t get scared away by the term Mouse in the name – it will work fine both in the emulator and on an actual Windows Phone 7 device.  However, remember that this is a simple example.  For performance reasons, Microsoft recommends using manipulation instead of Mouse events.

Initially, open the XAML file for the working page and make sure that you reference the proper event handler in the markup:
<Image MouseLeftButtonDown="Image_MouseLeftButtonDown"></Image>
In the code-behind you can link it to an action:

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Uri uri = new Uri("/[solution name];component/Images/[image name].jpg", UriKind.Relative);

ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);

imgTarget.Source = newSource;

Your finished code should look something like this:

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 WP7SilverlightDemo
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}



private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Uri uri = new Uri("/[solution name];component/Images/[image name].jpg", UriKind.Relative);

ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);

imgTarget.Source = newSource;
}

private void btnThumb2_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri("/WP7SilverlightDemo;component/Images/Jellyfish.jpg", UriKind.Relative);

ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);

imgTarget.Source = newSource;

}

private void btnThumb3_Click(object sender, RoutedEventArgs e)
{
Uri uri = new Uri("/WP7SilverlightDemo;component/Images/Lighthouse.jpg", UriKind.Relative);

ImageSource newSource = new System.Windows.Media.Imaging.BitmapImage(uri);

imgTarget.Source = newSource;

}
}
}


Run the app and try it out. You should end up with something like Figure 8, with three responsive thumbnails:



Next Steps


Obviously the app in its current state leaves a lot to be desired. If you want to continue in this vein, here are some possibilities to explore in your next iteration:

Remove the btnThumb objects and use the Image control’s MouseLeftButtonUp event, instead
Collapse the three Click events into a single event handler that uses the thumbnail’s Image source
Add Orientation recognition and create a landscape version of the layout

Also be sure to read Colin Melia’s excellent Refcard for Windows Phone 7, which takes you through more device-specific functionality.

Do you know Why Apps Succeed? Perfecto Mobile analyzed over 1,000 responses to their Digial Quality Strategies survey and aim to answer the question, "Why do apps succeed?" in this exclusive report.

Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}