Alan Le

I attended the Silverlight 3/Expression Blend 3 Launch event today held in San Francisco. There were a few good demos, but the one that interested me the most was the Blend 3 SketchFlow Demo given by Jon Harris. I got chance to sit up front and record it.

Here’s the unofficial demo video. I broke it up into two parts due to Youtube’s 10 minute limitation.

SketchFlow Demo Part I

Jon demos the SketchFlow map, design surface, and sample data features. In the end of this video, he show’s SketchFlow documentation and annotation features.

SketchFlow Demo Part II

In this demo, Jon demos bringing a pen and paper drawing to life with interactivity from SketchFlow. Awesome!

Design Blend, Silverlight, SketchFlow

I have only gotten the chance to scratch the surface of the Expression Blend 3 Preview Release and really excited about it already. Here are some screenshots that I’ve captured while working with this release.

Gradient Tool Improvements

Built-in Pixel Shader Effects

Arrange By Z-Order

Easing Functions

Import Adobe File

Preview States

Copy State

New Item Window

Add Sample Data Source

Define New Sample Data

Property Type

String Format

Edit Sample Values

Annotations

Projection Transform

XAML Intellisense

C# Intellisense

Workspaces

Behaviors

Design Blend

I often forget that font size is pixel-based instead of point-based when working with Silverlight. Designers using Expression Design will set the point size for Text fonts because that’s what available to them.

When implementing a design that was created using Expression Design, I need to convert the point values for fonts to pixel values for the fonts to be rendered accurately as designed. Traditionally, a point is 1/72 of an inch. A Silverlight pixel renders at 1/96 of an inch. To convert a point to a pixel, I need to multiply the point by 96/72 or 1.333….

Here’s a handy chart that I use.

Point (pt)	Pixel (px)~
7pt	9.333
8pt	10.666
9pt	12
10pt	13.333
11pt	14.666
12pt	16
13pt	17.333
14pt	18.666
15pt	20

Note that this is not an issue with setting FontSize for TextBlocks in WPF. With WPF, the FontSize value can be set with the “pt” unit qualifier and no conversion is necessary. Unit qualifiers are not supported in Silverlight 2.

Design Blend, ExpressionDesign, Silverlight

I installed Safari 4 today. The tabs inline on the Windows title bar was the first thing that got my attention. At then right end of the tab was a gripper icon, which allowed me reorder the tabs or to tear away the tab so that it is in its own window. Very cool!

Here’s a video that I captured of the Safari 4 tabs in action.

Design Safari, video

I’ve written about WPF resource organization and keeping XAML clean before. Recently I came across a WPF sample application that had an interesting naming convention for brush resources.

Instead of naming a brush resource as MainWindowBackgroundBrush, they would use the name Background_MainWindow. At first, this may seem like an odd convention, especially with the underscore. However taken as a whole, this convention can be really useful in Expression Blend.

During the implementation process when applying brushes to WPF elements, the brushes can be quickly and easily set. Just select Brush Resources and find the correct brush. Since the brushes are in alphabetically order, all of the background brushes are in the same area. Likewise for the border and foreground brushes.

Also with this convention, we can remove the “Brush” word in the name since we can easily tell that a resource is a brush because the brush resources start with Border_, Background_, or Foreground_.

I think I will start following this naming convention in future WPF and Silverlight projects.

Code, Design Blend, Silverlight, WPF