XAML Scrubber for VS

Pete took me up on an my challenge to make a VS plugin for XAML Scrubber (the XAML cleanup utility in Kaxaml), a challenge which apparently I extended in this video with Adam Kinney.  I’m glad he did.  This is awesome

Thanks Pete! It’s great to see how a community can extend something do. XAML Scrubber just doubled (maybe tripled) its utility to me!

One more. Along those lines, I was flattered that Page Brooks wanted to include my Silverlight snippets in the super handy Silverlight Contrib project. Nice! Way to go XAML community.  We’re awesome.

2 comments

Leave a comment

Fascinating Color Visualization on Kuler

image

I just came across this great addition to the already very cool Kuler color picker app (which is, in case you haven’t seen, now Expression friendly).  It’s a visualization of color additions by season and geographic location.  The impact of culture and season on the palette seem to be subtle, but some interesting trends emerge (like a bias toward blue in the US and one toward pink in Japan).  Whether it varies much or not, it’s fascinating to see color choices laid out like this.  There seems to be an affection along the “temperature” poles—blues on the one hand and warm reds and oranges on the other.  The more ambiguous hues—the greens and purples—appear to be used more selectively.

Data viz is seeing it’s day and this is a striking example.  That’s partially due to a great dataset that lends itself well to visualization.  But it’s also a great execution.  Nice job Kuler!

1 comment

Leave a comment

Silverlight Code Snippets for DependencyProperties and other Handy Stuff

image

Download The Snippets Now (provided for the reading averse)

I was teaching someone about DependencyProperty the other day when I realized two things: first, DependencyProperty is a bad name.  Does anyone know what they depend on (DependencyObject doesn’t count)?  The dependency thing makes them sound kind of wimpy when, in fact, they’re actually awesome.  Going forward, you can use the terms DependencyProperty and SuperProperty interchangeably with me.

Second, I realized that there isn’t a good built in snippet for Silverlight DPs (or SPs). At least not one that I know of.  And without a snippet, whose going to bother to create a DP.  Seriously, it would be a pain.

I’m a snippet enthusiast or, dare I say, a fanatic.  It’s because I think that a good snippet library makes for good code: it makes your code consistent and it encourages you to do things the “right” way even if “right” requires a lot of code.

I’m such a snippet fan, in fact, that I devoted my talk at MIX last year to the subject.  Unfortunately, a lot of the snippets from the talk have grown stale.  In the meantime, I’ve been building out a new library.  For WPF, I use Dr. WPF’s indispensible snippets.  For Silverlight, I’ve slowly been building up a new library.  Since I haven’t been able to find much else out there, I thought I’d share mine.

Download The Snippets

If you’re new to VS snippets, you can get the skinny here.  To use them you just install the .vsi (see link above) and then type the snippet shortcut (e.g. sldp), hit tab a couple of times to kick off the snippet and then start providing the values it asks for (hit tab to move between values).  When you’re done, hit enter.

The Short Descriptions

Here’s the short guide to the snippets.  A little more detail follows.

sldp A basic Silverlight DependencyProperty
sldpc A Silverlight DependencyProperty with a property changed callback
sldpa An attached Silverlight Dependency Property
slevent A really basic event definition
slsbc An inline, anonymous Storyboard.Completed handler (check this one out, it’s cooler than it sounds)
slpanel A really simple implementation of a panel
slrss A super basic collection class that loads an RSS feed
slvc The boilerplate code you need to create a value converter

The Long Descriptions

sldp

This snippet creates the most basic DependencyProperty (i.e. SuperProperty) possible (well, most basic possible that is still useful).  You just specific the name, the type and the default value. Helfpul hint: remember that when you provide a default value for a double, you need to include the decimal (like in 0.0 instead of just 0) so that the compiler treats is like a double and not an int.

#region MyProperty (DependencyProperty)

/// <summary>
/// A description of the property.
/// </summary>
public int MyProperty
{
    get { return (int)GetValue(MyPropertyProperty); }
    set { SetValue(MyPropertyProperty, value); }
}
public static readonly DependencyProperty MyPropertyProperty =
    DependencyProperty.Register("MyProperty", typeof(int), typeof(Page),
      new PropertyMetadata(0));

#endregion

sldpc

This is a DependencyProperty that includes a a place to handle the associated property changed notifications (and a protected method in case subclasses also want to know about the change).

#region MyChangingProperty (DependencyProperty)

/// <summary>
/// A description of the property.
/// </summary>
public int MyChangingProperty
{
    get { return (int)GetValue(MyChangingPropertyProperty); }
    set { SetValue(MyChangingPropertyProperty, value); }
}
public static readonly DependencyProperty MyChangingPropertyProperty =
    DependencyProperty.Register("MyChangingProperty", typeof(int), typeof(Page),
    new PropertyMetadata(0, new PropertyChangedCallback(OnMyChangingPropertyChanged)));

private static void OnMyChangingPropertyChanged(DependencyObject d,
    DependencyPropertyChangedEventArgs e)
{
    ((Page)d).OnMyChangingPropertyChanged(e);
}

protected virtual void OnMyChangingPropertyChanged(DependencyPropertyChangedEventArgs e)
{
}

#endregion

sldpa

This is a snippet for an attached DependencyProperty.  That means that this value can be set on any element (e.g. Canvas.Left is an attached property defined by canvas to be set on other elements).  This also has property changed handler, but notice that its a static.  That’s because the change could happen on any object so you’ll want to pay attention to the DependencyObject that gets passed in to the handler.  That’s the object where the property was changed.

#region MyAttachedProperty (Attached DependencyProperty)

public static readonly DependencyProperty MyAttachedPropertyProperty =
    DependencyProperty.RegisterAttached("MyAttachedProperty", typeof(double), typeof(Page),
    new PropertyMetadata(new PropertyChangedCallback(OnMyAttachedPropertyChanged)));

public static void SetMyAttachedProperty(DependencyObject o, double value)
{
    o.SetValue(MyAttachedPropertyProperty, value);
}

public static double GetMyAttachedProperty(DependencyObject o)
{
    return (double)o.GetValue(MyAttachedPropertyProperty);
}

private static void OnMyAttachedPropertyChanged(DependencyObject o,
    DependencyPropertyChangedEventArgs e)
{

}

#endregion

slevent

This snippet creates a really simple event.  I use the RoutedEvent types even though (as far as I know) they aren’t actually routed.  There may be a better practice here, but this meets my needs 90% of the time.  Feel free to let me know if you have a better suggestion.

#region SomethingChanged

/// <summary>
/// A description of the event.
/// </summary>
public event RoutedEventHandler SomethingChanged;

private void RaiseSomethingChanged()
{
    if (SomethingChanged != null)
    {
        SomethingChanged(this, new RoutedEventArgs());
    }
}

#endregion

slsbc

This snippet creates an inline completed event handler for a storyboard using an anonymous delegate. I like this approach for handing completed events because it makes it straightforward to remove the handler (thanks to Dr. WPF for that suggestion) and it allows you to access local variables from within the handler.  I haven’t found a clean way to do either of those things any other way, so I end up writing most of my Storyboard event handlers this way.   By the way, the delegate has to be declared first like this so that we have a reference to it (to remove it) from within the handler.

// using an anonymous, inline handler for the completed event allows you to use 
// local variables from within the event handler and keeps our code cleaner

EventHandler handler = null;
handler = delegate(object s, EventArgs e)
{
    // remove the handler 
    MyStoryboard.Completed -= handler;

    // code to execute when the storyboard is completed goes here
};

MyStoryboard.Completed += handler;
MyStoryboard.Begin();

Note: The rest of these snippets are much longer so I’m not going to include them inline.  You’ll have to download them to check them out.

slpanel

This snippet creates an entire panel, including very very basic implementations of MeasureOverride and ArrangeOverride.  To be clear, this is not a robust panel implementation.  MeasureOverride, in particular, is not going to give you the results you probably want in advanced scenarios (like inside of a ScrollViewer).  But this will get you started.  It’s gets the boilerplate out of the way and lets you start partying on the layout logic really quickly.

slvc

This snippet creates a shell for a ValueConverter which you can use in conjunction with a binding to modify a value during the binding process.  It’s an entire class (like the panel) so you’ll want to make sure you use it in the right spot in your file.

slrss

This snippet creates a very simple collection out of the items in an RSS feed.  You provide the URL and this does the rest.  It’s a great way to quickly get up and running with a databinding scenario.  I mostly use this for training, etc.  It’s also a simple example of how to parse an XML feed using LINQ and how to load a file using the async web request stuff.  Oh, and it includes the content for a simple crossdomain.xml policy file.  It’s kind of a grab bag but I kept it around bits of it from time to time.

16 comments

Leave a comment

Kaxaml Swag: The Stickers Have It

image

Well, first of all, you’ll be happy to know that the sticker order has been placed.  Now we just need to cross our fingers that they get printed and delivered in time.  A month seems like plenty of time, right?  That’s what I think and so I chose to ignore the whole “delivery may take 2-3 weeks after printing” thing.

Second, thanks to all for some truly inspirational xaml-inspired poetry. Keep up the good work. Like a proud parent, I don’t have favorites (that I’ll admit to). But let’s just say that Cory is a straight-A student and I know what you mean about the bitter tears. And Dr. WPF, if you send me your Zune then I’ll happily Kaxaml-brand it for you.

Once the stickers show up, I’ll start trying to track folks down for a place where I should send the loot. In the meantime, if you’ve submitted your poem then know that your sticker has been secured (no pun intended).  For those who haven’t yet found inspiration, there’s still time.  Haiku too constraining?  New rule: I’ll also accept a Fib (that’s right, Fibonacci poetry).

2 comments

Leave a comment

Kaxaml Swag

image

With MIX quickly approaching, it’s time for the (soon-to-become) annual tradition of producing some Kaxaml swag.  Last year I made buttons (the kind you might pin to your backpack).  This year, I’m faced with a choice about what to make.  Well, since the swag is ultimately for you, the Kaxaml enthusiast, I’m looking for some feedback.  What kind of swag would you actually want / keep / not throw away?

Kaxaml brings in exactly $0 in revenue every year (or week for that matter), so I have a pretty limited budget.  The choices are below.  I probably need to decide pretty soon so that I have time to get stuff made which means your chance to sway me is short lived.  So vote soon.  Here’s the poll, additional detail follows:

[poll id="3"]

More Detail

Stickers

For me, this is the most practical because it goes anywhere (car, computer, sofa).  And to be clear, we’re talking about a high quality stick here: clear vinyl with a die cut (yup, it’s in  budget, barely).  There’s a risk though.  They’re saying they need 2-4 weeks turnaround on these.  In spite of this risk, I’m leaning toward stickers right now.

Buttons

The buttons would be a new design. I’m sort of a button kind of guy for some reason. Buttons were all the rage at SXSW last year and that only fueled my interest. From a purely creative perspective, this one is probably the most fun.  On the other hand, once you have one Kaxaml button do you really need another?

Pocket Protectors

I will make these eventually because they are too cool not to make. I also thought about making these with a Nerd + Art or Pixel Lab log. My wife doesn’t think people will take me seriously, though. Oh, I’m serious.

How to Get Your Swag (even if you aren’t at MIX)

If you really want Kaxaml swag, you can definitely get it.  There are three different paths to Kaxaml swagness.  All swag is, of course, first come first serve and here are the options in the order in which it will be served:

  1. First, you can come to either of my workshops.  I get that not everyone can convince their boss to pay for workshops this year.  If it helps persuade, you can take one for your boss too.
  2. You can find me at MIX and say “I want some Kaxaml swag.”  I’ll be flattered and I’ll be very generous.
  3. If you won’t be at MIX, you can leave a comment to this post that includes a Haiku (syllables will be counted) expressing your feelings for Kaxaml.  Also leave me some way to get in touch about where to send it.  Particularly moving entries get double swag.

29 comments

Leave a comment

How To Think Like a Great Graphic Designer

image

I just finished this and it was good enough that I wanted to share a couple of thoughts.  So, yeah, this is a book review—my first ever (unless book reports count, and then it’s my first since 7th grade).  Bottom line: XAML guy, you should read it. If you want to poke your head into the world of serious design, this is a great place to start!

I actually purchased How to Think Like a Great Graphic Designer on a whim. I was intrigued by the audacity of the title.  Well, it doesn’t work.  But the book review doesn’t end here.  Turns out that even though you won’t end this read with a remodeled set of neurons, it does provide some really remarkable insight into the world of graphic design, a world that is more interesting than you may have suspected.  You may not know that you have graphic design heroes, but after reading HTTLGGD you won’t be able to avoid some time on wikipedia to find out more about these semi-masked avengers.

The book is made up of a series of interviews with design greats like Milton Glaser, Stefan Sagmeister and Massimo Vignelli.  The interviews are short and highly readable (think “big margins”). I made it through all 228 pages in a week while traveling—you could probably do it in afternoon if you were committed. The length, I think is key.  There’s a rhythm to the interviews that allows certain themes and ideas to emerge, ideas which might pass you by if you encountered them only in passing.  Set in short succession like this, however, they kind of smack you in the face (in a good way).  Some of the take-aways for me:

Graphic Design is Old School

For starters, compared to the my little corner of design (let’s call it interaction design), graphic design is the Smithsonian, an institution with history, statesman and heroics.  You could argue that some form of graphic design has existed for centuries.  Commercial design as we know it, however, is probably better measured in decades: ancient compared to interaction design (whose lifespan is barely out of single digits), but young enough that many of its pioneering practitioners can still show up for an interview.  I was struck by the nuance that four or five decades can lend to your thinking.  Don’t get me wrong, there are unmistakable masters of our craft (interaction) and they often have a wealth of insight to share, but drawing on a lifetime of experience from greats like Glaser and Vignelli is priceless.

The Relationship Between Design and Creativity

Second, I was delighted to watch as a handful of themes emerged about the nature of design. Delighted because I’ve been preparing content for my workshop at MIX, trying to find a way to deconstruct concepts like design, creativity, empathy and art and much of what I read was illuminating.  I’ll save my conclusions for the workshop, but here are some favorite thoughts on the topic of design and creativity:

I have a pile of stuff in my brain, a pile of stuff from all the books I’ve read and all the movies I’ve seen.  Every piece of artwork I’ve ever looked at.  It’s all in there.  It’s all on one side of the brain.  And on the other side of the brain is a specific [job for a client].  And if you pull the handle on the slot machine, they sort of run around in a circle and what you hope is that those three cherries line up, and the cash comes out. (Paula Scher)

[Design] involves creativity in the way doing a crossword puzzle involves creativity.  You need some imagination and knowledge.  I think of artists as creative because they have to invent something out of nothing.  I think designers design because they can’t invent something out of nothing.  Or at least that’s why I design. (Michael Bierut)

There is a great misconception in this era of graphic design that it is a medium of self-expression (Peter Saville)

Empathy

For me, the best moment of the entire book, however, came in the introduction.  Because of the workshop, I’ve been trying to sort out the difference between the type of design (notice the little “d”) that a developer does (classes, interfaces and eventing models) with the kind of design that gets its own department at a university.  The the thing that makes them similiar, in my mind, is the ordering of things: the organization of concepts into a unified whole.  The difference, however, has been harder to pinpoint.  Finally, I’ve hung my hat on the word empathy.  Surprised? I was too but it stuck.  So, I was thrilled when Millman expressed the same thought!  Sweet!

Many of the designers in this book describe design as a problem solving activity, yet it’s clear that these designers do far more than that.  Despite the obvious similarities, there is one trait shared by each and every person in this group of designers: high levels of empathy.

Well, if somebody could get me to think like a great graphic designer at all I’d be interested but for now peering into the minds of the greats will have to do.  Since the “Design for Devs” workshop was announced, my reading list has been filling up with design books and many are good but few give you a chance to join the club, breath the air, and feel like you belong to the world of design like this.  Maybe it changed the way I think a little a after all.

3 comments

Leave a comment

Web 3.0 is Here

Cornify

5 comments

Leave a comment

New Version of Kaxaml with Support for Silverlight 2 RTW

image

File this one under “it took you long enough.”  I’m (reluctantly) proud to announce that I finally posted a new version of Kaxaml that support the shipping version of Silverlight 2.  To create a Silverlight tab, either choose “New Silverlight Tab” from the file menu or hit Ctrl+L on  your keyboard.  You can tell if you’re looking at a Silverlight tab because it will have a blue dot (instead of the orange one on a WPF tab).

It’s still a beta and the beta-y thing about it are:

1. There is no way to load an image, font or any other resource into the Silverlight page.  I’ve got some ideas for working around this, but haven’t had time to try it out yet.

2. There are still a handful of bugs (thanks to those of you who have sent them!) that have gone unresolved.  So far, nothing egregious but you may run into a handful of things that don’t work as expected.

Happy XAML’ing.  Get the new version here.

14 comments

Leave a comment

Deep Linking + Browser History Navigation in Silverlight

image

Deep linking is a strange term and the first time I heard it was while I was giving a talk.  Someone asked me if Silverlight supported deep linking and I sort stumbled around until I found my way to a big “I don’t know.”  Well, now I do and the answer is, um, kind of.  Technically, it’s a no, but, as with most things, there is always a way.  Last week I spent a couple of evenings trying to track one down.

What do you mean by deep linking?

Before we jump into solutions, here’s the skinny on deep linking for newbies (like me): on a traditional web site, the URL in the browser is pretty closely correlated to the content you’re viewing. If you click on the about link on somepage.com, for example, you would likely go to http://www.somepage.com/about. That link directly identifies that content.  In a Silverlight (or Flash, or AJAX) application, on the other hand, the content is often being loaded by some other container so the URL never changes.  Deep linking is the idea that you somehow embed navigation directives into the URL to the application so that the content in the application is tied to the browser URL.  This is handy for letting people copy or bookmark links, keep track of where they are, etc.

Usually this is done with a bookmark, the part of a URL that comes after a pound (#) sign to indicate some content area within the page.  So if our about example were using this technique, we would get http://www.somepage.com/#about.

The companion to deep linking (and the more difficult technical challenge) is getting deep links to work with the browser’s navigation history.  In other words, every time the URL changes in the browser you would ideally generate a new entry into the browser history.  That way, when someone hits back and forth in the browser, they navigate within the app.

So how do you do it in Silverlight?

Great question and exactly the one on my mind last week.  Turns out that there are already a handful of solutions out there.  For starters, there is a commercial solution included in Telerik’s Silverlight control suite and in a very cool example of openness, someone at Telerik also blogged about a solution (using the ASP.NET script manager).  I found another intriguing example from Asual, the guys who created SWFAddress (which appears to be a favorite Flash/AJAX solution) called .NETAddress.  They have a great sample but it seems to have gone a little stale.

No, how do you do it in Silverlight?

Those are just a couple of at least half a dozen different solutions to this.  As I moved through them, I kept hitting issues: browser compatibility, an unwanted ASP.NET dependency, etc.  In spite of a lot of interest, I couldn’t find a solution that would fit the bill.  I even tried writing my own (based on this helpful sample from Mark Rideout) but quickly found myself sinking in a swamp of browser compatibility issues.

Like I mentioned before, it turns out that lots of people are solving the same problem for AJAX and Flash and so, in the end, I decided to take a jQuery dependency.  I’m really pleased with this solution.  I wrapped a jQuery plugin (jQuery.history) that handles deep linking and the navigation history like a dream.  The jQuery dependency is a much smaller price to pay than an ASP.NET dependency.  Moreover, the library is fast, reliable, and someone else has already done the browser compat work.  Nice!

Using the jQuery.History Wrapper

The wrapper is really straightforward.  The only friction you may feel is inherent in the deeplinking problem itself: your navigation logic will need to be centralized and much less deterministic (i.e. you can be asked to navigate from anywhere to anywhere at any time).  Here’s how to get up and running.

First, include jQuery and jQuery.history in the page that hosts your Silverlight:

<script type="text/javascript" src="scripts/jquery-1.2.6.js" />
<script type="text/javascript" src="scripts/jquery.history.js" />

Next, include jQueryHistoryHelper.cs somewhere in your Silverlight project and then establish an event handler for the static NavigationRequested event on the jQueryHistoryHelper object.

jQueryHistoryHelper.NavigationRequested +=
    new NavigationRequestedEventHandler(jQueryHistoryHelper_NavigationRequested);

In the handler for this event, you’ll write the code to handle all of the navigation for the app.  You have access to the new and the old bookmarks and you can write whatever ninja code you care to for handling that change.

void jQueryHistoryHelper_NavigationRequested(object sender, NavigationRequestedEventArgs fe)
{
    // handle the navigation here
    switch (fe.NewBookMark)
    {
        case "Awesome":
            // do something awesome
            break;

        // etc.    
    }
}

Finally, to request a navigation yourself just call the static method called Navigate on the jQueryHistoryHelper object.  You pass in a string, the new boorkmark to which you want to navigate.  This will update the URL, generate a NavigationRequested event and add an entry to the browser’s history.

jQueryHistoryHelper.Navigate(r.Content.ToString())

Example

Hopefully this is helpful.  You can see an example of this here.  The code for the example is available from the labs page.  If you just want the C# file for the wrapper, you can get that there too.

Finally, this example showcases a bunch of photos that were shot using a technique called tilt shifting in which you simulate a focus depth which would normally only be available at really short distances.  The result is that normal scenes begin to look like models.  It’s like the inverse of 1970’s special effects (don’t believe me? check out Superman II).  The images have a fake depth to them, just like the links… get it?

8 comments

Leave a comment

Inaugural Speech Word Clouds from Four Presidents

A really interesting way to evaluate the rhetoric and ideas on the minds of our Presidents over the past two or three decades.  via ReadWriteWeb.

President Obama (2009)

image

President Bush (2005)

image

President Clinton (1997)

image

President Reagan (1981)

image

3 comments

Leave a comment