fignewtron was here

Portland Code Camp 2010 was last Saturday and I had the pleasure of being able to present a few findings.  Jesse Johnston and I teamed up to go over a few of the things we’ve learned about Windows Phone 7 development.  This was a talk about the state of the art today.  However, I expect the landscape to change quickly as development tools are being continually enhanced the closer we get to the public release of phones.

The slides and links to source code from the talk are available here.

Here are my notes about the demo application and a few of the Windows Phone 7 topics I talked about.

Design Guidance

• UI Design and Interaction Guide for Windows Phone 7 Series - http://windowsteamblog.com/windows_phone/b/wpdev/archive/2010/03/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx

• Application Platform Overview for Windows Phone 7 Series - http://download.microsoft.com/download/D/8/6/D869941E-455D-4882-A6B8-0DBCAA6AF2D4/Application%20Platform%20Overview%20for%20Windows%20Phone%207%20Series.pdf

• Programming Windows Phone 7 by Charles Petzold - http://download.microsoft.com/download/7/C/8/7C820C6F-C205-4ECF-B9F3-1505DD13F9BF/ProgWinPhonePreview.pdf

Controls - Panorama and Pivot - And Some Demo App Organization

MVVM Light - http://www.galasoft.ch/mvvm/getstarted/

This demo application uses a code pattern known as Model View View Model (MVVM).  Most of the community is in full support of using this pattern.  Laurent Bugnion is the author of this framework for using the pattern and he spoke at MIX 2010 about it.  The framework provides a set of project and item templates to install.  As well as some binaries that contain some important base classes. 

This demo application uses MVVM Light and it has a couple of enhancements to it.   In MVVM, essentially, there is little or no code behind in a page, only XAML.  A DataContext is applied to the View and that is the ViewModel.  The ViewModel contains everything (event handlers, methods, properties) that the View needs to bind to.  And the ViewModel handles construction and management of data of one or more Models.  You can take a closer look at MVVM Light and how it was used in the demo at the links above.

So, the demo application uses one version of something called the Panorama control.  This is a control widely demoed at MIX and during all of the initial Windows Phone 7 launches.  There is a similar control known as the Pivot control.  The main difference between Panorama and Pivot controls is the way that content does or does not run over into another section horizontally.  In other words, there is a fixed width for each section that fits in the screen for a Pivot control.  A Panorama control can have a detail section wider than one width of the phone screen.

There are several different implementations for the Panorama control.  It is assumed by many developers that a version of the control will be released from Microsoft.  I hope this is true.  Until then, you can choose from some good alternatives. 

• Travis Feirtag - http://www.devmobiles.com/articles/PanoramicForDevelopers.aspx

• Jocelyn Villaraza (Microsoft Innovation Centre Singapore ) - http://innovativesingapore.com/2010/03/panoramic-navigation-on-windows-phone-7-with-no-code/

• Erik Klimczak (Clarity Cosulting) - http://blogs.claritycon.com/blogs/design/archive/2010/03/30/building-the-elusive-windows-phone-panorama-control.aspx

• Roger Peters (Smarty Pants Coding) -  http://www.smartypantscoding.com/content/example-pivot-control-windows-phone-7

• stephancr - http://phone.codeplex.com/

We are using the CodePlex project version for the demo since it is maintainable and easy to use.  Also, orientationchanges are supported a bit better than the others.  If you want to get into styling the templates for the control, source code is provided.  Because this control is templated you can get away with copying the themes file (generic.xaml) from source code.  Then you can customize it in a phone project.  For example, if you wanted to set the Title section of the Panorama control to include an Image and some text, you could copy a template from the control source code into your phone project and make customizations to it from there.

One thing that is really nice in the phone control set is that anything using a ScrollViewer, like a ListBox, automatically has panning and flick gesturing applied to it.  Without writing any additional code.  There is a nice inertia animation that you get out of the box.

Application Bar

UX guidance recommends that instead of placing buttons for common tasks on each page, you can use the Application Bar.  There is a limit of 4 button items in the Application Bar.  The menu items, which are visible when the user clicks an ellipse symbol, are automatically put in a ListBox control. 

As Laurent points out in his post about the MVVM Light framework, the ApplicationBar is a control but the ApplicationBarItems are not.  This means that without a little help, you will be adding event handler code in the code behind of your view.  Fortunately, Jesse found a nice work around to the issue and it is available in the demo app source. 

A little tip is that button icons will rotate to match the phone's orientation.  But only if the orientation is supported on the page.  So, the SupportedOrientations property needs to be set to PortraitOrLandscape in order to see the icons rotate with the page.

Orientation

So for orientation I mentioned the SupportedOrientations property as it relates to icons.  When you set the property to PortraitOrLandscape, it will re-orient the controls on the page automatically.  The user interface that you designed for a Portrait layout will not always work the same or be a desirable layout in a Landscape orientation.  The phone page object has OrientationChanged and OrientationChanging events that you can use to change the states or layout of your UI.  And in there you can respond to the value by either setting up a visual state change, or manually setting some values on the view's visual elements. 

Emulator(s)

The Emulator is a virtual machine that runs an image of the Windows Phone 7 OS.  It is exactly the same experience that the developer will see on a real phone device.  The general idea is that a device is not required to do all of the development and testing work for a phone application.  Instead only hardware performance on a real phone device is worthwhile to test.  Until developers have devices to target software to, the emulator can be used with a high degree of confidence that the experience will be the same.

The Emulator is based on part on the capabilities of your host PC.  It is worth noting that if your video card does not have GPU acceleration, you might see a performance hit running the emulator.  Networking is enabled by default and is based on the network on the host PC.  So, if you are behind a firewall and have a proxy server, the phone emulator will also be behind those things.

To allow developers to start building Windows Phone 7 applications quickly, Microsoft released the first version of the phone emulator at MIX this year.  The first version was a "mini-UI" that only had IE7+ in it.  They weren't ready to show the rest of the applications and operating system so they weren't on the emulator initially. 

The next emulator appeared first on the xda-developers site.  Meaning, some folks took apart an existing ROM and unlocked some features.  It was build 6077 and was also known as the MIX 10 WP7 ROM.  That ROM was used for demos at MIX and included unlocked Zune Marketplace functionality as well as a lot of other apps.  Such as the phone Calendar and XBox Live demo application.

Close to April 30th, another unlocked ROM appeared with version 6177.  As of this writing, it is the latest version of the WP7 emulator that you can use to develop software on.  It includes the unlocked version of Office, a Zune hub, a Pictures hub, and again the XBox Live hub. 

There are two important reasons to use this latest ROM for developing phone apps.  (Read more from Justin Angel about this at his blog post here).  First, this ROM has a plethora of existing applications to better understand the desired user experiences.  The Office application shows off a nice Panorama control.  The People application shows off a Pivot control implementations.

The second and perhaps more important reason from a development point of view is that more capabilities and features are enabled.  A large majority of tasks and choosers are enabled.  For example, the EmailChooserTask allows an application to start up a contact list so the user can select an existing email contact.  There is a full list of tasks and choosers to start using here:      http://msdn.microsoft.com/en-us/library/microsoft.phone.tasks(VS.92).aspx

Finally, there is a lot of nice system information to be found in the latest emulator.  Find the application SystemInfo in the emulator and you will see a Task Manager.  When you click and hold on a process in the list, you can get to a nice Pivot control that shows a ton of information.  A details dashboard, threads, heaps, allocs, and modules.

There is a second screen within SystemInfo that you can get to by clicking the arrow on the upper right corner.  Go ahead and click on the "install shell chrome".  It will pop up a warning and confirming it will show a small arrow button in the top right corner of the emulator screen area.  Now from any running application on the phone you can turn on a few overlays like CPU, and memory monitors.  You can drag these around the screen so they are sort of out of the way.  There are a few more overlay items like this Spinner, a Free Memory graph, and Frames Per Second.

Summary

Portland Code Camp was a great event this year and it was fun to be able to speak at it.  There are some great resources for developing applications for Windows Phone 7.  The demo application we included for the talk hopefully goes a little beyond the typical “hello world” application.  You should be able to use MVVM Light and a few other gems in there to get started writing your own phone applications.

Minimum Requirements:

1. Visual Studio 2010 Express for Windows Phone
2. Windows Phone Developer Tools CTP - April Refresh
3. Silverlight 3 SDK
4. Silverlight 4 Toolkit April 2010
5. David Anson’s Developer Release bits for Silverlight 4 Toolkit charting
6. PowerShell script for the signed assemblies bug in the Windows Phone Developer Tools CTP - April Refresh

I’m on my first big project at my new post, Vertigo, as a Creative Developer.  Of course, it is a cutting edge project and it is going to be awesome.  And I can’t say anything more about the project.  But I can take a moment and hopefully help some of you out there writing or thinking about writing a Windows Phone 7 application.  Specifically, using the Silverlight Toolkit for Charting.

You’ll need the basic software to be able to write Windows Phone 7 applications.  While I won’t go into great detail about all of that, I will try to detail some of the steps for getting charts to work on your phone app.  You can read more about getting started on WP7 phone development here.  That covers the requirements 1 and 2 listed above.

Next you’ll need to make sure you have the Silverlight 3 SDK installed.  Get that here.  As David Anson explains here, the Silverlight 3 SDK contains the correct version for the base class of the chart Legend class.  Also, he reminds us that the Windows Phone 7 is based on Silverlight 3 with several Silverlight 4 feature sets added to it.

You will want to get the latest version of the Silverlight 4 Toolkit from CodePlex.  Go to the downloads page and get the recommended download (Silverlight_4_Toolkit_April_2010.msi).  This is mainly for using the samples and source code as a guide.

Definitely read David Anson’s blog post (above) about the Silverlight 4 Toolkit Developer Release that he maintains.  He’s got the correct version of one assembly you will need, System.Windows.Controls.DataVisualization.Toolkit.dll.  He explains that there is a bug that will be fixed in future versions of the Windows Phone 7 developer bits.  But for now he has a workaround.  You can download the sample code from his blog.

The last thing you’ll need is a PowerShell script that helps you work around a known bug in the Windows Phone Developer Tools CTP - April Refresh.  You can read the article for more detailed instructions here.

Ok, open up Visual Studio 2010 and create a new Windows Phone Application project.
 

You’ll see a nice design surface for the phone on the left and your XAML editor on the right for the MainPage.xaml.  You can leave that open for the moment while you get copies of the required files.  Open up the binaries folder of the Silverlight 3 SDK. That should be in a path similar to C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client.  Copy the assembly Silverlight.Windows.Controls.dll into the root of the new project you created in Visual Studio.  Next, open up the demo source code from David Anson’s blog (here) and copy the assembly System.Windows.Controls.DataVisualization.Toolkit.dll into the root of the project.  Do not use the version of that assembly found in the Silverlight 4 Toolkit April 2010 release.  David Anson’s version has a bug fix in it which is critical to using the charts on the phone.

Ok, now here is the fun part.  There is a known bug in the Windows Phone 7 Developer Tools CTP – April Refresh.  The issue is that any assemblies signed with a certification other than Windows Phone will fail to load.  This includes most Silverlight SDKs.  Again, you can read more about that here.  You’ll need to run the PowerShell script for the two files you just copied into your project before you reference them in the project.  One trick about this script file if you are running Windows 7 (and I suspect Vista too) is that you’ll need to go into the properties window of the file (right-click/Properties) and click the “Unblock” button.  Then click OK to close the properties window.  This will remove the block that the operating system puts on the script file.  Tim Heuer also blogged about the PowerShell fix here.

Take a moment to run the PowerShell script for those two assemblies.  If you did it right, you’ll see two new assembly files with the prefix “WP7_CTP_Fix_”.  If not, read the articles listed above for help on how to get that accomplished.

Ok, now we are almost in business!  Reference the two assemblies in your phone project.

The Silverlight 4 Toolkit comes with sample code.  You might want to unzip the source code for the toolkit and the samples.  You can also look at sample code here.  The one snippet of code that is useful for my post is this bit:

public class ObjectCollection : Collection<object>
    {
        public ObjectCollection()
        {
        }

        public ObjectCollection(IEnumerable collection)
        {
            foreach (object obj in collection)
            {
                Add(obj);
            }
        }
    }

For this example, I created a new class called “ObjectCollection” and dropped in the above code.  You’ll have to resolve the usings Collection and IEnumerable with the following:

using System.Collections;
using System.Collections.ObjectModel;

In the sample for the Silverlight 4 Toolkit, the Data Visualization tree node has a few simple graphs.  There are more complex examples available.  You can get the source xaml for one of the bar charts as follows:

<chartingToolkit:Chart Title="Column (Multiple)" LegendTitle="Legend">
    <chartingToolkit:Chart.Series>
        <chartingToolkit:ColumnSeries Title="Series A">
            <chartingToolkit:ColumnSeries.ItemsSource>
                <toolkit:ObjectCollection>
                    <system:Int32>1</system:Int32>
                    <system:Int32>3</system:Int32>
                    <system:Int32>5</system:Int32>
                    <system:Int32>2</system:Int32>
                </toolkit:ObjectCollection>
            </chartingToolkit:ColumnSeries.ItemsSource>
        </chartingToolkit:ColumnSeries>
        <chartingToolkit:ColumnSeries Title="Series B">
            <chartingToolkit:ColumnSeries.ItemsSource>
                <toolkit:ObjectCollection>
                    <system:Int32>2</system:Int32>
                    <system:Int32>4</system:Int32>
                    <system:Int32>6</system:Int32>
                    <system:Int32>3</system:Int32>
                </toolkit:ObjectCollection>
            </chartingToolkit:ColumnSeries.ItemsSource>
        </chartingToolkit:ColumnSeries>
        <chartingToolkit:ColumnSeries Title="Series C">
            <chartingToolkit:ColumnSeries.ItemsSource>
                <toolkit:ObjectCollection>
                    <system:Int32>4</system:Int32>
                    <system:Int32>3</system:Int32>
                    <system:Int32>2</system:Int32>
                    <system:Int32>5</system:Int32>
                </toolkit:ObjectCollection>
            </chartingToolkit:ColumnSeries.ItemsSource>
        </chartingToolkit:ColumnSeries>
    </chartingToolkit:Chart.Series>
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:LinearAxis Orientation="Y" Minimum="0" ShowGridLines="True"/>
    </chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>

Note the “chartingToolkit” and “toolkit” namespace references in that xaml.  Since you have a local ObjectCollection class, you can change the “toolkit” reference to “local” and add an xmlns statement at the top of the MainPage.xaml.  You’ll also need the namespace declaration for “chartingToolkit” and “system”. 

Like this:

xmlns:local="clr-namespace:WindowsPhoneApplication1"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:system="clr-namespace:System;assembly=mscorlib"

Copy/paste the xaml for the chart into the MainPage.xaml.  Find the Grid named “ContentGrid”.  You can drop the chart right inside that grid.  Go through and rename the “toolkit” references to “local” to match your xmlns statements at the top of the xaml.

You should now be able to see the chart in the designer, and run the application.  If you see errors during deployment of the application or when the application actually begins to run, you might want to go back through the steps above again and see if you missed something.  Otherwise, that is it! 

You can start writing charts for Windows Phone 7.  Look at the Silverlight 4 Toolkit samples page for guidance on creating more complex charts.

Special thanks to David Anson for his help and work to make this possible.  Check out his latest blog on phone charting here.

Here is the resulting chart on the Windows Phone 7 emulator: