fignewtron was here

Tonight I had the pleasure of speaking at the Portland Silverlight User Group meeting.  My topic was Windows Phone 7 Hello World using MVVM Light (In the trenches).

I did what every speaker talking about code avoids. I wrote some code in front of everyone.  I think everyone would agree that restarting the Windows Phone 7 emulator between each application deploy takes some time.  So, when you are debugging phone applications from Visual Studio or Blend, try to remember that you don’t have to restart the emulator.  =)

The developer tools and resources - http://developer.windowsphone.com/
The application bar icons - http://bit.ly/awj2Bq
MVVM Light getting started guide - http://www.galasoft.ch/mvvm/getstarted/
Panorama and Pivot controls until we get them from Microsoft - http://phone.codeplex.com/

For those of you interested in looking at the source code you can download from the link below.  Also, here is a really cool technique for making planets spin without using 3D.

Check out all the new accent colors by navigating to Start/Settings/Themes:

While the emulator is running, click with your mouse on the page and press F10 or F9 on your keyboard.  The ringer volume selector should display.

Press and hold the Start button on the emulator to see how voice commands work!

Today the Windows Phone 7 Developer Tools (WPDT) were released to the public!  First let me say that I’m ecstatic about this release.  The emulator and phone API was improved so much.  Check out the release notes and you will see the differences.  But now for the tip.

Press the Pause/Break button when the emulator is running and you can use your computer keyboard for input instead of the emulator keyboard with mouse clicking.  This is a HUGE time saver if you want to test out your forms.  However, it comes with a bug.  It seems that orientation misbehaves after you press that button.

To reproduce:

1. Create a simple Windows Phone 7 project using the project template from the July 12 WPDT.
2. Add a TextBox to the MainPage.xaml.
3. Compile and run the application.
4. Set focus to the TextBox in the running application using your mouse.
5. Notice that the emulator on screen keyboard appears.
6. Press the Pause/Break button on your keyboard.
7. Notice that the emulator keyboard closes.
8. Begin typing using your keyboard to confirm the state change.
9. Click the orientation button for the emulator.
10. Notice the screen stays in the Portrait orientation that you started the application in.

Tim Heuer posted a nice intro video about setting up a splash screen in Windows Phone 7 applications here.  There is another how-to on customizing a WP7 Splash Screen from Page Brooks here.  Tim made a minor suggestion in the video to enhance the splash experience.

NOTE: There is a splash image that you must create when using the April CTP phone tools.  It goes at the root of the project and it should be named SplashScreenImage.jpg.  It must be marked as Content in Properties/Build Action. 

Here's the issue.  When you run an application in the phone emulator from Visual Studio, it seems like it takes no time at all to show the splash and then transition to the first page in your app.  In fact, it's so fast that it doesn't look like a useful user experience.  Fast loading applications are the goal.  But if you want to increase the time manually for the splash, and therefore show off branding work for the app, there isn't an easy mechanism to do so.  Unless you use an obvious trick.

So I wrote a little test application to show my splash branding image over a greater period of time.  The basic idea is to navigate to a page that only shows my application SplashScreenImage.jpg.  There are a couple of nuances to be aware of.  When an application starts up the SplashScreenImage.jpg is displayed with a simple "page flip" animation.  Once the application loads, the first page will appear.  So I wanted to reuse the same image file for the first page because it would flow seamlessly from the default image.  There is an opportunity to add custom animations on your custom SplashPage.xaml.  So for a geeky example, you could run a spinner animation or do something like the Star Wars opening crawl.

Here are my setup steps:

    1. Add a new page to the application and give it an obvious name like SplashPage.xaml.
    2. Change the default start page of the application to SplashPage.xaml.
    3. In SplashPage.xaml, add an Image control as the child of the LayoutRoot Grid.
    3. Set the Source of the Image to "/{namespace};component/SplashScreenImage.jpg", where you replace the text "{namespace}" with the correct namespace of the project.
    4. In the code behind, Splash.xaml.cs, use a DispatcherTimer to wait for a specific TimeSpan.
    5. When the timer completes, navigate to MainPage.xaml or another starting page for the application.
    6. Manage what happens when navigating back to the SplashPage.xaml for back button clicks.

Here is the XAML for SplashPage.xaml:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Image
        x:Name="imageSplashScreen"
        Source="/{namespace};component/SplashScreenImage.jpg"
        Stretch="Fill" />
</Grid>

Here is the code for SplashPage.xaml.cs:

public partial class SplashPage : PhoneApplicationPage
{
    public SplashPage()
    {
        InitializeComponent();
        _splashTimer = new System.Windows.Threading.DispatcherTimer();
        this.Loaded += new RoutedEventHandler(SplashPage_Loaded);
    }
    System.Windows.Threading.DispatcherTimer _splashTimer;

    void SplashPage_Loaded(object sender, RoutedEventArgs e)
    {
        if (_splashTimer != null)
        {
            _splashTimer.Interval = new TimeSpan(0, 0, 2);
            _splashTimer.Tick += new EventHandler(_splashTimer_Tick);
            _splashTimer.Start();
        }
    }

    void _splashTimer_Tick(object sender, EventArgs e)
    {
        _splashTimer.Stop();
        _splashTimer.Tick -= new EventHandler(_splashTimer_Tick);
        _splashTimer = null;
        NavigationService.Navigate(new Uri("/{namespace};component/MainPage.xaml", UriKind.Relative));
    }
}

Prevent users navigating back to SplashPage.xaml using the following code in MainPage.xaml.cs:

     protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
    {
        e.Cancel = true;
    }

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:

This morning I opened up my MIX 10k entry code and worked the pendulum class into a Behavior.  I can now drop the LateralPendulum Behavior on any Canvas.  The Behavior will animate the Canvas.Top and Canvas.Left properties of each Child element in the Canvas.  If more than one pendulum Behavior is attached to the Canvas, it adds up the X and Y calculations so that different types of pendulums can be simulated.  I have a test page for now.  The code needs some refactoring and that is more than I want to do on a Saturday morning.  So I'll have to post up the code and another post about it later. 

Here is the test page: Pendulum Behavior Test.  This shows an Ellipse set on a Canvas.  The Canvas has 4 LateralPendulum Behaviors attached which add up to represent a circular pendulum.  It seems to get close to 60 frames per second so I decided to make it look a little smoother by setting the MaxFrameRate to 30 and by tweaking the animation timer a little.

Here is a quick note about VS2010...there is a built in code snippet, propfull, that you can use to have the IDE create the backing variables for you.  In VS2008 I had to use my own code snippet that I called propf.  Now that is very cool that VS2010 has the snippet.  But a little bit creepy that it is so close to the one I used and it does exactly the same thing!!  Also, the nerd+art snippets for creating Dependency Properties in Silverlight/WPF seem to have some new cousins - propdp, and propa.