Debugging and solving the most common errors on Windows Phone


DebuggingFor some unexplainable reason often with software projects we get bugs, errors and things just don’t work as nicely as the marketing department claimed! ;) Luckily with Visual Studio you get some great Debugging tools, that work nicely with Windows Phone development, either on the emulator or on the device. In this post you’ll learn how to use some of the debugging capabilities and get familiar with some of the most common errors you get with Silverlight development on Windows Phone.

 

imageThis post is not about creating Windows Phone applications, it’s about fixing them :) This is why I’ll just provide you with a simple solution that you can use to debug. Download and open the solution in Visual Studio.

If you’re looking for guidance on how to create Windows Phone Applications you should check the Introduction to Windows Phone articles.

Using Breakpoints

Run the app (F5) in your emulator, you’ll see that you have a TextBox where you can type and a Button that will display that text in a MessageBox when clicked.

Let’s set a breakpoint before the MessageBox is shown. So open your MainPage.xaml.cs (don’t stop debugging) and navigate to an event handler called dialogButton_Click. To setup a break you just have to click on the far left side of the line where you want to set up a breakpoint. Click on the grey area on the far left side, on the row where it shows the MessageBox.

clip_image002

Now every time that row is about to execute you’ll hit that red breakpoint. Go back to your emulator and type something into the TextBox and then press “Show message”. You’ll hit the breakpoint you just set and you’ll be taken to Visual Studio. Now you can inspect the values of elements by moving your mouse over them like in the image below

clip_image004

To move to the next line of code press F10, if you want to continue executing the code press F5 and if you want to go deeper (for example in a method that’s about to execute) press F11. Press F5 to continue and go back to your emulator.

To stop debugging go to Visual Studio and from the toolbar selected Debug->Stop Debugging (Shift+F5).

Immediate Window

When you hit a breakpoint you can also execute some other code as well through the Immediate Window. So if you go and press the button again in your application you’ll hit the breakpoint. You can now use the CallStack window to see where did the call come from or use the Immediate Window to execute some code immediately. Inside the Immediate Window type

message.Text = "Changed from immediate window!";

and press enter.

Then press F5 to continue and go back to your emulator. Now you’ll see that the MessageBox is showing “Changed from immediate window!” and if you press ok you’ll see that the TextBox says the same thing. So with the Immediate Window you can change the values of elements when a breakpoint is hit.

Common mistakes and errors:

As you probably saw I also placed some other elements and sensors in the sample solution that you downloaded. This is to demonstrate the most common errors that new Windows Phone developers get.

Invalid XAML

Visual Studio and the design view are really good at catching XAML-errors before you build and start debugging your application, so most the errors get noticed before you start your app on the emulator. There are still some errors that Visual Studio won’t spot and I’ll show you one of these.

In your MainPage.xaml you have a ListBox that has some content inside it. Remove the comments around those lines and you’ll see that it appears correctly in the design-view. ListBox has content, those are controls (ListBoxItems) not just strings as we have over there.

If you run that application with the ListBox uncommented you’ll get an error like this one:

image

So even if Visual Studio doesn’t catch all XAML-errors before you deploy, it will still give you very detailed error descriptions. You’ll see that a file called MainPage.g.i.cs is opened. This is the file that InitializeComponent(); generates, the g in the name stands for generated ;) I suggest closing that file before you edit your MainPage.xaml, if you don’t it will just keep asking to be reloaded every time you make changes.

The point of this example is to show you what happens when you have invalid XAML, not how to fix that. Because the fix for that is simple, you could add a TextBlock inside your ListBox.

MainPage.xaml

<ListBox x:Name="myListbox">
    <TextBlock Text="This is some cool content I want to show!" />
</ListBox>

Navigation errors

Some errors like invalid XAML appear on a page and you get the error on the page that has invalid XAML. But what happens if you get an error that isn’t on a specific page, like navigating to a page that doesn’t exist? Then you’ll get your errors in App.xaml.cs

In our sample application we have a HyperLinkButton that navigates to another page called SecondPage.xaml, but if we click on that link we get an error in App.xaml.cs saying that navigation has failed? If you check your project you see that there is a SecondPage.xaml in the application. This is an extremely common error when you work with navigation. In your HyperLinkButton it says NavigateUri=”SecondPage.xaml”. We need to tell the system that it’s a relative URI, if we don’t it will fail navigating.

To fix that just change the NavigateUri to NavigateUri=”/SecondPage.xaml” and it’ll work nicely. Remember you can navigate back to the previous page by clicking the emulator’s back-button.

MainPage.xaml

<HyperlinkButton Content="Navigate to second page" NavigateUri="/SecondPage.xaml" />

signs-no-trespassing-generatorphpInvalid cross-thread access

This is an error that you get often when working with multiple threads in Silverlight. The error appears because you’re not in the UI-thread, but are trying to update something on the UI. On the phone some sensors like the accelerometer run on separate threads, this way the UI will remain responsive.

So if in our sample application you press Start accelerometer and emulate the accelerometer (move your mouse to the top-right corner and select Additional Tools and use the Accelerometer-tab).

If you look at the accelerationChanged event handler you’ll see that we try to directly change the TextBlocks properties. That event handler is in another thread, so we have to go back to the UI thread and update the Text-properties. To access the UI thread you can use the Dispatcher.

We have a UpdateUI-method ready on the page that basically does the same thing. It takes in x, y and z as parameters and updates the UI. So in your accelerationChanged use the Dispatcher to call that method and pass the x, y and z instead updating the UI directly in accelerationChanged.

MainPage.xaml.cs

private void accelerationChanged(object sender, SensorReadingEventArgs<AccelerometerReading> e)
{
    Dispatcher.BeginInvoke(delegate()
    {
        UpdateUI(e.SensorReading.Acceleration);
    });
}

Summary

That’s it for debugging this time, don’t worry you’ll have a lot more debugging in front of you ;) The point was to show you how to setup breakpoints and show you the most common errors you might get with Windows Phone development. You can now continue by creating bug-free applications, that’s easy…right?

About these ads

2 Comments on “Debugging and solving the most common errors on Windows Phone”

  1. Importing your solution gives these 2 errors. I can find the import statements at he csproj, but can’t figure out what to do with them? Is it because using VS express?

    1. C:\Users\**********\Documents\Visual Studio 2010\Projects\DebuggingWPApplications\DebuggingWPApplications\DebuggingWPApplications.csproj : error : Unable to read the project file ‘DebuggingWPApplications.csproj’.

    2. C:\Users\**********\Documents\Visual Studio 2010\Projects\DebuggingWPApplications\DebuggingWPApplications\DebuggingWPApplications.csproj(101,3): The imported project “C:\Program Files\MSBuild\Microsoft\Silverlight for Phone\v4.0\Microsoft.Silverlight.WindowsPhone71.Overrides.targets” was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.

  2. Jesse make sure you have Windows Phone 7.1 development tools installed, you can download them from http://create.msdn.com


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.