Windows Phone 7 How-To Index

October 27 2010

Here’s a cheat sheet quick guide to a bunch of great MSDN resources on Windows Phone 7 development.

Making The SelectedItem Shrink When Pressed in a ListBox For Windows Phone 7

October 21 2010

There’s a nice effect in many of the shell apps of Windows Phone 7 where, when pressed, the selected item of text in a listbox shrinks slightly.  I wanted this effect in my listbox and used Blend to do it. It ends up looking like this when you press it but before you lift your finger off. Simple, but an effect UX technique. It ends up looking like this when your finger is on the item:


Here’s what I did:

  1. Created a ListBox
  2. Rightclicked the ListBox and selected “edit additional templates” and then “edit generated item container”
  3. Selected the ContentContainer
  4. Went to states and selected “MouseOver” (this is kinda funky ‘cause the phone doesn’t really have a MouseOver state, but it does have a pressed state, which they are calling MouseOver)
  5. Went to the transform properties of the ContentContainer and changed the scaleX and scaleY to .9 and also changed the center point to 0,0.
  6. Walla!

Download the project if you’d like. Or just grab this style style that generated below.

  1. <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
  2.     <Setter Property="Background" Value="Transparent"/>
  3.     <Setter Property="BorderThickness" Value="0"/>
  4.     <Setter Property="BorderBrush" Value="Transparent"/>
  5.     <Setter Property="Padding" Value="0"/>
  6.     <Setter Property="HorizontalContentAlignment" Value="Left"/>
  7.     <Setter Property="VerticalContentAlignment" Value="Top"/>
  8.     <Setter Property="Template">
  9.         <Setter.Value>
  10.             <ControlTemplate TargetType="ListBoxItem">
  11.                 <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
  12.                     <VisualStateManager.VisualStateGroups>
  13.                         <VisualStateGroup x:Name="CommonStates">
  14.                             <VisualState x:Name="Normal"/>
  15.                             <VisualState x:Name="MouseOver">
  16.                                 <Storyboard>
  17.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  18.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  19.                                     <PointAnimation Duration="0" To="0,0" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  20.                                 </Storyboard>
  21.                             </VisualState>
  22.                             <VisualState x:Name="Disabled">
  23.                                 <Storyboard>
  24.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
  25.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
  26.                                     </ObjectAnimationUsingKeyFrames>
  27.                                     <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
  28.                                 </Storyboard>
  29.                             </VisualState>
  30.                         </VisualStateGroup>
  31.                         <VisualStateGroup x:Name="SelectionStates">
  32.                             <VisualState x:Name="Unselected"/>
  33.                             <VisualState x:Name="Selected">
  34.                                 <Storyboard>
  35.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
  36.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
  37.                                     </ObjectAnimationUsingKeyFrames>
  38.                                 </Storyboard>
  39.                             </VisualState>
  40.                         </VisualStateGroup>
  41.                     </VisualStateManager.VisualStateGroups>
  42.                     <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
  43.                         <ContentControl.RenderTransform>
  44.                             <CompositeTransform/>
  45.                         </ContentControl.RenderTransform>
  46.                     </ContentControl>
  47.                 </Border>
  48.             </ControlTemplate>
  49.         </Setter.Value>
  50.     </Setter>
  51. </Style>

A Browse Icon For Windows Phone 7 AppBar

October 19 2010

There’s a lot of great icons that ship with Blend for Windows Phone 7. But there isn’t a ‘browse’ icon, like a globe. So, @systim came to the rescue and made one for me. Perhaps others can use it. Here’s what it looks like:


But don’t download that; you’ll want to grab the image below, because it is the transparent png in white that will work in either light or dark theme – clever how windows phone transforms the appbar icons to black on the fly!

Download icon

Conditional Logic During Start Up of a Windows Phone App

October 18 2010

Just managed to get myself into (and out of) a gnarly situation with Windows Phone. Here’s the scenario: I needed to execute some conditional logic to show different screens at start up in my Windows Phone app.  Basically, if the user was already logged in, bounce them to homepage; otherwise send them to the log in screen.

My first stab was to check for if they were logged in during the log-in screen and redirect them. Bad UX with that though: you can’t navigate until the NavigationService is available, which isn’t until the UI is loaded, which means the user briefly sees the login screen. Ugly.

Second stab was to add a page that simply displayed the splashscreen.jpg in which the conditional logic was executed.  So, I had a page with nothing but a splashscreen and then, in the OnNavigatedTo event, I checked to see if they were logged in.  Seemed to be working, until I discovered that the user could never navigate backward out of the app, because whenever they hit that page, the app attempted to navigated them forward. Lesson learned? Don’t add navigation logic to the OnNavigatedTo event or else backward navigation is hosed.

I then discovered Peter Torr’s excellent framework for redirecting an initial navigation.  I implemented this, which puts all this logic in the Navigating event of the application class. That solved my navigation problem, but introduced a new problem: because my application uses the Share Picker extensibility for Windows Phone, I needed access to the NavigationContext querystrings, provided by the static method that hangs off of the PhoneApplicationPage object. For the life of me, I couldn’t figure out how to access this class, since all you can get at is the PhoneApplicationFrame when in the application class.  But, then I learned that NavigationContext is just a wrapper around the URI and I could simply get the URI out of the NavigatingCancelEventArgs as e.Uri and process the querystrings myself.

Oh, one other thing to remember when messing around in the Navigating event: be sure to set e.Cancel to true or else your overridden navigation won’t ever happen.

AI->Canvas: Generating HTML5 canvas code from Adobe Illustrator

October 13 2010

Mike Swanson is the man when it comes to getting artwork out of Adobe Illustrator and into a format usable by the browser. His first go at this was the AI->XAML plug-in, a widely used plug-in by graphic designers building assets for WPF and Silverlight projects. Well, now he’s back with another plug-in, this time for the HTML5 <canvas> tag. It’s called (not surprisingly) AI->Canvas. Same idea, but even better, because he’s taken this one to the next level. Not only will he export the asset; he also has all these clever little macros that enable transformation and animation of the asset. Super sweet. There’s tons of great tutorials and documentation up at Mix Online on how to use it, so don’t be intimidated.

Oh, and a shout out to @Systim, who built all the lab pages for the AI->Canvas lab on Mix Online. View source and you’ll see all HTML5. Rad!

Windows Phone 7 XAML Design Templates

October 4 2010

Just got turned on to the Windows Phone 7 XAML Design Templates.  These are essential.  The Blend team have done the hard work to figure out all the common layout scenarios and provide templates for usage.  This makes doing layout for Windows Phone 7 apps brain dead easy. Love it.  Here’s a pic to give you a sense; video below.


Get Microsoft Silverlight

iPhone and iTouch Support For BlogEngine.NET

September 30 2010

BlogEngine.NET does a great job with mobile devices, rendering its content with a default skin whenever it detects a mobile device. Unfortunately, this behavior doesn’t work on the iPhone or iTouch. However, the fix is easy. Simply add iphone and ipod to the BlogEngine.MobileDevices key in web.config, as follows:

<add key="BlogEngine.MobileDevices" value="(iphone|ipod|nokia|sonyericsson|blackberry|samsung|sec\-|windows ce|motorola|mot\-|up.b|midp\-)"/>

Once you’ve done this, the default mobile theme will render on the iPhone and iTouch.

If you are looking for even a prettier theme   I also found the BETouch iPhone theme, which looks great. Simply add the theme to the themes directory and then change the mobile theme to BETouch in admin settings.

I’m now using it for this blog!


Windows Phone Developer Tools Hiccup, Links

September 20 2010

Installed the Windows Phone Developer Tools. Then tried to run the emulator and it failed with “Error: Connection failed because of invalid command-line arguments.” The solution? (1) Reboot. (2) Run as administrator.

Also been reading Creating High Performing Silverlight Applications for Windows Phone. Awesome content. Tons of ideas and information. Essential reading.

Lastly, just starting to dive into the Microsoft Advertising SDK for Windows Phone 7. Documentation is on the web here.  Could be promising.

Screencast On Creating jQuery Animations Without Code

August 12 2010

Check out this post by my designer colleage, Tim Aidlin, on how to use Glimmer to create jQuery animations, in this case the hero graphic up at Here's the screencast itself:


Oomph artwork
You need Silverlight to view this video. It’s fast, it’s free and it’s awesome. Click here to get it.

Windows Phone 7 Development Tip: Discovering and Using Default Styles

August 10 2010

I was playing around with the Windows Phone 7 tools and noticed that there are some system styles available for text.  For example, I noticed the following XAML that referenced PhoneTextTitle1Style in one of the Visual Studio project templates:

            <TextBlock x:Name="ListTitle" Text="{Binding LineOne}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

I then wanted to figure out what all the system styles were.  How to do it? Expression Blend!  By going to the Assets tab and then clicking Styles --> System Styles, I was able to see all the styles:


I then wanted to see what they looked like, so I double clicked each one, which created a textbox. To correlate the look with the name, I replaced the default text with the name of the style, producing this:


Perhaps this graphic/tip will help someone out there!