on Windows Phone 7

Smooth…Springy…Scrunchy - WP7 List behavior

Anyone that has an iPhone has undoubtedly been delighted when scrolling through lists for the first time. Aside from the kinetic scrolling, the resistance and elasticity characteristics make for a really nice fluid user experience. These effects are partly based on basic physics principles and partly faked by the animation framework of the phone.

If you’re like me, you’ve probably driven yourself mad by pulling, pushing and flicking your phone to death trying figure out how to re-create these effects.

And if the inertia, elasticity, and resistance weren’t enough WP7 has introduced a new subtly that takes the delight one step further. The scrunch effect. (See video below) Not only does the vertical offset of the list change when you scroll past the end of it, the items within the list box also scale in size. This, for lack of a better label, creates a “scrunch” effect…where all the items appear to get squished together as you pull down the list.

Unfortunately, some of these subtleties don’t ship by default with the windows phone controls. So with some help from my college kmarshall we cranked out some of the interactions and packaged them up in a behavior.

Building it.

By default, the lists in the WP7 sdk have inertia built in so we don’t have to worry about that. However, to get the elasticity effect when scrolling past the end of the list we had to do some digging. In general, we transform the list’s Y-axis Position at a third the rate of the manipulation delta. Then on the manipulation completed event we just animate the list back to its original Y position.

Then to recreate the “scrunch” effect we scale each listbox item at a ratio that is proportionate to the cumulative manipulation on the Y-axis. The key to this effect is making sure the RenderTransformFromOrigin of the listbox item is at (.5, 1). This will ensure that the item will scale from the bottom and not from the center.

Putting this all together you get this:

DOWNLOAD THE CODE:  HERE

 NOTE: For added fun, kmarshall insisted this behavior work with virtualized lists…so it does.

UPDATE: I know I promised code for my WP7 jump list. Well…we are building the “real deal” for a project, so when I do release the code, it will be close to production quality. It will be worth the wait…trust me.

Cheers,

WP7 Gesture Recognizer and Behavior / Triggers

Here is a quick gesture recognizer I wrote for the Windows Phone 7.  You can use the gesture recognizer standalone in code and attach to a UI element or you can also use the behavior + trigger.  The behavior attaches the gesture recognizer to a UI element and then you can add triggers for specific gesture events like Tap, DoubleTap, etc.

Here is a copy of the code.

   1:  <Grid x:Name="ContentGrid" Grid.Row="1" Background="#FF1F1f1F" Opacity=".1">

   2:      <i:Interaction.Behaviors>

   3:          <ci:GestureBehavior EnableDebugMode="True" />

   4:      </i:Interaction.Behaviors>

   5:      <i:Interaction.Triggers>

   6:          <ci:GestureTrigger Gesture="Tap">

   7:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

   8:          </ci:GestureTrigger>

   9:          <ci:GestureTrigger Gesture="DoubleTap">

  10:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  11:          </ci:GestureTrigger>

  12:          <ci:GestureTrigger Gesture="TapAndHold">

  13:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  14:          </ci:GestureTrigger>

  15:          <ci:GestureTrigger Gesture="Flick">

  16:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  17:          </ci:GestureTrigger>

  18:          <ci:GestureTrigger Gesture="TwoFingerTap">

  19:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  20:          </ci:GestureTrigger>

  21:          <ci:GestureTrigger Gesture="Shape">

  22:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  23:          </ci:GestureTrigger>

  24:          <ci:GestureTrigger Gesture="PressAndTap">

  25:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  26:          </ci:GestureTrigger>

  27:          <ci:GestureTrigger Gesture="TwoFingerDoubleTap">

  28:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  29:          </ci:GestureTrigger>

  30:          <ci:GestureTrigger Gesture="TwoFingerTapAndHold">

  31:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  32:          </ci:GestureTrigger>

  33:          <!--<ci:GestureTrigger Gesture="Scale">

  34:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  35:          </ci:GestureTrigger>

  36:          <ci:GestureTrigger Gesture="Rotate">

  37:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  38:          </ci:GestureTrigger>

  39:          <ci:GestureTrigger Gesture="Pan">

  40:              <cmd:EventToCommand Command="{Binding GestureRecognizedCommand}" PassEventArgsToCommand="True" />

  41:          </ci:GestureTrigger>-->

  42:      </i:Interaction.Triggers>

  43:  </Grid>

I used MVVMlight in the sample to demonstrate how you can use the behavior/trigger to declare all the gestures in XAML without needed to wire up specific event handlers.  Initially I tried putting the triggers collection inside the behavior, but many existing trigger actions don’t work because they try to attach to the actual UI element and fail if they are declared inside the behavior.  The gesture trigger action looks for the gesture behavior attached to the element so there is only one gesture interpreter per element. Therefore you need the behavior on the element and a trigger for each gesture you want to handle.

The complete list of gestures recognized right now are:

Tap,
DoubleTap,
TapAndHold, (pressing and holding on an element for almost a second without lifting your finger)
PressAndTap, (press on an element and hold that finger while tapping with a second finger)
TwoFingerTap,
TwoFingerDoubleTap,
TwoFingerTapAndHold,
Shape,
Pan,
Flick,
Scale,
Rotate

To use some like rotate, press and tap or any of the other two finger gestures you’ll need a touchscreen or actual phone.  I haven’t use this in a real apps yet and it needs some more testing, but I think it’s a good start.  Performance in the emulator varies on the quality of your touchscreen, but it seems to work really well on an actual phone.  The Shape gesture is based on the $1 gesture recognizer at http://depts.washington.edu/aimgroup/proj/dollar/  I adapted the code to work on WP7.  Right now it just recognizes circle, rectangle, pigtail, check and question mark. You can use the sample app on that page to generate xml files to load any new / other shape gestures; there are already a bunch more included but the code needs to be altered to raise the events. I’m not sure how useful some of the shape gestures are but it seemed cool if you could recognize a question mark and pop up a help menu or use a lasso gesture to select multiple items. The scale/rotate/flick/pan gestures just return some arguments that can be used by some other code to actually manipulate the items.  Laurent Bugnion has a nice behavior specifically for manipulating items - http://geekswithblogs.net/lbugnion/archive/2010/07/12/multitouch-behavior-update-for-windows-phone-7-tools-beta.aspx  This code is more focused on determing the actual gesture performed like pan vs flick or tap vs tap & hold.

Feel free to take any pieces of the code if it’s helpful to use in your own stuff. At some point it would be nice if the actual events were just built into items since the UI guidelines for the phone specifically mention some of these like tap and hold, double tap.  Seems less efficient if everyone has to write their own code for taphold or doubel tap and the timings aren’t consistent between applications.

Also here is a video of a demo - http://dl.dropbox.com/u/254416/gestures.mp4  It isn’t that exciting and you most likely need to just try it out instead.

“That’s a HUGE List!” - WP7 Jump List

If you have been tinkering around with the Windows Phone 7 SDK you’ve probably noticed a handful of controls that seem to be missing. The obvious ones are the Panorama and Pivot controls. Fortunately, the phone runs Silverlight, and most of the controls that are missing are relatively easy to build. In addition there are a handful of people in the Silverlight Community that have created their own panorama and pivot controls, including this one built by Clarity. And these on CodePlex.

WP7 Missing Control: WP7 Jump List

Today I would like to share some techniques I used in recreating the “jump list” functionality that is shown in the Windows Phone 7 Features Video.

To see this feature in action watch this video (around 00:50) : http://www.youtube.com/watch?v=wlJ_fLPpmdM

The List

Some of Silverlight’s built in functionality made building this control a cinch. The basic List box scroll functionality in the WP7 SDK has touch and inertial already built in, so I didn’t have to do any physics or manipulation coding to get the smooth scrolling (like the back in the day with WPF). Phew…that gets us half way there.

Ironically, one of the challenging features was figuring out how to dynamically add the “touch tiles” into the list of contacts.

After I thought about it for a little while, I decided to go the brute force method and just use a nested ItemsControl (see below). I’m sure there are many different/better approaches to go about this, but that’s the beauty of Silverlight.

Flipping Tiles 

The flipping of the jump tiles is easily done utilizing the Perspective 3D features. Check out this link for more information on how to use Perspective 3D.

First I added a User control that examines the underlying data list and generates a “jump tile” for each of the letters in the alphabet. Then to get the disabled visual style on the letters that didn’t have any entries I used a Value Converter that checks the count of the list and sets the IsEnabled Property accordingly.

Smooth Scroll List

First I added a dependency property that is linked to the ScrollToVericalOffset method on the scrollviewer. Because there is no VerticalOffset dependency property on scrollviewers in SL, we can simply create one to enable binding and animation, etc.

Then, once we know which letter to scroll to we can use the ever-so-handy TransformToVisual method to find the absolute position relative to the list of items. The transformToVisual method returns a MatrixTransform that gives us the Y-offset value and we simply plug that into the “to” value of the animator.

To do the actual animation I used the Artefact animator framework. I’ve recently, been playing around with it and I must say its pretty awesome. . The framework is inspired by the flash community and offers up Tweener like functionality for Silvelight. If you haven’t seen this before I recommend checking it out.

Commands and Behaviors

One of the challenges I faced when building this control was communicating between user controls in the visual tree. For this, I used the MVVM light toolkit. available HERE: . This toolkit simplifies some of the pains in adhering to the MVVM pattern. Specifically, the RelayCommand and the EventToCommand behavior came in handy for achieving the desired results.

Source Code

I’ll post the source code for this shortly. I need to clean it up a little bit and make it Blend happy (blendable?) . Stay posted for more WP7 goodness…

Cheers,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

Building CTA Bus Tracker for WP7 – Part 1

Lots of public transit users at Clarity, and we’ve been working on a WP7 bus tracking app for both CTA and BART (San Fran’s mass transit agency and home to Clarity’s west coast spread) for several months…several years if you count Steve Holstad’s excellent (and since retired) WhereTheEl crowd-sourced transit tracking app and numerous not-quite-ready-for-prime-time prototypes on the iPhone. We were saving up our latest effort as the basis of a multi-post guide to developing a WP7 app, what happens when the developers start before the designers but Matt Hidinger’s post about *his* cool WP7 bus tracking app pushed up our publication date! Looks like we’re playing Elisha Gray to his Alexander Bell. Fortunately, I think this town is big enough for the both of us…

So here’s post 1.

The “Design Last” Approach

Being a full service creative and engineering shop we have a myriad of projects and timelines to hit. We win projects that require engineers and designers to work independently and simultaneously.

In a perfect world, our team could go through a process of brainstorming, info-architecture, wire framing, user testing, skinning, iterating…etc. before executing on that vision. In reality, we almost never get to work within a timeline (or budget) that allows us to stretch the design process until every pixel is perfectly placed. Such is life.

Sometimes, the development staff – often as a part of learning new technology – start building apps against the latest API or platform and come to the design staff: “I have this great app, but it could use some design love”. This is what we call the “Design Last” approach. The team jumps into skinning/styling within the constraints of the app’s functionality. We don’t skip the usability/IA aspects, but we do them in the opposite order and with a different context.

I’m not necessarily promoting a “Design Last” philosophy, but it often helps getting prototypes and proof of concepts out the door, and all the design in the world can’t predict the “right” answers to some software problems. Fortunately, the Microsoft development stack makes this type of work relatively painless.

Bus Tracker v.00001

With the all the hype of the WP7 platform our engineers have been pumping out some really cool stuff.  Several months ago, the CTA released an official API. Some of our developers went to work, and we find ourselves in the “design last” approach. Below is a video showing an early release of a bus tracker proof of concept. In the following posts I’ll walk through the process of transforming this functional application into a WP7 app and how we meld in the Metro design, information architecture, usability concepts, etc.

Key Features

Some features we’ve been kicking around that will hopefully find their way into the final release of the app:

• View all routes, or routes near your current location using WP7’s location API
• Glance-view live tiles for saved stops arrival times (stops you use frequently)
• “My Ends” - Find your way to a destination. Choosing “home” will find the nearest stop to your current location and find the fastest bus route(s) to your destination.
• Ability to show all stops, or stops nearest you
• Traffic and Transit alerts
• A Compass to help you orient yourself

Sneak peak of Part 2

In my next post, I’ll highlight some of the key steps taken during the design phase and how they aligned with the heavily transit inspired “metro” design principals. And I’ll give my unbiased opinion on why I think WP7 is the BEST platform for the CTA bus tracker.

Below are a couple of images of some of the initial wire framing and flow documents that will eventually become the blueprint for the enhanced functionality and interaction.

CTA RIDERS:  What is one feature that you wish you had in your existing CTA app?  Your feedback could find its way into the next WP7 CTA app…

Best,

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

Powermote: WP7 remote control for PowerPoint

This is a preview of a quick app I built for Windows Phone 7 to remotely control a PowerPoint presentation from a WP7 device.

The app consists of a PowerPoint add-in that hosts a WCF service. The add-in creates a ribbon menu item to connect to the phone. Clicking “Connect to Phone” sends a push notification to the phone via the Microsoft Push Notification Service. The phone then sends a request to the WCF service hosted in PowerPoint to request data about the presentation along with URIs for the slides images that the add-in saves out as thumbnails. It’s definitely easier to build office add-ins with VS2010 and Office 2010.

On the phone you can use a swipe gesture or the buttons to change slides . It also includes a timer and displays the notes for the slide. Here is video of the application controlling a presentation.

[ higher quality video]

I have several other applications in the works that have a similar model of WCF services and push notifications. One is for remotely controlling media center (or streaming media center content to the phone) and the other is a collection of browser add-ins that push links to the phone and hyperlinks phone numbers to enable dialing through the phone from your desktop.

Windows Phone 7 + Azure….and a couple of nuggets…

I recently gave a talk about Windows Phone 7 at a Bizpark Camp in San Francisco.  The camp had two focuses: Azure and Windows Phone 7.  My presentation covered WP7 portion of the camp.  During my presentation I highlighted the phone platform and talked about some of the differentiators from design, technology and a business standpoint. 

Whenever I watch presentations or go to tech meet-ups I feel like I get the most value when I can walk away with a few “nuggets” that I wouldn’t necessarily have known about otherwise.  That said, I tried to add a few resources into my presentation that should be helpful when building WP7 apps.     

Nuggets

Seeing that the camp was focused on Azure and WP7 I decided to augment my presentation with a code sample.  The intention was to give some insight on how to approach building WP7 applications that talk to Azure.  Some colleges of mine here at Clarity have posted a sample on codeplex focused on getting up and running with WP7 and Azure..you can check it out HERE.   The project is not a “hello” world app, and is targeted at people who have some experience with the platform and a working knowledge of silverlight.

Also, during my presentation I mentioned some limitations with the current phone sdk.  Our sample code on contains work-arounds for the following:

#1 Panorama Control

#2  “Tilt” effect

#3   Animating Frame

#4   Sample architecture (leveraging MVVM light)  and coding patterns. 

Note: For the sample phone project we used an azure token that will expire in the next couple of months.  When that happens…in the downloads section of the codeplex project there a link to a local development fabric that can be used for local development

Presentation

Admittedly, the slide deck is pretty design heavy, and doesn’t contain much text.  This was semi-intentional to encourage people to come out to the camps and hear it first hand.  There is some additional info found the “notes” of the PPTX. 

Don’t forget to check out the full presentation at the Chicago Bizspark Camp on May 21st here at the Clarity Office.  Or on June 4th in  Los Angeles.

You can DOWNLOAD the Slides here:  PPTX  |  PDF or view it inline below. 

Cheers!

Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

Windows Phone 7 Design Template

Expression Blend is a wonderful design environment for WP7 (Windows Phone 7) but for quickly visualizing a concept nothing beats Illustrator! I am excited about WP7 and decided that having a solid .ai template would prove invaluable. Some of the details of the WP7 UI Design and Interaction Guide are a bit fuzzy (literally) but I was able to generate some useful layout guides, character styles, and symbols. While the template does not cover every aspect of the guide I think it is a good launching point; if you find it useful and extend it please share your updates (I created the template in CS4, if you have problems in earlier versions let me know).

The difference

So with the CTP tools available, we’ve been building a few apps, just to get a feel for the tools and what’s supported in the framework.  What’s been great is that everything is fairly familiar and consistent, largely to do with the .net framework and Microsoft’s focus on providing good tools.  We’ve produced mobile applications, mostly in concept form, for Windows Phone Classic, iPhone and Android but never so quickly and not of such high quality and visual impression.  I attribute some of this obviously to our familiarity to the Microsoft platform and tools.  Though when you look at the designs our team has produced, it becomes clear that this is not just another mobile application container.

The Metro design language as expressed by the phone, exemplifies content prominence with fluid motion and transitions, with a crisp font and easily organized features and services placement.  In addition to a purposeful right edge tease, where the intent is for users to discover new premium content and services.   The concept that enables this is called hubs, building application with hubs changes your thinking from a single mobile application task, to thinking creatively about a mobile experience. It’s engaging to think of the other brands and industry verticals that will take advantage of this core feature.  Combine this with Windows Phone 7 live tiles, more on that later, and you have a recipe for a solid mobile services platform.

This so much more fun and liberating than my icon on a grid…

Building the Elusive Windows Phone Panorama Control

When the Windows Phone 7 Developer SDK was released a couple of weeks ago at MIX10 many people noticed the SDK doesn’t include a template for a Panorama control.   Here at Clarity we decided to build our own Panorama control for use in some of our prototypes and I figured I would share what we came up with.

There have been a couple of implementations of the Panorama control making their way through the interwebs, but I didn’t think any of them really nailed the experience that is shown in the simulation videos.  

One of the key design principals in the UX Guide for Windows Phone 7 is the use of motion.  The WP7 OS is fairly stripped of extraneous design elements and makes heavy use of typography and motion to give users the necessary visual cues.  Subtle animations and wide layouts help give the user a sense of fluidity and consistency across the phone experience.  When building the panorama control I was fairly meticulous in recreating the motion as shown in the videos. 

The effect that is shown in the application hubs of the phone is known as a Parallax Scrolling effect.  This this pseudo-3D technique has been around in the computer graphics world for quite some time. In essence, the background images move slower than foreground images, creating an illusion of depth in 2D.  Here is an example of the traditional use: http://www.mauriciostudio.com/. 

One of the “animation gems” I've learned while building interactive software is the “follow animation”.  The premise is straightforward: instead of translating content 1:1 with the interaction point, let the content “catch up” to the mouse or finger.  The difference is subtle, but the impact on the smoothness of the interaction is huge.  That said, it became the foundation of how I achieved the effect shown below. 

 Source Code Available HERE

Before I briefly describe the approach I took in creating this control..and I’ll add some **asterisks ** to the code below as my coding skills aren’t up to snuff with the rest of my colleagues.  This code is meant to be an interpretation of the WP7 panorama control and is not intended to be used in a production application. 

1.  Layout the XAML

The UI consists of three main components :  The background image, the Title, and the Content.  You can imagine each  these UI Elements existing on their own plane with a corresponding Translate Transform to create the Parallax effect. 

2.  Storyboards + Procedural Animations = Sexy

As I mentioned above, creating a fluid experience was at the top of my priorities while building this control.  To recreate the smooth scroll effect shown in the video we need to add some place holder storyboards that we can manipulate in code to simulate the inertia and snapping.  Using the easing functions built into Silverlight helps create a very pleasant interaction. 

3.  Handle the Manipulation Events

With Silverlight 3 we have some new touch event handlers.  The new Manipulation events makes handling the interactivity pretty straight forward.  There are two event handlers that need to be hooked up to enable the dragging and motion effects:

the ManipulationDelta event :  (the most relevant code is highlighted in pink)

Here we are doing some simple math with the Manipulation Deltas and setting the TO values of the animations appropriately. Modifying the storyboards dynamically in code helps to create a natural feel….something that can’t easily be done with storyboards alone.

And secondly, the ManipulationCompleted event: 

Here we take the Final Velocities from the Manipulation Completed Event and apply them to the Storyboards to create the snapping and scrolling effects.  Most of this code is determining what the next position of the viewport will be.  The interesting part (shown in pink) is determining the duration of the animation based on the calculated velocity of the flick gesture.  By using velocity as a variable in determining the duration of the animation we can produce a slow animation for a soft flick and a fast animation for a strong flick.

Challenges to the Reader

There are a couple of things I didn’t have time to implement into this control.  And I would love to see other WPF/Silverlight approaches. 

1.  A good mechanism for deciphering when the user is manipulating the content within the panorama control and the panorama itself.   In other words, being able to accurately determine what is a flick and what is click.

2.  Dynamically Sizing the panorama control based on the width of its content.  Right now each control panel is 400px, ideally the Panel items would be measured and then panorama control would update its size accordingly. 

3.  Background and content wrapping.  The WP7 UX guidelines specify that the content and background should wrap at the end of the list.  In my code I restrict the drag at the ends of the list (like the iPhone).  It would be interesting to see how this would effect the scroll experience.  

Well, Its been fun building this control and if you use it I’d love to know what you think.  You can download the Source HERE or from the Expression Gallery

 Erik Klimczak  | eklimczak@claritycon.com | twitter.com/eklimcz

Windows Phone 7 Chicago devcamp

As you may have guessed from our home page, Clarity is based in Chicago and so I try to keep my ear to the streets on what’s going on locally related to Windows Phone 7.  On April 10th the first midwest Windows Phone 7 devcamp is taking place, with a contest to determine the best Windows Phone 7 application.  Microsoft will first give a presentation on the tools and then the cage comes down, with developers and designers glued together to build the best  Windows Phone 7 experience… at least on that day.

Event info:

When: Saturday, April 10, 2010 @ 8:30am – 6:30pm 

Where: ITA, 200 South. Wacker drive, Chicago, IL. (map)

Register here

See you there and good luck…

TechCrunch WP7 4sqaure luv

This doesn’t happen often but the folks over at TechCruch gave Window Phone 7 some love, specifically MG Siegler.  Though I consider him a Google head, he gave credit where credit is due.

Check it out…Windows Phone 7 Destroys The iPhone (Well, Its Foursquare App Does)

Hello

Today we launch our Windows Phone 7 blog, in addition to announcing our Windows Phone 7 practice during MIX10 and Microsoft announcing Clarity Consulting as an early development partner.  More details here and here…  This blog will offer a variety of perspectives, related news and feature some of our early work around Windows Phone 7.  We will try to keep it balanced but we like to build things so you may notice our code slant…

Thanks and keep watching…