New Windows Phone “How Do I” Video Series

Working on a few WP7 videos

“How do I…do something new in and cool in Windows Phone ‘Mango’? This is Adam Kinney for Microsoft and today we’re going to answer that question by…”

If you are new to Windows Phone 7 Development or you want to get a look at on e of the new features in action check out the new Windows Phone “How Do I” Video Series

Each 10-15 minute video focuses on a single topic and walks through an example of code. I had a lot of fun putting these together and I think the “Mango” update will be huge for Windows Phone 7 developers and users. They’ve thrown in some really nice new features in there like deep linking tiles, flipping notification tiles, sockets, local database and more OS integration with new tasks and access to contacts and appointments data.

Here’s the full list of videos:

Check if your WP7 app is a Bing Instant Answer

After reading through all of the Windows Phone 7 “Mango” documentation, this is one tip that stuck out as a simple but nice feature that I haven’t seen mentioned much.

Search on Windows Phone 7 “Mango” has been upgraded to include the concept of an App Instant Answer.

For example, you search for “xbox” and right inline with the results, in the prime top spot, is a link to Bing’s top WP7 app result for that search term.

From there you can tap the thumbnail to download or launch the app.

This new feature and the addition of quick cards is a nice example of how the WP7 team is focusing on improving the flow of using a mobile device. +1 for the deep integration between Bing and Windows Phone.

Now the nice thing is that when the app is launched, a parameter is passed via query string so that you can discover and track when your app has been opened using App Instant Answer.

You can easily grab the search term by using this code:

And you can debug your app in Visual Studio by updating the task in the WPAppManifest.xml file:

For a full tutorial on this topic see How to: Integrate with App Instant Answer for Windows Phone

Metro List View double line – from PSD to Silverlight

I was recently working on a Windows Phone 7 application where one of the goals was to be very true to the Metro design guidelines. Like many applications we were using the trusty ListBox to show items with titles and subtitles, which all works pretty smoothly until that title starts wrapping. Then it quickly becomes apparent how much work is need to adjust the Silverlight templates to match the PSD Design Templates.

We did get very close to parity with the design templates and I thought I’d share the process for those interested in matching the native layout of the — List View double line.

Obtain the PSD Design Templates

If you don’t have them already download the Design Templates for Windows Phone 7. After extracting the files open the enclosed PDF which will act as a guide to the contents of the many large PSD files.  Each files focuses on design and layout of different native WP7 components, not all components have a directly related Silverlight control, but its pretty simple to find something similar.

For a full walkthrough of the Design Templates check out this video screencast on the .toolbox site.

Locate the Target Layout

Open the “ListView_PSD.psd” file and you’ll see six different templates for the List view.  The target is the view in the center of the top row — Double Line.

In order to create a lightweight image to use for comparison, I quickly grabbed and flattened the target.

  1. Expand the “DoubleLine_Wrapped” layer group
  2. Toggle the “Redline copy 5” layer into view
  3. Crop and save.

Matching the Layout in Silverlight

Now the goal is just to create the matching XAML and templates which can be reused within real applications.  Thankfully Expression Blend has a project template that gets us more than halfway there.

  1. Open Expression Blend (free with Windows Phone Dev Tools)
  2. Create a new “Windows Phone Databound Application” project and name it “ListviewDoubleLine”

And right away, MainPage is loaded with a ListBox which includes some runtime and designtime data and a similiar data. The image to the right is an overlay of our target and current layout.

Change the Data to Match the Target

In order to use the target as a guide it will be much easier if the text is the same.

  1. For design-time values edit the SampleData/MainViewModelSampleData.xaml file
  2. For run-time values edit the ViewModels/MainViewModel.cs file
  3. In each file change the LineOne and LineTwo properties of the first six items to match the values used in the target

To avoid all the typing, you can download the edited files here.

Update the Header

Even though our focus is the ListBox, layout starts at the top of the page so we need to get that right first.

  1. ApplicationTitle – move to 17pt font size from 15pt
  2. TitlePanel – one less pixel in margin left and top (12,17 to 11,16)
  3. PageTitle – three less pixels in margin left and top (9,-7 to 6,-10)

Now other than the tracking of -10 on the PageTitle we’re set. Unfortunately adjusting font tracking in Silverlight 4 is not possible, but it is planned for Silverlight 5!

Update the ListBox

Now that the header is looking good its time to address the list items.  We’ll do this first by adjusting the position of the ListBox which acts the origin for all items.

  1. MainListBox – three less pixels in margin left and two less pixels in margin top (0,0 to -3,-2)

The first list item looks good now, other than the aforementioned tracking issue.

Update the ListBox ItemTemplate

Although the text is now lining up properly for the first and second items, you may notice that the subtitle of the second item is breaking when it shouldn’t.

The StackPanel used as the container element for the ItemTemplate is not wide enough, although looking at the default width of 432 it matches the redlines in the target.

480 device width minus 24 pixels on each side equals 432, so where’s the disconnect?  Its in the default styling of the title text box and in the visual vs hit target.  Setting the background of the StackPanel to red highlights the answer.  The StackPanel is 9 pixels away from the edge and not 24 as it appears to be.

We need to increase the width to account for this, as well as address the TextBlock spacing for the subtitle

  1. StackPanel – increase width from 432 to 459
  2. – decrease margin bottom from 17 to 1
  3. – set the MinHeight to 94
  4. LineTwo TextBlock – decrease the margin right from 12 to 0
  5. – change TextWrapping to NoWrap.

Matching the LineHeight for Text Wrapping

And now for the final feat and the most advanced bit of trickery, adjusting the template to accommodate for the wrapping behavior. In Silverlight we do have control over Line Height but you must first change the lesser known LineStackingStartegy property.

  1. LineOne TextBlock – set LineStackingStrategy to BlockLineHeight
  2. – LineHeight to 43
  3. – set Margin explicitly to 12,9,12,0 replacing the inherited 12, 0, 12, 0
  4. StackingPanel – remove MinHeight setting
  5. LineTwo TextBlock – increase margin top from -6 to -3
  6. – increase margin bottom from 0 to 17

To explain the previous steps, after setting the LineStackingStrategy for the title, we found a height that matched the target and then adjusted the margins accordingly. Then realizing that the MinHeight value is not going to work for the wrapped title items we shifted to adding a margin bottom to the subtitle.

Final match

Although it takes a little extra fine-tuning you can see that it is possible to get pretty close to the Metro design templates for your WP7 apps.

The one big thing missing is font tracking, but that will show up in Silverlight 5 as a Character Spacing property on text controls. Since the upcoming WP7 “Mango” release will bring the phoen up to Silverlight 4, I’m guessing I’ll revisit this post summer 2012 around when Silverlight 5 makes it to the phone.  Then we can finally rest and reproduce a perfect match.

Until then, this little project is going on the shelf.

You can download the final source code here.

Golf Tracker and DailyAwesome – New WP7 tutorials on the Toolbox Site

The Microsoft Toolbox site has been updated with extra credit. The new material covers Widnows Phone 7 and includes 4 apps with source code, video and written tutorials.

You can see a few shots from Andy Beaulieu’s Air Hockey app, and below you’ll find apps from the two tutorials I worked on – Daily Awesome (a hard rock to do list) and Golf Tracker (a Metro extreme app).

DailyAwesome Screenshot

GolfTracker Screenshot

You can find all the material and the rest of the free, design-oriented training content on Microsoft Toolbox.

My Top 10 Interaction Developer picks for MIX11 Open Call

The MIX11 OpenCall voting has begun and the call to action is simple:

We need you to tell us which sessions you’d like to see at MIX11. Voting is open to everyone (no registration required). Vote for up to 10 of your favorite sessions.

Commence the sifting through 207 submissions!

(Thanks to Jason Alderman’s fancy filtering bookmarklet for making the job a little easier).

Looking through the list of many wonderful submissions, I decided to choose my top ten as if I were building a personal day of edutainment for myself. And as the title suggests, I did this with my Interaction Developer hat on.

Here’s the imaginary schedule and top 10 sessions that I’ve selected.

  1. Winning Hearts & Minds: A Field Manual To Guerrilla User Research
    Jason Alderman
    “start the day off right with some prototyping and user research”
  2. Designing for WP7: Metro and Beyond
    Guido Rosso
    “dive into the main topic of WP7, design first”
  3. All Thumbs: Redesigning an existing UI to suit Windows Phone 7
    Ward Bell
    “have Ward remind that not all Silverlight experts are WP7 experts”
  4. Using Metro Motion Design To Improve App Performance
    Matthais Shapiro
    “dive into theory and trickery behind the motion”
  5. Deep dive MVVM
    Laurent Bugnion
    “time for the secondary topic: real-life big apps”
  6. Ensuring a Consistent User Experience for Enterprise Software: Merging a Pattern Library with Silverlight Styles and Custom Controls
    Kevin Silver
    “…and how to maintain the style of those real-life big apps”
  7. Going All In With Silverlight, Kinect, IIS Media Services and HTML5 For Live Interactive Multimedia Performance
    Robert Tuttle
    “something fun with audio and visuals for the after-lunch session”
  8. Wave, Touch, Pen, Speech, Mouse and Keyboard
    Neil Roodyn
    “and the third topic: prepare to open your mind”
  9. Coding Animation Across Silverlight, WPF, XNA and HTML5
    Rick Barraza
    “yes, on to the singularity!”
  10. The Microsoft Surface MVPs present: Natural User Interfaces, Today and Tomorrow; an interactive discussion and demonstration
    Joshua Blake; Neil Roodyn; Dennis Vroegop; Rick Barraza; Bart Roozendaal; Josh Santangelo; Nicolas Calvi
    “and the big finale, the coolest thing from Microsoft this year which will encourage me even more to order my own Surface v2 for the house…”

Congrats to all who got their proposal together for the open call…
Now go vote for your own top 10 sessions!

New Windows Phone 7 tutorials for Designers on toolbox!

One of my recent focuses has been diving into the topic of designing applications for Windows Phone 7.  Although simple upon first glance, the Metro design language has strong guidelines and can make a real impact on the design of your own applications.

I was lucky enough to become part of the effort with Avlade to update the Microsoft design Toolbox site with Windows Phone 7 content. After a good amount of time digesting the Metro design language, the Blend for Windows Phone add-in and the experience overall, we’ve come up with 7 tutorials for designers beginning their own WP7 journey.

Metro Design Language of Windows Phone 7
Metro Design Language of Windows Phone 7

Metro is the name of the new design language created for the Windows Phone 7 interface. When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface.

Windows Phone 7: Starting to Design an Application
Windows Phone 7: Starting to Design an Application

Microsoft Expression Blend offers a feature rich environment for designing highly interactive experiences on Windows Phone 7.

Design Tips and Tricks for Windows Phone 7
Design Tips and Tricks for Windows Phone 7

The following list of tips and tricks will help you design and develop Windows Phone 7 applications.

Layout Tips and Tricks of Windows Phone 7
Layout Tips and Tricks of Windows Phone 7

One of the more powerful features that Silverlight offers you is an array of container controls providing a simple way to accomplish the layout of your dynamic applications.

Taking Advantage of Photoshop Templates
Taking Advantage of Photoshop Templates

In this tutorial, you discover how to use Photoshop Windows Phone 7 template files to create pixel-perfect application layouts for your Windows Phone 7 application.

FXG Import and Workflow
FXG Import and Workflow

FXG is an acronym for Flash XML Graphics File, and it describes an XML-based graphics interchange format created by Adobe for the Flash Platform, and is supported by Microsoft Expression Blend.

Designing for Gestures on Windows Phone 7
Designing for Gestures on Windows Phone 7

No longer do smart phones of today depend only on hardware keyboards or the stylus of the past. Windows Phone 7 devices come equipped with a capacitive touch screen that offers a smooth, accurate, multi-touch enabled experience for the user.

And there’s more on the way!

Keep an eye on the Toolbox site and Twitter account (@designtoolbox) for the latest information.

Talking about Expression Blend for Devs on Yet Another Podcast

Jesse Liberty was kind enough to invite me on to his cleverly named podcast, Yet Another Podcast, to talk about one of my favorite tools Expression Blend.

In YAP episode #16, we highlight how the tool can be a great help when building Silverlight, WPF and Windows Phone apps, not only from the designer perspective but also from the developer perspective.  Expression Blend is a great tool for UI development and if you’re not using it already I suggest you crack it open and march on over to the Microsoft Design Toolbox site and walk through some of the tutorials.

I’ll be that guy – future directions and so on and so forth

Today during a call with Mr. Ingebretsen discussing a project, we had plotted who would be the dev lead, who would be the design lead and who would be the dev/design/wireframe/glue lead.  I said “I’ll be that guy”, the “glue” guy.

In the past, as a small startup style guy I’ve often played the role of the “every man”. Code, design, project planning, pm, mascot, evangelist, interface, media, graphics, lead, tech writer, trainer, booth babe, conference goer and other miscellaneous jobs.

Its been certainly an interesting, educational and entertaining time.

Since recently leaving Microsoft, I’ve been reevaluating my professional life.  This includes technology, project and work focus as well as usage of social media and my blog.  My last job at Microsoft as a Technical Evangelist had a strong influence on all of these aspects and now that I’ve moved on, I have the opportunity to start fresh.

Here’s my current thinking:

Technology – Part of the fun of becoming “independent” is you get to choose the best tool for the job.  At this point I want to be proficient in all of the major UI technologies in order to use the right tool for the project. I also feel this helps open my mind more when I can step in and out of different ways of thinking.

Projects – I’ve always been more of a “web guy” and that isn’t going away. Silverlight and Flash are great, and with the onset of HTML5 (and the tech surrounding it) I see that continuing to be a place of interest when focusing on projects that need “reach”. Otherwise, I’m enjoying native WPF or iOS applications for projects aiming for the richest experience, including mobile projects.

Work – I most enjoy working right in the middle of development and design. “Design whatever you want, and I’ll make it work.”  “Get the services and data in place, and I’ll send them to the user.”  Those are phrases I’d like to say on every project with abandon. I am planning to hone my skills more, though, on interface design and visual communication.

Recently after reading Clive Thompson’s on the Power of Visual Thinking, I was reminded of my  interest in “visual thinking” and the ideas spread by the likes of Dan Roam.  I love to draw and the power of an illustration, why am I not spending more time doing this?

Social Media and Blogging – my past behaviors in this area were very tailored by my previous position.  Am I posting or tweeting at the most effective time of the day?  Am I posting a tutorial that enough people will find helpful?

I still enjoy being helpful and learning from others, but I’m hoping to add a bit more personality, creative recklessness and randomness into what I do online.

I like the idea of not caring so much about numbers and “geek-fame”.

I like the idea of sharing ideas and ways of thinking and not just tutorials.

I like the idea of trying to do something different.

So to begin my plan, I opened up and wrote this post, which does not fit into previous recent posts.  I’ve also included a related sketch.  The sketch is not inked, left unfinished and barely touched up in Photoshop. But it is different, fun and its not being posted during the most effective time of the day.

Windows Phone 7 Gestures Cheat Sheet

Windows Phone 7 Gestures

Along with the Windows Phone 7 Developer Tools RTM release, the Silverlight team also shipped the Silverlight for Windows Phone Toolkit.  Not only does the toolkit add much needed controls like DatePicker, TimePicker and WrapPanel; but there’s also very Phone-ish components included called GestureService and GestureListener.

Previously, the Manipulation events were the way to capture gestures, but figuring out which type of gesture just occurred is up to you as a developer.  Now with the GestureService that code has just been handed to you.

Although its not rocket science to use the GestureService/ GestureListener combo, I thought I’d share some notes here after some investigation.  There’s not much documentation, so hopefully this will help others get started.

  • First, make sure the Toolkit is installed
  • Add a reference to the assembly named “Microsoft.Phone.Controls.Toolkit” to your project.
  • Reference the assembly in the XAML of your UserControl by adding the namespace:
  • Add an instance of a GestureListener to the element you want to capture gestures on.  The example below adds a GestureListener to the popular LayoutRoot Grid:
  • For simple Gestures you can handle a single event on the GestureListener
    • Tap – EventArgs: (point)Origin, (object)OriginalSource
    • DoubleTap – EventArgs: (point)Origin, (object)OriginalSource
    • Flick – EventArgs: (double)Angle, (Orientation)Direction, (double)HorizontalVelocity, (double)VerticalVelocity
  • (As a quick note, Orientation only offers Horizontal and Vertical)
  • For a simple direction-only Pan use:
    • DragStarted – to catch it instantly, EventArgs: (Orientation)Direction
    • DragCompleted – to catch it when its over, you can also compare Velocities to check for diagonals, EventArgs: (Orientation)Direction, (double) HorizontalVelocity, (double) VerticalVelocity, (double) HorizontalChange, (double) VerticalChange
  • For a tracking position Pan use:
    • Tap – capture original touch coordinate
    • DragStarted – start monitoring for DragDelta
    • DragDelta – modify element based off changes, original coordinates stored if need, EventArgs: (Orientation) Direction, (double) HorizontalChange, (double) VerticalChange
    • DragCompleted – check the total change amount and possibly snap into new position or back to previous position if change is not large enough.

Suggestions, feedback and other links are welcome!