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.

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..)

Update 07/14/2010: With the latest Beta release of the Windows Phone 7 Tools there is now built in support for landscape games in XNA Game Studio 4.0. I just put it into my landscape game and it works great - it even automatically supports both landscape directions. Check out this article for details.

I've been working on a game in Silverlight for Windows Phone 7 (WP7), but I have started thinking I should have gone the XNA route. I am now trying to recreate the game in XNA so that once I can get my hands on a device I can figure out for certain if the Silverlight version can perform as well as the XNA version for what I'm trying to accomplish.

In getting started in XNA it took me a bit to figure out how to draw my sprites and game in the landscape orientation on the phone. I also thought it was a bit tough to add a frame per second counter, something I heavily rely on when developing for Silverlight - this blog entry will show how to accomplish both.

How to create a landscape game in XNA for WP7
Keep in mind that according to this article by Shawn Hargreaves there will eventually be built in support in WP7 for handling the landscape orientation - this solution is just a temporary solution until then. Also, keep in mind that things like the X and Y positions for mouse and touch events will need to be inverted as well to support landscape.

First, we are going to create a RenderTarget2D - this is basically a buffer we are going to render everything to before rendering this buffer to the screen at a 90 degree rotation. We also want to define variables for the width and height of the game window instead of relying on GraphicsDevice.Viewport since we are flipping the X and Y coordinates to make the game landscape.

private RenderTarget2D renderTarget; // what game world is rendered on before being rotated
private int GameWindowWidth; // the width of the game window we are rendering to 
private int GameWindowHeight; // the height of the game window we are rendering to

Setup the GameWindow variables in the Initialize() method:

GameWindowWidth = graphics.GraphicsDevice.Viewport.Height;
GameWindowHeight = graphics.GraphicsDevice.Viewport.Width;

Initialize our RenderTarget variable in the LoadContent() method:

renderTarget = new RenderTarget2D(GraphicsDevice, GameWindowWidth, GameWindowHeight, false, 
    SurfaceFormat.Color, DepthFormat.Depth16);

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

Ever since Long Zheng pointed out an alternate start screen for Windows Phone 7 I've been convinced that the older layout was the better layout. The blank area in the current start screen (example B) is referred to as the 'gutter' - but it seems to be inconsistent with the use of cutoff text in the rest of the experience. I want to see what other folks think, so click the image below and weigh in via a twitter poll on the subject:

A couple of people have noticed that the Facebook Developer Toolkit doesn't work on the current release of Windows Phone 7. The primary reason is that it has a dependency on System.Windows.Browser - a library which isn't in the WP7 runtime (Silverlight isn't hosted in a browser on the phone).

I took the source from the Facebook Developer Toolkit and hacked at it until I got it to work on the phone. Here is a quick demo showing it working in the WP7 emulator:

(click 'read more' for more on how this was done..)

I know I said I was done trying to recreate the Pivot control, but I'm happy to be able to share a standalone Pivot control that I've been working on. Keep in mind that a real Pivot control from Microsoft should eventually be released, so this control is not intended to be used in your final production code.

First, download the attached SmartyPantsPivotLibrary_Release1.zip, extract it, and add a reference in your project to SmartyPantsPivotLibrary.dll. Next, add a reference in your MainPage.xaml to the library like this:

xmlns:spcoding="clr-namespace:SmartyPantsPivotLibrary;assembly=SmartyPantsPivotLibrary"

Next, add an instance of the PivotControl inside of the ContentGrid in your MainPage.xaml:

        <Grid x:Name="ContentGrid" Grid.Row="1">

            <spcoding:PivotControl>

                <spcoding:PivotControl.PivotPages>

                    <spcoding:PivotPage PageTitle="main">                        

                        <spcoding:PivotPage.Content>

                            <TextBlock>main section goes here</TextBlock>

                        </spcoding:PivotPage.Content>

                    </spcoding:PivotPage>

                    <spcoding:PivotPage PageTitle="options">

                        <spcoding:PivotPage.Content>

                            <TextBlock>options section goes here</TextBlock>

                        </spcoding:PivotPage.Content>

                    </spcoding:PivotPage>

                    <spcoding:PivotPage PageTitle="about">

                        <spcoding:PivotPage.Content>

                            <StackPanel Orientation="Vertical">

                                <TextBlock>about section goes here</TextBlock>

                            </StackPanel>

                        </spcoding:PivotPage.Content>

                    </spcoding:PivotPage>

                </spcoding:PivotControl.PivotPages>

            </spcoding:PivotControl>

        </Grid>

As you can see by the XAML definition above, you are basically adding a PivotControl, and then populating PivotPages with multiple PivotPage entries. A PivotPage is defined as having a PageTitle property (what appears across the pivot menu across the top) and a Content property (what shows up in the main content area for each pivot page).

One other thing you may want to use are two events that tell you when the pivot pages are being dragged around - by listening to these events you can make sure the user doesn't accidentally click on something while changing pages (more on this in the video below):

MainPivot.PivotPageMoving += (s, e) => { _ignoreClicks = true; };

MainPivot.PivotPageDoneMoving += (s, e) => { _ignoreClicks = false; };

Below is a quick video showing how to use the control and discussing a bit more about it, you'll find the example project attached to this post:

As a side note, I have been unable to get this control to work in a large project I had already been working on - for some reason an unhandled Application level exception occurs after changing pages from time to time - unfortunately the exception provides no details and the call stack only shows internal methods. So, this control is provided AS IS - I won't really know how well this works until others try and use it. I also am not committed to maintaining this control, but if you improve on the code and would like to have the code posted updated please feel free to let me know.

This is part 3 - the final part - of how to create a Pivot style application for Windows Phone 7. Attached is the sample project and code for this example.

The screencast starts off in Blend and shows how to create the endless pivot menu across the top. After that the screencast dives into the code hooking up our new pivot menu and changing how the content area works. The last 15 minutes or so of the screencast is a bit long winded, but talks about issues you might run into when trying to use this code in a more feature rich application.

After using this method of creating a Pivot style application for a project for my employer, I've decided that hand rolling one of these things is way too much of a pain. I hope these videos will help those of you who can't wait for the real Pivot control release, but be aware that the devil is in the details for this approach - and there are a lot of little details. It's also worth noting that if I had to do it over again I may have made use of WriteableBitmaps to prevent some of the accidental interactions that can occur when you have interactive elements inside of a pivot page.

On a side note, while working on this screencast and trying to make use of the Pivot in an application I also attempted to create a standalone Pivot control. Unfortunately I could never get it quite stable enough, and after spending so much time on these screencasts I don't have any desire to revisit it and try to get it working - perhaps that will change if the real pivot control still hasn't arrived in another month or so. In the mean time, I've got some WP7 applications and games I want to get to work on.

I got some feedback after part 1 and part 2 of how to create a Pivot style for your Windows Phone 7 application - what I had created had a few issues. First, the pivot menu items across the top of the screen is supposed to be an endless scrolling menu. Second, there wasn't supposed to be an overlay of each pivot page on the edge like there is in the Panorama style.

I took a closer look at exactly how the Pivot control should look and interact. In the process I noticed that the Zune HD's pivot menu is actually different - it doesn't have an endless menu across the top. I also noticed that the menu on my AT&T U-Verse box uses the pivot style as well (not surprising, it runs on a Microsoft Media Room) - and it doesn't endlessly repeat either. The only way I could try and figure out exactly how it should look was by looking at the hacked ROM that showed up on the web right after MIX.

Above is a video of my current Pivot app (on right) working very closely to what can be found in the Photos application in the hacked WP7 ROM (on left). This was built by modifying the code from Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]. I was hoping to get the code posted before heading out of town, but there is still some tweaking left to do - I will be posting a part 3 sometime next week.

Note: It has been noted that this demo and code more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.

This is part two of how to create a basic Windows Phone 7 application that follows the Pivot style of navigation (you can find part one here). Part two of this screencast is focused on using manipulation events to provide gesture support for the Pivot style of navigation.

In the screencast I reference a few other posts on this same topic, you can check those out here:
[WP7] Create a panoramic view using Silverlight
Panoramic Navigation on Windows Phone 7 with No Code!

The code from this step of the app can be found here. Please leave any suggestions about the code and/or update it yourself - I may or may not be updating it going forward depending on other solutions that come about. I hope to continue similar screencasts over the coming weeks/months, and would definitely appreciate any feedback on how to improve these going forward.

Note: It has been noted that this screencast and part 2 more closely follow how to create a Panorama style application than a Pivot style application. I hope to fix that in the next part to this series - sorry for the confusion.