New SketchFlow Demo Video from Silverlight 3/Blend 3 Launch Event

July 10th, 2009

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 , ,

Wolfram|Alpha knows it all!

May 18th, 2009

I’m amazed by a new computational search engine that was launch over the weekend called Wolfram|Alpha. It semantically analyzes search terms and returns interesting computated results.

To give you a sense what’s impressive about Wolfram|Alpha, I’ve listed a sampling of searches and their corresponding results below. You can also watch this introduction video from Stephen Wolfram himself to get a good idea on this search engine.

I’m so enamored by Wolfram|Alpha that I’ve installed a firefox addon that adds Wolfram|Alpha results to Google search results.

Mashable has a nice collection of Wolfram|Alpha easter eggs. Buzzfeed found that it knows superheroes’ secret identities. Meanwhile, folks on Friendfeed has come up with some really zany searches like: how much wood could a woodchuck chuck if a woodchuck could chuck wood?, how many peppers did peter piper pick? and why is the sky blue?

Name search


Genealogic relation Search


City Search


Date Search comparison with Google datecomparisonwithgoogle


A Screenshot Tour of Expression Blend 3 Preview

March 25th, 2009

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





Projection Transform


XAML Intellisense


C# Intellisense







Font Size Tip for Silverlight

February 27th, 2009

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 , ,

Tear-away Tabs in Safari 4

February 24th, 2009

safari 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 ,

Naming your WPF and Silverlight resources

February 15th, 2009

imageI’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 , ,

Design Time Check for WPF and Silverlight

February 10th, 2009

Do you commonly check whether code is being run in Blend or in the Visual Studio design surface? Often times, this is necessary to load up sample data or to prevent code that could potentially break the “Blendability” of a WPF or Silverlight app.

In WPF, you can call the DesignerProperties.GetIsInDesignMode for it. In Silverlight, you can check for HtmlPage.IsEnabled property.

I check for design mode often and needed a simple, consistent method to mask the DesignerProperties call in WPF. In Silverlight, I wanted to hide the hacky HtmlPage.IsEnabled check and change it from being a not(!) check to a positive check. Also, when Silverlight support the DesignerProperties.GetIsInDesignMode method, I can just easily change my check in one place. With some refinements from friends at work, I condensed it to a single static property in App.xaml.cs that I can use throughout my application.

In App.xaml.cs:

public static bool IsInDesignMode
        #if Silverlight
            return !HtmlPage.IsEnabled;;
            return DesignerProperties.GetIsInDesignMode(new DependencyObject());

Note that the precompiler directives can be removed if you’re just targeting WPF or just targeting Silverlight

Here’s how I use it:

void MainView_Loaded(object sender, RoutedEventArgs e)
    if (App.IsInDesignMode)

Code , ,

Comparing Boot up times: Windows 7 Beta and OSX

January 15th, 2009

I’m running Windows 7 Beta on my unibody MacBook Pro laptop. It’s a great opportunity to compare the boot time between the two operating systems on the same hardware. Play both videos at the same time to compare for yourself.

OSX Boot time 45 seconds
Windows 7 Boot time 50 seconds

Gadgets ,

Ronald McDonald on Friendfeed

August 15th, 2008

On Friendfeed, I noticed  is that often a theme bubbles up and people start to share links and pictures with that theme during a particular day. This happened recently with pictures of Ronald McDonald. I find this mix of zany along with the informative tech news and social media commentary is what makes friendfeed fun, social, and addictive.

image image image image

In the past month, I’ve seen fun links around Bacon, Legos, and Darth Vader. I wonder what will be the theme tomorrow?


Adding the Share on FriendFeed bookmarklet to the Firefox 3 toolbar

July 2nd, 2008


A quick way to share the current page that you’re browsing on friendfeed is to use the friendfeed bookmarklet. Make sure to watch the video to see how to share sites along with pictures.

An issue I have with the bookmarklet is that I need to display the bookmarks toolbar in order to have a place to hold the bookmarklet. Ideally, I want to keep the browser chrome at a minimum. But unfortunately, you can’t just drag the bookmarklet like a button into the toolbar; it needs to reside in the bookmarks toolbar.

Here’s how I was able to add it to the left of the address bar.

  1. Drag the Share on FriendFeed bookmarklet to the bookmarks toolbarimage
  2. Delete the default bookmarks.
  3. Right-click on an unused area in the toolbar and select customizeimage
  4. Move the Bookmarks toolbar to the left of the address bar and select done.image
  5. Right-click on an unused area in the toolbar again and uncheck bookmarks toolbarimage
  6. I renamed the bookmark to simply “FF”

One thing that I would like to do is change the Icon to use the Friendfeed ico file and remove the text. That’s something that I’ll explore.