Skip past navigation, straight to the content

Category Archives: Microsoft

So Long

This post is a bit overdue — but, as the saying goes, better late than never.

I left the WPF team (and Microsoft) a few months ago. Then, I went to Europe to go watch the World Cup.

As of four days ago, I’ll be working and living in Beijing for three months. If you’re interested in those adventures, you can check out the life section of this blog (yes, I know I neglected it for the past six months, but I’m here to repent).

If you’re looking to fill the WPF/Avalon void in your blog life, try:

As for this “work” blog — the blogging here will remain technical. I’m not sure which topics I’ll cover, but I’ll probably still occasionally write about WPF (I did spend four years working on it). Only time will tell.

Watch my Mix06 Talk

You can now view my Mix06 talk online, watch the thrilling Developing a Windows Presentation Foundation Application from the comfort of your own home!

You can see all the other talks at sessions.mix06.com. You should definitely watch Robby’s talk: A Designer’s Overview of Windows Presentation Foundation.

Mike Swanson has tips for viewing the talks — I definitely recommend viewing them on high-speed (it makes everyone sound smarter too).

Thailand Screencast on Channel9

Screenshot of the Thailand WPF application

Channel9 has posted the full screencast in high resolution so you might actually be able to read what I’m typing (imagine that!).

Mix06 Thailand Demo Screencasts

I’ve recorded and posted screencasts for the demo-building portion of my Mix06 talk. It’s broken up into four parts:

  1. XamlPad: A quick, live introduction to XAML where I display some photos in a thumbnail view
  2. Visual Studio & Expression: I use Visual Studio and Expression to create the initial UI for the application
  3. Richer Typography: Adding a custom font to our application as well as page layout for the text
  4. Simple Video: Add video into the project and demonstrate code behind

I know everyone’s very excited to hear me stutter and sound silly over a PC microphone. Believe it or not, doing a screencast is harder than coding live on stage.

The total viewing time is just over 22 minutes (I’ll post a link to the combined video shortly). The application isn’t super-complex, but my goal during the talk was to give an overview and taste for the platform.

If there’s interest, I can expand upon the sample in order to make it more sophisticated.

If you have the Feb CTP installed, you can run the application via the browser:

A WPF XBAP application showing pictures from Thailand along with flowing, multi-column text

You can download the source files, but note that I haven’t included the font (Lindsey) in the source as the licensing terms do not permit it. Lindsey will be available with the WPF SDK when we release.

Update: Here’s a link to the combined video — which is still a little too blurry look good. I’m trying to find a better hosting solution for the video.

Update: Get a higher-res, full length version of the video on Channel9

Mix06 Demos Update

Sorry for the delay posting the materials from my Mix06 talk — I need to track down some licensing information for the fonts I used in one of my demos.

For those not at the talk, I had two main demos:

  • Feature Montage: I created a set of interactive slides that showed off various portions of WPF feature areas. This is the part that I need to change slightly before posting.
  • Thailand Browser Application: I built this demo live on stage. I’ve created some screencasts so you can watch this live (the first is posted, I’ll add links to the others in the next post).

In case you haven’t seen Mike Swanson’s announcement, the full Mix06 talks will be posted in the next couple of weeks.

Mix06 Talk

My talk was yesterday — thanks for all who attended.

I’ll be posting the applications I showed in the next post (my laptop is about to die).

If you took pictures during my session, I’d love to get a link / copy.

Mix06 and Powerpoint

I’ll be speaking at Mix06 in Las Vegas this Monday — I’m giving a developer-focused overview of WPF (4:30 on Monday, if you’re interested).

One of the original goals (gimmicks?) for my talk was to not use Powerpoint — I didn’t want my talk to turn into a boring, slide-focused hour. I hoped that not having Powerpoint would force me to come up with a gripping, unique talk that would win many awards, honors, an Oscar, presidential medal of honor, and possibly a pony.

Well, after working on the talk for a few weeks, I’m removing this goal for a couple of reasons:

  1. Just like the PDC talks, the sessions at Mix will be recorded and archived on video. However, the chaptering is integrated with Powerpoint. Without slides, there will be no chaptering in my talk, making it very hard to scan later on.
  2. It’s silly. Plenty of great talks have been given with Powerpoint — and plenty of horrible talks have been given without it. Content, flow, and the speaker are what make or break a talk, not the file format.

Alternatively:

Why I'm Using Powerpoint, as a Powerpoint Slide

Don’t worry — I don’t think that slide will make the cut.

Five Steps to Font Freedom

Adrian has a post titled Five Steps to Font Freedom on the Be A Design Group blog. I’ve quoted some of it below:

There is something absurd about typography on the web. Think about these scenarios: You don’t need to own a font to read a book set in Goudy. You don’t need to own Futura to watch a Wes Anderson film. You don’t need to own Times to read the Times. You don’t need to own any fonts to watch television. Why not? Because that would be insane. And yet this same logic doesn’t apply on the internet. Online, a person needs to own a fully licensed version of a font in order to view it in a web browser. You are reading Arial right now. That’s right, Arial. Why? Because everybody on Earth has a licensed version of Arial on their computer. The great democracy of the internet has failed to produce typography any better than the least common denominator of system fonts. As a designer, I hope you are outraged and offended. So what can you do about it?

Those who know me (or have seen me speak) know that I feel pretty strongly about the lack of variety in widely distributed fonts. Almost every page uses one of the same five fonts (Verdana, Georgia, Arial, Lucida Sans, or Times). The lack of variety can make it tough to create strong branding and beautiful designs on the web.

Designers tend to work around this issue by creating text in Photoshop or Illustrator and exporting to an image. Flash also provides the ability to use fonts that aren’t locally installed (this is the key to the popular Sifr technique). Unfortunately neither technique works well for reading long documents.

The release of Vista will help (but not solve the issue) for two reasons:

  1. New high-quality fonts: Poynter was the first to show the new Microsoft fonts being distribute with Vista (some will be distributed with Office as well). All six of the new fonts are OpenType, and will provide much needed variety from the current popular Windows fonts.
  2. Font embedding in WPF: I haven’t had a chance to write a blog entry about this, but you can embed fonts into your WPF/Avalon application (even ones hosted in the browser). Many fonts provide licensing terms that allow you to freely embed and redistribute a font in an application (the WPF SDK will provide several free fonts from Ascender for this purpose).

Adrian proposes some solutions — but one thing he’s missing is reliable technology for font embedding in web browsers. IE has this feature but you don’t see it used much. Probably due to a combination of the following issues:

  • Download size for quality fonts: Embedding a high-quality font can easily balloon a page size
  • Lack of embeddable fonts: Not all fonts are licensed for embedding
  • No cross-browser support: I’m not sure how much this was the issue, since many other IE-only features were adopted before they had cross-browser support

Customizing SinglePageViewer (Part 3)

A few weeks ago, we created a functional (but ugly) ControlTemplate for SinglePageViewer. Now, we’ll add visual polish to make our UI match the content we’re displaying. I’m being lazy today, so I’m going to re-use the chocolate document I’ve shown before. Here’s the screenshot, in case you haven’t seen it:

An attractive multi-column document created using Avalon

The markup is too large to show inline, but you can download the full markup (and images) in this file: chocolate.zip.

If you look through the source markup, you’ll notice heavy use of ControlTemplates and Triggers in order to achieve the custom look and subtle animation used in the sample. Aside from these Style declarations, the markup is pretty much the same as the last ControlTemplate we created — we’re still using a DocumentPageView, Slider, and a couple of Buttons.

Number Substitution

One of the random things I’ve learned about while working on WPF/Avalon are the different number systems used through out the world. I wrote a XAML example that shows some the support for number substitution. Here’s a screenshot and the markup:

The number 4.39 in English, Portuguese, Arabic, Thai, and Panjabi writing systems

<Border xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
        Padding="10" HorizontalAlignment="Center" VerticalAlignment="Center" BorderBrush="#ccc" BorderThickness="1">

  <Grid HorizontalAlignment="Center">
    <Grid.Resources>
      <!-- Common properties for all TextBlock elements -->
      <Style TargetType="{x:Type TextBlock}">
        <Setter Property="FontFamily" Value="Constantia" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="Margin" Value="5" />
      </Style>
      <!-- Properties for the number display, the databinding is done here -->
      <Style x:Key="NumberDisplay" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
        <Setter Property="NumberSubstitution.Substitution" Value="Traditional" />
        <Setter Property="Text" Value="{Binding Path=Value, ElementName=NumberSlider}" />
        <Setter Property="Grid.Column" Value="1" />
        <Setter Property="MinWidth" Value="50" />
      </Style>
    </Grid.Resources>

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <!-- Title and Slider -->
    <StackPanel Grid.ColumnSpan="2">
      <TextBlock Grid.ColumnSpan="2" FontWeight="Bold" FontFamily="Candara" FontSize="30">Number Substitution</TextBlock>
      <Slider Grid.ColumnSpan="2" Minimum="0" Maximum="10" Name="NumberSlider" IsSnapToTickEnabled="True" TickFrequency=".01" Width="Auto" MaxWidth="300" Margin="10" />
    </StackPanel>

    <!-- Row Shading -->
    <Rectangle Grid.Row="1" Grid.ColumnSpan="2" Fill="#dec" />
    <Rectangle Grid.Row="2" Grid.ColumnSpan="2" Fill="#ffd" />
    <Rectangle Grid.Row="3" Grid.ColumnSpan="2" Fill="#dec" />
    <Rectangle Grid.Row="4" Grid.ColumnSpan="2" Fill="#ffd" />
    <Rectangle Grid.Row="5" Grid.ColumnSpan="2" Fill="#dec" />

    <!-- Labels -->
    <TextBlock Grid.Row="1">English (en-us)</TextBlock>
    <TextBlock Grid.Row="2">Portuguese (pt-pt)</TextBlock>
    <TextBlock Grid.Row="3">Arabic (ar-sa)</TextBlock>
    <TextBlock Grid.Row="4">Thai (th-th)</TextBlock>
    <TextBlock Grid.Row="5">Panjabi (pa-in)</TextBlock>

    <!-- Numbers -->
    <TextBlock Grid.Row="1" xml:lang="en-us" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="2" xml:lang="pt-pt" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="3" xml:lang="ar-sa" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="4" xml:lang="th-th" Style="{StaticResource NumberDisplay}" />
    <TextBlock Grid.Row="5" xml:lang="pa-in" Style="{StaticResource NumberDisplay}" />
  </Grid>
</Border>

You can copy and paste the code into XamlPad and manipulate the slider in order to see the changing values live (which is pretty neat in a very nerdy way).

The markup may look large, but that’s mostly my formatting (because I like to make things look pretty). Here’s a simplified excerpt to show the important part:

<TextBlock xml:lang="ar-sa" NumberSubstitution.Substitution="Traditional" />

The snippet above does two things. First it sets the culture of the content being displayed in the TextBlock, in this case Saudi Arabic (ar-sa). In order to activate the number substitution in this sample, we also have to set the NumberSubstitution.Substitution property to Traditional, which tells the system to look at the culture of the current context, instead of the system setting.

I’ll close this entry with a second screenshot, showing a different number this time:

The number 7.01 in English, Portuguese, Arabic, Thai, and Panjabi writing systems

Update 10/28: Norris Cheng, a fellow Avalon team member, pointed out something I should clarify/correct in this entry (which I’ve paraphrased below):

The NumberSubstitution.CultureSource tells the system which CultureInfo it should look at: xml:lang (the default), the user’s machine setting, or the NumberSubstitution.CultureOverride property. The reason we set NumberSubstitution.Substitution (which should really be called SubstitutionMethod is that even for cultures like ar-SA, latin digits are used by default — you need to set NumberSubstitution.Substitution to Traditional to tell the system to use the traditional digits instead.

Ed Interlock

Ed Interlock is an OpenType font with some cool ligatures. Here’s a screenshot with a sample phrase:

The words 'Do you have a font fetish?' written in the Ed Interlock font -- with ligatures enabled

Here’s the same text with the ligatures disabled:

The words 'Do you have a font fetish?' written in the Ed Interlock font -- with ligatures disabled

In case you have the font installed, here’s the markup I used to generate the screenshots:

<StackPanel xmlns="http://schemas.microsoft.com/winfx/avalon/2005" xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">

  <TextFlow FontFamily="Ed Interlock" TextAlignment="Center" Margin="10" FontSize="40">
    <!-- Ligatures default to true, but set property here for completeness  -->
    <Paragraph Typography.StandardLigatures="True">DO YOU HAVE A FONT FETISH?</Paragraph>
  </TextFlow>
  <TextFlow FontFamily="Ed Interlock" TextAlignment="Center" Margin="10" FontSize="40">
    <Paragraph Typography.StandardLigatures="False">DO YOU HAVE A FONT FETISH?</Paragraph>
  </TextFlow>

</StackPanel>

Watch the PDC Talks

As Mike announced last night, the PDC talks have been posted online for streaming. Here’s a direct link to my talk: PRS330: Creating Rich Content Experiences in Your WPF/Avalon Applications.

Every talk is posted, so there’s a lot to watch. Here are direct links to talks by my fellow team members (note that there are other WPF/Avalon-related sessions as well, make sure to browse the Presentation track if you’re interested):

Speaker(s) Session
Michael Wallent PRS200: Choosing the Right Presentation Technology: WPF/Avalon, Windows Forms, ASP.NET, IE, and more
Rob Relyea PRS305: A Lap around WPF/Avalon
Pablo Fernicola PRS309: Overview of Windows Vista Graphics
Nick Kramer PRS313: Integrating WPF/Avalon with your Win32/MFC Application
Lauren Lavoie PRS314: Using Application Services
Robbie Ingebretsen PRS317: Beautiful Code, Beautiful Design - Applications Your Designers Can Work With
Namita Gupta PRS324: Using Data in Your WPF/Avalon Applications
Kam VedBrat PRS325: Advanced Graphics (Part 1): 2D, 3D, and Text
Alexander Stevenson PRS327: Optimizing WPF/Avalon applications for performance
Greg Schechter PRS328: Advanced Graphics (Part 2): Animations, Imaging, Effects, and Media
Henry Hahn PRS329: Building User Interfaces with Advanced Layout Techniques
Filipe Fortes PRS330: Creating Rich Content Experiences in Your WPF/Avalon Applications
Kevin Moore PRS431: Building Custom Controls
Chris Anderson, Jeff Bogdan, and Greg Schechter PRS435: Going under the Hood to Understand the Architecture

Note: You’ll need to use Internet Explorer to view the presentations.