1
2
3
4
5
6

Poll: Old VS New Look of the Windows Phone 7 Start Screen

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:

CodingTags: 

Using the Facebook Developer Toolkit With Windows Phone 7

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

Example Pivot Control for Windows Phone 7

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.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 3]

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.

Preview of My Current Windows Phone 7 Pivot Work

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.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 2]

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.

(click here to go to Vimeo and watch in HD)

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.

Creating a Windows Phone 7 Metro Style Pivot Application [Part 1]

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.

Metro Icons for Windows Phone 7

During the Windows Phone UI and Design Language session at Mix, the presenters talked about the Metro styled icons, and how applications of similar type should make use of the standard set of icons if possible. I had been hoping these icons would be released with the SDK, but I couldn't find them anywhere. It never struck me to just take them out of the powerpoint deck posted online (thanks for the suggestion Josh).

Windows Phone 7 Tools Are Here, Time to Get Crackin'

I just got back from 5 days in Vegas for Mix 2010 (where I was a top 5 tweeter). Hopefully by now you've watched the first day's keynote and seen some of the awesomeness unveiled. If not, I'd highly suggest checking it out for demos of Netflix, Four Square, graphic.ly, and other apps running on Windows Phone 7. You'll probably want to check out the sessions on the marketplace, the 'Metro' design, etc. but once you're done you'll probably want to get crackin' writing apps for Windows Phone 7, so I threw together a grab bag of handy links to get you started:

Windows Phone Developer Blog
Windows Phone 7 Series Forum
Community Resources for Windows Phone Development

Videos of MIX10 Windows Phone sessions
Windows Phone 7 Series UI Design & Interaction Guide
Free ebook: Programming Windows Phone 7 Series (DRAFT Preview)
Developing applications and games for Windows Phone 7 Series
Install checklist for Silverlight 4 RC, Blend 4 Beta and Windows Phone Developer tools from MIX10

While not directly related to Windows Phone 7 development, these other recent links can come in real handy when developing for Windows Phone 7 Series:
.toolbox - a cute site teaching basic design concepts
Silverlight Training Course (Silverlight 4)
Visual Studio 2010 XAML Editor IntelliSense Presenter Extension

It should go without saying, but my primary focus going forward right now is Silverlight development on Windows Phone 7 - I am sure I'll be posting quite a bit on it in the coming months.