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).

UPDATE: There were some issues with the Silverlight app before but they’ve been fixed. I was using a custom MP3 encoder to get live audio visualizations in the app but it was crashing in certain browsers. Everything should be working now (sans visualization), but don’t hesitate to let me know if you’re running into issues. The source, by the way, still includes the audio visualization and if someone can see where I’ve messed things up I’d love to know about it!

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).

I got an email this morning that asked if Kaxaml development had been discontinued. The answer is a big huge no way, Jose.

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.

This is a long time coming. I finally created a version of Simple Styles that is designed for Silverlight. Woohoo! This was a rewrite, a complete departure from the WPF Simple Styles and it may still be a little rough around the edges so please send me feedback!

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.

UPDATE #1: someone asked for the rest of the ResourceDictionary. It’s very basic, but here it is if you’re interested. Basically, it just contains sections for the various types of resources you might create.

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).

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!

1. Stickers
For those of you who have submitted haikus, it’s finally sticker time. I’ll be mailing them out in about a week. Between now and then, please send me a physical address where I can send the sticker. Also, let me know how many you want. No reasonable request will be refused (where reasonable maxes out at about 8 or 9) You can use the email address robby@kaxaml.com. For those of you who didn’t submit a haiku, well, it’s not too late. By the way, I gave away about half of the stickers away at MIX. Wow, that’s 500 stickers (but looks like approximately 1 wheelbarrow full) so I was pretty happy.

2. Video from the workshop
The good news is that the workshop was recorded. It must have been meant to be, because not all of the workshops were recorded, but (mostly by a stroke of luck) mine happened to be one of the lucky few to end up on tape. The bad news is that the first pass at encoding the video produced pretty poor audio. The good news (last one, I promise) is that it is being re-encoded and should probably be live sometime next week. Sweet!

3. Kaxaml and Silverlight 3
The latest beta of Kaxaml works with Silverlight 3 with you doing anything. That said, I’m looking to expand the support and finally bump SL support out of beta. Unfortunately, Kaxaml takes a back seat to paying gigs these days so the best way to get a new release of Kaxaml is to not hire me.  Wait a minute…I mean, if you hire me then I’ll hurry and get you a new release of Kaxaml. I’ll even customize the colors for you.

Realistically, I’m hoping to get a new version out the door in the next few weeks. If you have features or bug fixes that you really care about, now is a good time to let me know. You can send feedback to bugs@kaxaml.com

4. Great conference, see you at others
Well, once again, great conference Microsoft. Looking back, I think it’s my favorite MIX yet and I’ve been to all four! It even beat MIX06 (which has a special place in my heart since it was, well, the first one). I have budget for one or two more conferences this year. One will probably be the PDC. Does anybody have suggestions on the other? I’m currently debating between FITC (Toronto) and Web 2.0 Expo (New York). Hope to see you there!

I just picked up the stickers and they turned out great and they also turned out in abundance. Who knew that 1,000 stickers is really about 5,000 stickers! So please take them from me. Track me down at MIX or submit your haiku!