I’m Speaking! Woohoo!

In addition to attending, I get to speak again this year. Twice, in fact. First off is a workshop. This will be an encore (and updated) performance of the workshop I did last year about the fundamentals of design. Microsoft specifically asked me to present the same workshop this year because we had a really great response to it last last year and this seems to still be a very hot topic. That’s awesome: technical folks want to know more about design.

I’ve refined some things for this go around, but the basics of the content will be the same: the fundamental principles of design presented for non-designers. New stuff is: new content about typography, some updated thoughts about realism in UI, icons and imagery as well as some better organization and refinement overall. I’ve also tried to update a bunch of the examples we look at.

It’s Not Too Late to Register for the Workshops (Even if You Already Registered for MIX)

Some things about workshops: first, it was a fluke that it was recorded last year and I don’t think we’ll be so lucky this year. Second, even if you’ve already registered for the conference (and I’ve heard that space is running out), you can go back and add the workshops to you’re registration if you’ve had a change of heart. And you should. The workshops look really cool this year.

My Session: Hands on With Design

In addition to the workshop, Microsoft is also letting me present a session. This session is mostly made up of content that didn’t quite fit into the workshop. Where the workshop is a lot about “what is” design, the session is more hands on and “how to” design. It may be a little random (it’s the scraps after the workshop after all) but hopefully really fun and useful. I’ll cover everything from process kinds of stuff to some tactical XAML kinds of things.

This Year’s Kaxaml Swag

Finally, a little about Kaxaml swag this year. So, it just didn’t feel right to order new swag this year since 1) I have about 450 stickers left and 2) Kaxaml hasn’t really changed at all since last year. So this year we’re going sticker crazy! The goal is to “place” all 450 stickers in good homes so that next year when we have a fresh version of the app we can also have fresh swag to celebrate. Therefore, if you are at the conference and have a need for a sticker, do not hesitate get one (or two or up to 450). They are quickly become collectors items, by the way. Time is running out.

Well, that’s it for now. See you at MIX!

Kaxaml Update

I had a great conversation with Rob Relyea (Mr. XAML) yesterday about the future of Kaxaml and he shared a lot of very useful pointers about how to use some upcoming .NET 4.0 features to make Kaxaml super awesome. Looks like he’s already written much of the code for us!

So here’s the plan. No updates until the week after MIX, but I’ve reserved a few days that week to dig in. At that point, I’ll also update the code on codeplex and if anyone would like to lend a hand, I would warmly welcome it. I haven’t done a good job getting community support in the code so far. Part of the next update will be (hopefully) making community participation a little easier. If you’re interested in lending a hand that week, let me know. It will be fun. Maybe we can make t-shirts or something.

Some of the features I’d like to add (time permitting):

• Support for external assemblies
• x:Class / Event stripping
• Basic .csproj support / App.xaml support
• “Real” intellisense (right now I just parse a big .XSD)
• Better Silveright support (some tough problems here still)
• ResourceDictionary preview
• Better MVVM (when I wrote this, MVVM was really new and the current implementation feels very broken now)

Downloads

I noticed this morning that I’ve had 88,000 downloads of Kaxaml so far. That sort of blew my mind. I realize that as developers we reinstall our machines a lot. At least a dozen of those downloads are from me, but it’s still a much bigger number than I expected. I’ve had a pretty good number of inquiries over that time from people who want make donations. I’ve never accepted anything but the gesture has always been really appreciated.

The Request

Well, I have a request. If you use Kaxaml, here’s a way to help: this morning I got an email from a colleague in Romania (Niamtu Dragos). He’s the man behind xamltemplates.net. Dragos is currently donating any sales of the content on his site to Daniel Raduta.

I don’t know Daniel, but he’s got leukemia and needs a bone marrow transplant that he can’t afford. He’s a developer like us and he has a family. He’s expecting his first child next month. I find it tragic that right now his life depends mostly on financing! The knowledge and technology to beat this exist, he just needs to pay for it. Seems like that should be a technicality or an afterthought but right now it’s the thing that’s keeping him from getting the help he needs. That’s heartbreaking!

So, here’s the request: If you’ve thought about donating to Kaxaml in the past then use those funds to support Daniel. Theoretically, there are thousands of us. If we each donated just a few dollars we would save this guys life! To donate, you can buy something from xamltemplates.net or donate directly to Daniel by clicking below. If you do and you want to let me know it was for Kaxaml, drop me a line (or feel to keep it anonymous too).

I realize that 2010 is officially 1/12 over and so any excuse about waiting until the last minute to allow for late breaking slam dunks is going to seem disingenuous. The truth is that over Christmas vacation, I compiled most of the list and even wrote 90% of a Silverlight app for showcasing it. I made the mistake, though, of including a place for a “blurb” about each album in the app and it’s taken me until tonight to write all of those. Well, without further ado, here it is: my best albums of 2009.

This is (as I mentioned) a Silverlight 3 app. You’re welcome to download the source (here) and do with it as you please. It uses the completely awesome Saluse Media Kit to create the playback visualization bars (in conjunction with the must have WriteableBitmapEx extensions for WriteableBitmap). If you have your own list of 25 albums, it would be easy to reuse this. It’s driven by an XML file. Expect more lists from in the near future (including the already compiled best albums of the decade which just need blurbs now).

That said, it’s been a long time since I dusted off the Kaxaml source. Here’s where we are: 1) Unfortunately, Kaxaml is just a hobby so it always takes a backseat to real (read “paying”) work. 2) I really want to release a new version based on the .NET 4.0 xaml parsing stuff. I wanted to ship that in beta before MIX, but my workload may keep that from happening. We’ll see. 3) The current Kaxaml “beta” actually does support Silverlight 3 even though the website implies that we’re just barely there for Silverlight 2. Sorry Kaxaml. You know I think you’re the best, right? Let’s totally promise to get together soon. Call me.

I’ve gone a little dark on the blog lately, mostly due to a suddenly very busy schedule (a good thing for our small team of one at Pixel Lab World Headquarters). I’m excited, though, to share a little about at least one project I’ve been working on: Seesmic for Windows which was announced today at the PDC.

I helped out with the UX on this one, doing a lot of the design work and much of the UI implementation in the Windows / WPF version. What a fun project. Seesmic has been great to work with: really talented engineers and super passionate leadership.

Seesmic, of course, already had a solid app going into the project, and much of the design process was about keeping the good from the current app in tact. They’ve had, after all, a whopping 3 million downloads in 6 months.  Also, Seesmic has got special appeal with twitter pros (the guys who manage multiple accounts and tweet blindfolded) and we felt that it was critical that we not take anything away from them.

On the other hand, we we wanted to evolve the UI so that it felt native, clean and beautiful on Windows.  That resulted in things like the integration with Windows glass and the updated visual design. We also wanted the app to look and feel really lightweight and ultimately, much of my job was to keep the UI quiet so the focus of the app would be the content.

The design will continue to evolve, but here you can see the current app next to the new. I’m excited about the direction.

Well, It’s been an exciting day. There’s been good coverage about the app, including stories from TechCrunch and Mashable and a nice write up on the Windows Experience Blog. You can read more about the new and planned features there (including a very exciting plugin model that .NET developers won’t want to miss). To download the beta, you need to join team Seesmic. I think that may be Seesmic’s way of reminding you that this is still a beta! If you try it out, I’d love to know what you think.

A handy feature of WPF is the ability to tell TextBlock to truncate its text to ellipses if it runs out of room. You do this by setting the TextTrimming property on the TextBlock and voilah!, your text ends up looking “like this…” This is especially handy in databinding or localization scenarios where you don’t know what the text will be ahead of time (and so you can’t necessarily allocate space properly).

So far this property is missing from Silverlight (we’re looking at you Silverlight 4).

I’ve written work arounds a couple of times, but never been really happy with the results. The problem is that I’ve normally derived the new control from TextBlock. In doing this, I’ve had a hard time getting the TextBlock to lay out it’s text in time for me to re-measure it and adjust accordingly. Everything gets kind of messed up and I’m usually one layout pass ahead or behind.

I took a different approach this time and made the Control itself a ContentControl that hosts a TextBlock. It works much better. Now I can opportunistically change the text and then re-layout, all from within the MeasureOverride of the ContentControl. It’s pretty clean.

There’s plenty of room for improvement here. Specifically, I’m just shortening the text one character at a time. I’m pretty confident that could be improved. Also, I only have the equivalent of TextTrimming=”CharacterEllipses” and not TextTrimming=”WordEllipses” but that one should be pretty easy to add too.

You can get the source here, or try out the control here.

What are Simple Styles?

Simple Styles are a set of styles and (more importantly) control templates that are designed to be a starting point for creating your own custom templates. The idea is to include all of the essential elements of the template and no extras. It’s a stripped down version of the control template, presented in full color (well, two colors) for your tweaking pleasure.

I’m a Silverlight geek and I want some details

Simple Styles should work great for XAML geeks (handcoders) and Blend nerds alike. They use the VSM (as all good Silverlight control templates should) and include all states that I deemed common (someone had to be the deemer here, let me know if I missed something). In many cases I don’t do anything with the state, but I still included it. That was to increase Blend friendliness so that the states show up in the states editor.

I also (and this was a tough decision) chose to (in most cases) not use a lot of template bindings to propagate properties through the control. Unfortunately, the VSM editor / animation editor in Blend doesn’t like bindings. Since I really believe in the Blend state editor, I decided to pull the plug on those bindings. For handcoders, this might not be the right decision. Sorry handcoders, I think it’s for the best.

Where do I get them?

You can get Simple Styles for Silverlight by clicking on any of the links in the sample app above, or you can download the entire project (including the sample app) right here. They are also hosted on the labs page.

How do I use them?

Well, it’s kind of up to you. If getting started isn’t intuitive, then you probably want to read a little about Resources, Styles and Control Templates in Silverlight. Then you want to learn about editing Control Templates in Blend. If you feel like you understand these things and still feel lost, then email me and maybe I can get you pointed in the right direction.

Here’s a little time saver. I sort of have a routine that I go through when I create a new WPF project. One of those things is to create a resource dictionary (I’m down to one on most projects now, but more on that later) that includes some common stuff that is nice to be able to depend on while your cranking out XAML.

Among those, are these super simple geometry resources:

<Geometry x:Key="DownArrow">M0,0 L1,0 0.5,1Z</Geometry>
<Geometry x:Key="UpArrow">M0,1 L1,1 0.5,0Z</Geometry>
<Geometry x:Key="RightArrow">M0,0 L1,0.5 0,1Z</Geometry>
<Geometry x:Key="LeftArrow">M0,0.5 L1,1 1,0Z</Geometry>
<Geometry x:Key="CloseX">M0,0 L1,1 M0,1 L1,0</Geometry>

Simple, but handy when you (inevitably) need to bust out an arrow for some reason. You use them like this:

<!-- DownArrow -->
<Path Data="{StaticResource DownArrow}" Width="10" Height="8"
  Stretch="Fill" Fill="Black" />

<!-- CloseX -->
<Path Data="{StaticResource CloseX}" Width="12" Height="12"
  Stretch="Fill" Stroke="Black" StrokeThickness="3" Margin="10" />

All together, they look like this:

The geometries themselves all happen within a real coordinate space of a pixel, so it’s important to set the Stretch property to Fill, that way the geometry with stretch to the size of the Path element.

Unfortunately, this is WPF only. Silverlight (SL2 at least) doesn’t like to work with Geometries as resources. If someone tries it out in SL3, let me know how it goes.

UPDATE #2: Dr. WPF (ironically) suggested a sweet workaround for Silverlight. Instead of adding the resources as Geometries, add them as strings, like this:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:sys="clr-namespace:System;assembly=mscorlib">

  <Grid.Resources>
    <sys:String x:Key="DownArrow">M0,0 L1,0 0.5,1Z</sys:String>
    <sys:String x:Key="UpArrow">M0,1 L1,1 0.5,0Z</sys:String>
    <sys:String x:Key="RightArrow">M0,0 L1,0.5 0,1Z</sys:String>
    <sys:String x:Key="LeftArrow">M0,0.5 L1,1 1,0Z</sys:String>
    <sys:String x:Key="CloseX">M0,0 L1,1 M0,1 L1,0</sys:String>
  </Grid.Resources>
</Grid>

The usage from XAML is then exactly the same as WPF. Nice one, doc!

Funny how your own site is always the lowest priority when your job is to create websites for other people. It’s like the auto mechanic with the broken down car. Well, last week (while I was on vacation with the family) I was finally able to sneak a couple of hours to get the site for Pixel Lab (that’s my budding young company) out the door. You can see the (kind of) finished product here.

I say kind of because I haven’t had a chance to build out the “case studies” section under services yet and, frankly, that’s probably the thing people want to see. For now, I’m just happy to have something live! Case studies will be coming soon.

It’s fun to be your own client. The design reasoning went something like this: first of all, it’s a lab, so it needed to be kind of sciency. For me, the quintessential science feeling happened in labs in the late 50s and 60s. The feeling I wanted is something like Flubber meets Heisenberg. So, I was drawn to retro science photographs and equipment.

It turns out that there is also a very strong design aesthetic associated with that era: the International Typographic Style is an an aesthetic that has, arguably, become an archetype of design. It’s instantly recognizable as Design (notice the capital “D”). International typographic (sometimes called “swiss style” or “swiss typographic”) is known for strong order, use of grid, black and white imagery, bold colors and, most of all, Helvetica (and a handful of similar fonts).

So, I was settling in on a style: swiss typographic + retro science stuff. It was a nice package, all from the same era. To move the aesthetic forward a little, though, I introduced a second font (the one that matches the Pixel Lab logo) for the main headings on each page and I built out some gradients (some softening on the pixels in the logo and highlights on the zoomed in content), and added a bunch of motion. Then I went about building content.

For fun, I also played around with some sound. I’m not normally a fan of a lot of sound, but my wife had to talk me down from actually using music! So, I got a little caught up in the whole sound thing I guess. In the end, sound is off by default because I still haven’t gotten it quite right (plus as we all know, sound can be a little annoying if you weren’t expecting it). I really like how sound can influence a mood though. The song I was trying to cut up for a soundtrack, by the way, was “Don’t Give Up” by Whites Boy Alive. It’s a cool song and the perfect mood for the site. I think my wife was right, though, that not many people can pull of a soundtrack on a website (although, for the record, Scott Hansen can).

[see post for audio]

At a technical level, I learned some stuff about sound and wrote some handy code that is worth sharing so expect a forthcoming post on Silverlight and sound effects.

Incidentally, the design happened quickly on this one. It was much less labored than other designs that I’ve done with myself as the client. I’ve been trying to figure out why that would be. Perhaps inspiration just struck, but I also keep being reminded of Hillman Curtis and the emphasis that he places on discovering a theme. With this project, I discovered the theme early on and I think that may have made the difference.

Either way, it was a fun project and, even if there is still a little more to do, it feels great to have it live. So, let me know what you think!

By the way, thanks to the Microsoft guys (Jaime and other folks) who made sure this recording got online. Initially, since it’s a workshop, it was not going to be posted. Normally workshops and precons don’t get recorded or posted. Microsoft really went out of their way, though, to get this one out there (after we found out it had been recorded by accident). Maybe they realized that this is a tough year to be budgeting for addons (like workshops) at conferences and there are probably people who would have liked to have attended.

I guess we also want to thank the attendees who asked to get it online. I think that enough people clamored to get it up there. So, thanks guys!