Page Transition Animations and Windows Phone 7

November 9 2010

So you want your Windows Phone 7 application to have nifty transitions similar to how the native apps on the phone work. Most commonly you see the turnstile effect or the slide effect.

4341.WpTkOct10_2D00_TransitionFrame[1]

With the Silverlight Toolkit for Windows Phone, it is pretty darned easy. Download sample code. Here’s how:

 

  1. Download and install the toolkit. It gets installed to C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll if you were wondering. It should automatically appear as an option  as Microsoft.Phone.Controls.Toolkit when you go to add a reference.
  2. Change your app.xaml.cs file in the InitializePhoneApplication() method so that RootFrame is of type TransitionFrame:
  3. Then, under the root element of each page (which should be <phone:PhoneApplicationPage> add the transition you want. You'll need to add the xmlns to dll, like this: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    1. If you want Turnstile transtion, it would look like this:
    2. If you want Slide transitions, it would look like this:

And that’s it! You can also play around with the other transition modes supported, which are roll, swivel and rotate.

Download sample code.

App Hub Problems Solved By Updated Terms of Service on XBox Live

November 4 2010

I was losing my mind trying to use the App Hub up here: http://create.msdn.com/en-US/

But, then I found this:

If you're an App Hub member, and are experiencing any of the following issues:

clip_image001 Inability to access the Windows Phone Dashboard

clip_image001[1] Inability to access the Xbox 360 Dashboard

clip_image001[2] Inability to review Xbox 360 games

A recent change to the Xbox LIVE service may be affecting you. With the launch of the new Xbox 360 dashboard experience today, Xbox LIVE users are being asked to review and sign an updated Terms of Use.

The App Hub membership gives you the opportunity to develop for both Windows Phone 7 and Xbox 360 Indie Games, so even if you are strictly a Windows Phone 7 developer, this change may affect you. If you experiencing any of the above issues, please follow these steps to sign the new Terms of Use and restore your ability to access App Hub:

1. Sign out of App Hub

2. Browse to http://www.xbox.com/

3. Click "Sign In", and sign in using the same Windows Live ID as you do to sign into App Hub

4. Sign the updated Terms of Use

5. Return to App Hub (http://create.msdn.com)

6. Sign back in using your Windows Live ID to continue using App Hub as normal.

 

And now all is happy.

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:

listbox

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:

browse

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.

mainandtemplates

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!

image

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.

VSAchievements
Visual Studio Achievements
Karsten Januszewski (207 Points)