Day Long Silverlight Firestarter Streaming Live on December 2nd, 2010


A Cheat Sheet for Unit Testing Silverlight Apps on Windows Phone 7

I've been planning on writing a quick overview of the basics of unit testing in Silverlight for a while now. Since Windows Phone 7 is the hot topic now, and there are a few quirks with using the Silverlight Unit Test Framework with it, I figured now would be a good chance to write a blog entry covering both. If you're just looking for the cheat sheet relative to both Silverlight and WP7 unit tests, then skip the first section on setting up the test harness on WP7.

Setting up the Test Harness for WP7
To get started, you'll need the Silverlight Unit Test Framework tweaked for Windows Phone 7 from Jeff Wilcox's blog here. I've attached the binaries to this post as well (SL3_UTF_May.zip).

Once you have the binaries, you'll want to create a new test harness project. Do this by creating a new project in your solution of type 'Windows Phone Application'. In the sample attached to this post I'm calling my test project SampleTestProject.

Next, add references to the two Silverlight Unit Test Framework DLLs*:

* you will get a warning about referencing Silverlight 3 assemblies, click 'yes' when asked if you want to continue

Because of recent changes in WP7, you can no longer set the root visual in the App.xaml.cs like normal. Instead, you'll setup the test page in the Loaded() event of your MainPage.xaml.cs in your test project. The following code hides the SystemTray on the phone (the bar at the top of the screen) which otherwise would cover up the top of test results screen, and hooks up the back button to allow you to return back from drilling into test results.

using Microsoft.Phone.Shell;
using Microsoft.Silverlight.Testing;
void MainPage_Loaded(object sender, RoutedEventArgs e)
    SystemTray.IsVisible = false;

    var testPage = UnitTestSystem.CreateTestPage() as IMobileTestPage;
    BackKeyPress += (x, xe) => xe.Cancel = testPage.NavigateBack();
    (Application.Current.RootVisual as PhoneApplicationFrame).Content = testPage;            

(click 'read more' to keep reading..)

Animating a Silverlight Object's Embed Size Using jQuery or MooTools

One of the projects I'm working on right now requires having a Silverlight object on a page grow to be larger and shrink to be smaller as its containing <div> area's size is changed using javascript. Below is the Silverlight embed code, and the relative javascript for using either jQuery or MooTools. All the javascript functions take action on a div section named 'resizableControlHost' which I added to wrap the normal 'silverlightControlHost' div section.

Basic HTML of Silverlight object embed (wrapped in a 'resizableControlHost' div):

<div id="resizableControlHost">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
                width="100%" height="100%">
        <!-- details removed -->

Resizing the 'resizableControlHost' div with jQuery:

function gotoSmallSize() {
        width: "200px",
        height: "100px",
    }, 500);

(click 'read more' to keep reading..)

Quick Tip: Windows Phone 7 Preprocessor Directive

If you're sharing common code between Windows Phone 7 and other platforms in either Silverlight or XNA, then you may run into a need to fork some code based on the platform. This is normally done with a preprocessor directive, which for Windows Phone 7 is WINDOWS_PHONE.

A Simple Twitter Panel in Silverlight

While sitting on the couch last weekend, I had the idea for putting up a Twitter panel on my site - you should see it off to the right. I figured since this is a Silverlight site, that it might be nice to actually have some Silverlight on it. I got the Twitter panel mostly done in 2-3 hours, and ended up using a few Silverlight features I haven't blogged about yet on the site - hence this blog post.

This post contains:

  • Binaries for the Twitter panel so you can use it on your own site
  • Passing in startup parameters from the object embed code
  • A simple reusable Twitter assembly for Silverlight
  • Source code for the Twitter panel
  • Using Fluid UI to animate items added to the ListBox

(click 'read more' to keep reading..)

Awarded Silverlight MVP for 2010!

I am very excited to say that I've been awarded the 2010 Microsoft MVP Award in Silverlight! It is very humbling to now carry the same title as many of my peers from whom I've learned so much - and I still have much to learn from them. Thanks to those of you who've helped me achieve this great accomplishment.


Pre-Alpha Videos of My Windows Phone 7 Games in Development

It has been mentioned a few times in the last month or so that if you want a Windows Phone 7 test device, then you need to be showing why you deserve one. Most notably, Brandon Watson has laid out a post showing 2 such examples, and listing 6 suggestions of how to garner the @wp7dev team's notice. Well, I'm going to take those 6 suggestions, and respond to each - because I want a friggin' test device.

1) Get the tools and start building apps.
I am working on 3 games independently, as well as several at IQ.
2) Blog about your development progress. Screenshots and videos help a lot.
See #3
3) Tag posts with "Windows Phone 7 Development" or "wp7dev" so that we, and other developers, can find you.
Windows Phone 7 Posts on SmartyPantsCoding.com
4) Build something which extends the platform and can be used by other developers.
How to use the Facebook Developer Toolkit with Windows Phone 7
My Windows Phone 7 Pivot Control

5) Post videos of your apps running in the emulator to youtube
See new preview videos below (hopefully Vimeo is alright)
6) Register in the Windows Phone Marketplace.

To put things in context, I had no intention of posting any videos of my WP7 side projects anytime soon. I hope (read: pray) that folks watching these videos understand that both of these games are very much in the pre-alpha / proof-of-concept state at this point, and honestly any sort of feedback at this point would be very premature.

Pre-Alpha Preview Video of Matchingo 2
This first video showing Matchingo 2 is a very rough port of the original Matchingo - this game will be getting a complete frontend overall and hopefully some pretty cool additions. The UI in the video below is 100% temporary.

Pre-Alpha Preview Video of Hungry Castaway
This second video is showing Hungry Castaway, which is in the proof-of-concept stage as well. This is the game I have been working on in both XNA and Silverlight versions, which I've referenced recently. I spent quite some time evaluating Silverlight vs XNA for this game, but I have now chosen XNA and am back to focusing on functionality.

There is a third game I am working on for WP7 as well, however it is way too early to show anything. I also would love to port ImageWind.net to WP7 - but I have to get a better understanding of if such an app can make it through the app approval process. Now that a few of the cats are out of the bag, I guess I better get back to work.. ;)

June's Grab Bag of Fun

The last month or so has been pretty hectic both at work and in my personal life - but rather than make excuses or promise to blog more frequently, I'll instead just post a grab bag of random tidbits I've learned / come across this month.

First Screenshot of the Windows Phone 7 Launch Screen in Landscape

Original screnshot from CNET

Having played with the hacked emulator quite a bit I'd grown concerned at how few apps so far supported landscape orientation - including the main launch screen of the phone. I am pretty sure that this screenshot above is the first shot of the launch screen running landscape, which is nice to see. I am very hopeful that the WP7 team might update their Windows Phone 7 Series UI Design & Interaction Guide to discuss more about landscape orientations, and that more videos or screenshots might come out showing how native apps will handle this orientation.

Some New Understandings about the Visual State Manager in Silverlight
Two of the biggest issues I'd run into using the Visual State Manager was the inability to know when a state transition had completed, and the ability to query the current visual state. Thanks to this month's presentation at the Atlanta Silverlight Meetup by James Chittenden I now know the solution to both of these issues.

It turns out that in Silverlight 3 you actually CAN tell when a visual state transition has completed. I had asked around to several folks about this, so apparently I wasn't the only one in the dark on this ability. It is actually very simple. Supposing that the name of your visual state is 'MyState', attaching a completed event is as simple as attaching a completed event to the relative Storyboard:

MyState.Storyboard.Completed += new EventHandler(Storyboard_Completed);

New in Silverlight 4 is the ability to query the current visual state of your control. Supposing that the name of your visual state group is 'MyVisualStateGroup', you can check the current state like so:

string currentStateName;
if (MyVisualStateGroup.CurrentState != null)
    currentStateName = MyVisualStateGroup.CurrentState.Name;

Windows Phone 7 Development Continues...
Finally, I just wanted to point out that I am still working on Windows Phone 7 applications - both at work, and in my personal time. Brandon Watson and others have recently commented that developer devices will start rolling out in July, and that those who want a test device need to be showing off their work. I hope to post some information as to the initial apps/games I hope to have in the marketplace on launch soon - and if you want an early test device, I suggest you do the same.

Choosing Between Silverlight and XNA for a Windows Phone 7 Game

In my last blog post on XNA for Windows Phone 7 I said that I was working on a game in both Silverlight and XNA, and that if I got a chance to test out performance I would report back. As you can see in the image below, I got a chance to test out my Silverlight game on a real device last week at ReMIX Atlanta - so this post is to cover some insights gained.

me testing my game prototype on a Windows Phone 7 device

First off, if you are trying to get a basic understanding of when to choose between XNA and Silverlight for WP7, you should take a look at this post by Michael Klucher. Michael lays down the basic differences between the two platforms - Silverlight has great controls with great tool support for styling them, and XNA has a crazy fast sprite rendering pipeline which supports full 3D.

But, let's say that you don't need controls for your game, and you don't need 3D - is Silverlight good enough for writing a basic 2D game? After playing with a device briefly last weekend I can tell you the performance of Silverlight on the device looked great - but you will need to analyze the game you're creating a bit before making the ultimate decision.

(click 'read more' to keep reading..)