The ListPicker is available via the Silverlight Toolkit for Windows Phone 7. If you don’t have it, you should get it. Get the source as well, for reasons that will be clear in one more sentence.

The only problem is that I can’t scroll if I do this because I run the risk of accidentally opening the ListPicker (which should be a tap interaction) when swiping (which is a gesture interaction):

I posted this as a work item on codeplex, so it will probably be fixed in a couple months (sometime in early 2011), but if you’re having a problem with it, do the following:

Open up the source, go to the Microsoft.Phone.Controls.Toolkit project, the ListPicker folder and open the ListPicker.cs file. Go down to the OnManipulationCompleted event and after the line

base.OnManipulationCompleted(e);

add the following conditional for the rest of the code in the method:

if ((Math.Abs(e.TotalManipulation.Translation.X) < 20) && (Math.Abs(e.TotalManipulation.Translation.Y) < 20)){
[Other code]
}

This catches manipulations that are less tap-y and more scroll-y and lets them slide by without opening the ListPicker. If you wanted to be really careful, you could probably change the conditional to 10 or even 5. Most of the taps I checked had pretty small (single digit) manipulation deltas.

If you are like me, you’re working on Windows Phone 7 applications in your pajamas, subsisting on pork jerky and Coke Zero and dreaming of that one project that will make you richer than your wildest dreams while begging Dell to actually announce some kind of release date for the Dell Venue Pro.

But I suspect that we have less in common. In fact, the only thing we probably have in common is a desire to know how to actually replicate the Windows Phone 7 motion design.

That and our breathtaking good looks.

But back to the motion design. If you download the Silverlight Windows Phone toolkit source code, download and run it, you’ll see some animations that look kind of like the animations on the phone but not really. There are a couple of reasons for this.

Reason #1 – The easing functions have been placed on the wrong keyframes in the toolkit. They should be placed on the second keyframe, but they are on the first keyframe. This, of course, doesn’t make any sense since there is nothing to ease in the first keyframe, so I suspect it is some kind of transcription error.

Reason #2 – The easing function is an exponential one. Not a problem, pretty normal. But its exponent is 15. To give you a good idea of what that kind of “easing” looks like, here is the Blend representation of an exponent 15 easing:

It’s basically like cutting the animation time by two thirds. In contrast, here is the function with an exponent 5 easing:

Much ease-ier (get it?).

OK… enough about the Silverlight toolkit. You want to actually know how to write animations that approximate Windows Phone 7, right?

I currently have no phone, so I can’t study the animations in the closest detail (waiting for the Dell Venue Pro), but here is what I’ve gathered from the Silverlight toolkit and what I can see in the emulator:

“In” animations

When some UI component is appearing, we would use an “In” animation. “In” animations are a shade longer than “Out” animations. I assume this is to help the users’ eyes adjust to the new UI.

To the best of my knowledge, “In” animations:

• are .35 seconds long
• use exponential 5 easing

“Out” animations

When a UI component is exiting (either through navigation or due to the lack of need for it) we use an “Out” animation. Their shorter length leave the user with the impression of speed when they want to get to the next UI.

“Out” animations:

• are .25 seconds long
• use exponential 5 easing

OK… now on to some XAML:

Turnstile Animations:

This is when the screen-wide UI turns on its left-hand edge, such as when the user opens an application.

Turnstile Forward In

Turnstile Forward Out

Turnstile Backward In

Turnstile Backward Out

Slide Animations

We see these animations in things like creating new e-mails. They seem to be used when the user is doing some task that fits within the context of the screen they are already on. Slide animations use an opacity animation combined with a horizontal or vertical animation.

Slide animations use the same .25 seconds on animate out and .35 seconds on animate in and, according to the toolkit, the UI slides 200 pixels in whatever direction it is sliding.

Here is a sample Slide Up and Slide Down animation:

Slide Up Fade In animation

Slide Down Fade Our animation

Coming soon… swivel animations and rotate animations… I’m not totally certain on what I’m seeing in the toolkit. It doesn’t seem to jive with what I’m seeing from the phone. I may wait a few days until I get a phone and can dissect the motion design a  little bit more closely.

Basically, the problem is as follows: We want to show HTML that uses international characters. The most straightforward way to show HTML in a Windows Phone 7 app is to use the WebBrowser control and the "NavigateToString(string myString)” method to input the HTML.

However, when we hook international text (like Japanese, Arabic, Korean, Russian or Chinese characters) using this method, we get a mess. The following code:

string testString = "<html><body>日本列島の占領の最初の兆候が縄文時代で約14,000のBC、竪穴住居の中石器時代新石器時代に半定住狩猟採集文化と農業の初歩的なフォームから続いて、30,000年頃旧石器文化と登場しました。</body></html>";
BrowserControl.NavigateToString(testString);

produces the following result:

In case you’re not familiar with Japanese, this is not Japanese. This is, instead, the ASCII version of the Japanese characters we want to see. Why does it do this? I’m not sure. But my effort to show the actual international text in the WebBrowser control was met with tears time and time again.

Until I found this post unhelpfully titled “Windows Phone 7 Character Testing…”. Here the author gives us this extremely helpful method for delivering the string we need to show international characters:

private static string ConvertExtendedASCII(string HTML)
{
    string retVal = "";
    char[] s = HTML.ToCharArray();

    foreach (char c in s)
    {
        if (Convert.ToInt32(c) > 127)
            retVal += "&#" + Convert.ToInt32(c) + ";";
        else
            retVal += c;
    }

    return retVal;
}

With this in place, we can very simply run our string through the method to give us properly encoded HTML so that

BrowserControl.NavigateToString(ConvertExtendedASCII(testString));

gives us:

And we’re happy. Very happy.

(For those who are new to Silverlight/WPF/Windows Phone 7, the WrapPanel stacks UI elements either horizontally or vertically like the StackPanel except that, when it hits the panel limit it… wait for it… wraps and starts stacking in a new column/row. Handy.)

I found a way to add it with the Silverlight Toolkit, but doing that added 140 Kb to my application. Maybe I’m just stuck in the world of J2ME, but adding 140 Kb to my mobile app isn’t OK if I can help it. I found this post from Jeff Wilcox on adding the WrapPanel and that didn’t seem to work for me. (My comments are the whiny ones at the end of the post.)

But I finally got it working and I’ll tell you how.

Or I could just taunt you. That would be fun too.

Naw, I’m just kidding. Here’s the stuff you need.

Windows Phone 7 WrapPanel and DockPanel (Source)

Windows Phone 7 WrapPanel and DockPanel (DLL)

All you have to do is download the DLL, unzip and reference in your app like so:

Right click on the “References” section of your project.

Select the WP7Panels DLL from whatever folder you put it in and see it show up in your References

Open up the “Assets” section and type “wrap” or “dock” the wrap-or-dock panel should show up. Double click it or drag it onto the canvas to add it to your app. Blend will take care of the rest of the namespaces and everything.

And start adding items to your panel. It should work the way it’s supposed to work.

One note with the DockPanel… items placed in the DockPanel need to have the attached property

[xmlns]:DockPanel.Dock=”[something]”

if you want them to do something other than align in the center. The [xmlns] name should be the same thing that is before the “DockPanel” in the XAML. It will most likely be “WP7Panels”. Therefore, the following XAML:

<WP7Panels:DockPanel>
    <Button Content="Button" WP7Panels:DockPanel.Dock="Bottom" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Top" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Right" />
    <Button Content="Button" WP7Panels:DockPanel.Dock="Left" />
    <Button Content="Button" />
</WP7Panels:DockPanel>

…should look like this:

If you want to add the actual files to your Windows Phone 7 app instead of just referencing the DLL (perhaps you are crazy or you have a deep and desperate need to fully understand absolutely everything you touch or you are a C++ developer), you can download the source. I’ve consolidated the DockPanel code into a single file (DockPanel.cs), but you’ll need the following files to get the WrapPanel working (all included in the source).

• LengthConverter.cs
• NumericalExtensions.cs
• OrientedSize.cs
• TypeConverter.cs
• WrapPanel.cs

Finally, if you need something else for Windows Phone 7 from the Silverlight Toolkit, you can either add the entire toolkit (explained here) or download the source for the latest Silverlight 3 build and open it in Visual Studio 2010 (for some reason, I couldn’t get it to open in Visual Studio 2008). It should update and you should be all set playing around in there to extract the stuff you need.

Good luck!

I realized this might not be possible for many people who don’t own Adobe Illustrator, so I did it myself for several files that are now available for download as XAML vector graphics maps of the US.

Download all Silverlight and WPF XAML files

Silverlight

• Download all Silverlight XAML files
• United States Map with States
• United States Map with Congressional Districts
• United States Map with Counties (FIPS)
• United States Map with Counties (County Names)

WPF

• Download all WPF XAML files
• United States Map with States
• United States Map with Congressional Districts
• United States Map with Counties (FIPS)
• United States Map with Counties (County Names)

I’ll confess, the real difference between the Silverlight and WPF files is that the WPF files encapsulate everything into a “Viewbox” control that allows dynamic resizing of the maps. If you want that functionality in Silverlight, just download and install the Silverlight toolkit and encapsulate the Canvas into a Viewbox. (The Viewbox will be a standard control in Silverlight 4, I am reliably informed.)

Now, a quick overview of the files:

United States Map with States

This is a nice tidy file (69K) with vector maps for all the states in the US. Each state has been named by its abbreviation. For example, the California map path would have the attribute: x:Name=”CA”.

United States Map with Congressional Districts

This file is based off of the Wiki Commons Congressional District map and is pretty big (about 1 MB). The paths are named based on a State_District naming convention. For example: Washington’s 8th Congressional District would have the attribute x:Name=”WA_8″.

There are 7 “at large” districts, which indicate states that only have one congressional seat. They have the attribute “State_At_Large“… for example, North Dakota’s one and only congressional district has the attribute x:Name=”ND_At_Large”.

United States Map with Counties (FIPS)

This map is pretty hefty at 1.5 MB. All paths have a FIPS code for the county they represent as their x:Name attribute. A FIPS code is a 5 digit code corresponding to a unique county in the United States. The first two digits indicate a state (for example, California is “06″) and the last three digits indicate a unique county (for example, Orange County in California is “059″). Because of the limitations in the XAML x:Name conventions, the FIPS code for a county is preceeded by an underscore. So, the path indicating Orange County, California would be x:Name=”_06509″.

If you need a FIPS-to-CountyName file, check out this FIPS code CSV file.

United States Map with Counties (County Names)

This is the same map as the FIPS map except that the x:Name attribute is State_CountyName. For example, the path for Fulton County, Georgia would have the attribute x:Name=”GA_Fulton”. Periods, commas and apostrophes have been deleted. Multiple word and hyphenated counties have an underscore where the space or hyphen would be. For example, Alaska’s Skagway-Hoonah-Angoon Borough would be x:Name=”AK_Skagway_Hoonah_Angoon”.

Holy cow, Alaska… did you really need to name a county with more letters than the number of people living there?

Anyway, that’s the overview of these files. In the interest of keeping the file size down (no, really! Stop laughing at me!), the county and congressional district boundaries aren’t as details as we might prefer, but that’s the trade-off we have. Also, the county name data is pretty good, but there are over 3100 counties in the US, so I didn’t get a chance to double check each one of the names. Use at your own risk.

I’m trying something a little new… I’m going to post all future Silverlight tutorials on CodeRun, an online IDE. Basically, just follow the link below and click “Run” and you’ll see this in action. You can change the XAML at CodeRun to test it out, which I find exceptionally cool. Let me know if you a) like this or b) hate this.

Open this project on CodeRun.

This is just a little trick to get a nice flexible striped gradient in Silverlight or WPF. Our end product will look like this

Zoomed in:

Just adds some nice texture to the app.

First, go to the element you want to apply the gradient to and go to the (you guessed it!) gradient section in the background.

This will pull up the default black-to-white gradient that we all know and love. Give it two more gradient stops as close to the center as you can by clicking on the gradient twice. Make the two left stops the color of your stripe. For this example, I’m using a nice blue gradient with some transparency. I think it fits nice with the background. Also make the two right stops fully transparent. Should look something like this:

Dandy. Now click on the arrow to expand our options (seen at the bottom of the image above) and a new set of options open up for us to futz with. Let’s go ahead and set the following options:

• StartPoint = 0,0
• EndPoint = 1.5, 1.5
• MappingMode = Absolute
• SpreadMethod = Repeat

And that’s it! We can change the visible color to get something a little more appropriate to our background or we can change the EndPoint to make the stripes wider or at a different angle. But that’s all we need.

Here’s the XAML for reference.

<LinearGradientBrush
EndPoint=”1.5,1.5″
MappingMode=”Absolute”
SpreadMethod=”Repeat”
StartPoint=”0,0″>
<GradientStop Color=”#BF125881″/>
<GradientStop Color=”#BE6C9AE0″ Offset=”0.526″/>
<GradientStop Color=”Transparent” Offset=”0.544″/>
<GradientStop Color=”Transparent” Offset=”1″/>
</LinearGradientBrush>

If you think this is an engaging way to look at the Open Call sessions, I ask that you include my session “Creating Effective Info Viz in Silverlight” on your ballot.

If you have any problems with this project, please let me know! I’ve already had one person point out a parsing error that was depriving him of a properly attributed session.

This visualization is basically a set of word clouds for the titles, abstracts and speakers of the submitted proposals. Clicking on the words or names brings up a list of related sessions with links so that users can either go to the session or directly vote for it (although you’d still need to click  “Submit Your Ballot” in order to make the vote count).

So, now I’d like to talk about problems with this project.

There’s a weird problem with the animation when the panels flip from front (the word cloud) to back (the detail view). I think this is because I’m building the detail view dynamically, which makes it mostly a performance issue. I spent a couple hours fighting with this problem and tried several possible solutions. Ultimately, I couldn’t fix it, so I decided not to let the perfect be the enemy of the good.

I decided to use a wrapping ListBox for displaying all the words and names rather than try to squish them onto a single screen for a couple reasons.

1. Dumping all the sized items into a ListBox was WAY easier that constructing a beautiful Wordle type word cloud and gave me most of the value. Since there was a very short window in which this project would be valuable, I decided in favor of the faster method.
2. If the user is trying to play around with this and doesn’t want their browser to fill the screen, they can still see everything. Allowing scrolling means that the user doesn’t have to feel like I DEMAND their full attention. The application becomes a casual application rather than a consuming one.
3. People love to see their names in lights. Over on the “Speaker” section, I wanted the names to be big enough so that every person who submitted a session could see their name in the “Speaker” panel. That was probably the most important part of this project to me (hey, I do user design… it’s all about the people), so that’s what I did.

Given more time, I probably would have worked a little more on the visual design and the motion design (animations and what not). I probably also would have sped up the application by taking some of the processing procedures out of the application and turned them into static data files. The fact of the matter was that this project evolved from testing to prototype to final project very quickly because of the time constraints.

But, hey, that’s life.

• Florida Crime Rate Visualization – My attempts to use Silverlight for information visualizations are going pretty well. In this post, I visualize the Florida crime rate by county over almost 20 years. There are project files availalbe for anyone who wants to dig into how I did it a little more.
• Adobe Illustrator to XAML Conversion Options – This post walks through the pros and cons of two methods for taking an SVG file (or Adobe Illustrator) file and pulling it into Blend as a XAML file. It also has a XAML copy of a vector map of the US by county for download.
• Create A Snapping Slider In Blend Using Behaviors – This provides a downloadable behavior for getting a slider to snap to integers (or an integer multiple based on certain settings). I’ve provided project files as well as a tutorial for how to do it.
• How To Create a PART in Your Silverlight Custom Control – Because there are about a dozen tutorials on building a custom control, but I keep forgetting exactly how to do this part of it.
• How To Animate a Changing Property in a Custom Control in Silverlight – Have you ever wanted your property to animation automatically when it changes in your Silverlight Custom Control. I say, “Who hasn’t!?” at which point my wife forces me out into the fresh air and sunshine (or, as I call it, the Blinding Day Star). After I scurry back inside, I wrote this blog post.
• How To Build a Storyboard Animation for Silverlight in C# – Because sometimes you want to enjoy the benefits of the Silverlight animation engine but you really need to build the animation in the code instead of the XAML.

• Carsonified » 5 Advanced Photoshop Techniques for Web Designers
• Carsonified » Advanced Photoshop Techniques for Web Designers – Part 2
• Source code for “WPF Control Development Unleashed” – From Pavan Podila, control development in WPF is pretty powerful… might be a good idea to check out his book.
• A SilverLight TreeMap control – I can’t believe I missed this for so long. I need to dig into this a little more, but if this really works the way it looks, everyone should be worshiping Pavan Podila over at Pixel in Gene. This is an info vis dream come true.
• Implicit Styles, Templates, Controls and FrameworkElements – From the Windows Presentation Foundation SDK team, Carole Snyder has a post on implicit styles… definately an under-appreciated topic in WPF
• Expression Studio Tutorials Starter Kit – Jaime Rodriguez continues to be awesome
• Mastering CSS, Part 2: Advanced Techniques and Tools – From Smashing Magazine and includes a section on iPhone CSS techniques
• How to Create Your First iPhone Application – Yet another “Make an iPhone app” guide
• How To Effectively Communicate With Developers – The graphic is hilarious.
• Typographic Design Patterns and Best Practices – Good for people who want to start digging into the typographic world
• 50 Useful New jQuery Techniques and Tutorials – 50 is kind of a lot, but this is from Smashing Magazine, whose motto is “The most compelling link dumps in the design community”