Designer Silverlight

Click here if you don’t want to hear me complain about the Silverlight toolkit and you just want to get to the animations.

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.

I haven’t blogged for a while not because I haven’t had anything to say but because I felt I need time to triage all cool stuff I’ve been learning about Windows Phone 7 Silverlight development. However, one thing that I’ve learned cannot wait. That is support for international characters in the WebBrowser control.

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.

I’m currently working on porting the run-away hit mobile application ShopSavvy to Windows Phone 7 (sign up to be a beta tester) and one of the things I really wished I had was the WrapPanel.

(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!