Filed under: Code

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

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

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

Help Me with MIX09

image

I’m pretty intimidated by the amount of time I’m going to be wired to a microphone at MIX this year: a total of something like 7 hours (even after you account for breaks).  Yikes.  So I’m preparing content early.  Like I mentioned earlier, I’ll be doing two workshops: Design Fundaments for Developers and Hiking Mt. Avalon. 

So, here’s what I’d like to know from you: whether you’ll be at MIX in person or end up watching online, what would you hope to get out of these?  How could I help make this content useful / relevant / interesting / fun / more-like-this-and-less-like-this?

The first workshop, Design Fundamentals for Developers, is a crash course in user experience design.  It’s all of the good parts of design school (inspirational examples, thought-provoking conversation) and none of the bad (homework, textbooks, or a 3 year commitment). 

The second, Hiking Mount Avalon, is really practical approach to getting stuff done with XAML: how to organize a project, how to create assets, approaches to various UI problems, etc.  I’m presenting with Jaime Rodriguez and you can check out the XAML guidelines he’s been putting together. 

So, if you have thoughts, please send them my way.  I’d love the feedback!  Feel free to do so by leaving a comment below or send email to hello@nerdplusart.com.  If Microsoft is going to let me fill up 7 hours of your time at MIX, I’d like to use it well!

1 comment

Leave a comment

Become a Kaxaml Power User in about 7 Minutes

biglogo

I took my new Jing Pro account to task today and recorded a few videos about Kaxaml.  I’ve been meaning to record these for, well, about a year.  It’s been a really busy year!

There are a couple of Kaxaml features that you probably wouldn’t know existed unless somebody told you about them.  So far, I’ve told about three people.  Even if they’ve told three people each, we’re only at nine…so my hunch is that word is spreading slowly.

The first is an intellisense-like dropdown menu for snippets.  Then comes a cool "synchronize" feature in the ColorPicker.  And, last but not least, is the Paste Image feature which lets you past images directly into your XAML.

So, if you want to be a Kaxaml Pro, just check out the videos below (probably best viewed full screen). 


Become a Kaxaml Power User Part One: Snippets from Robby Ingebretsen on Vimeo.


Become a Kaxaml Power User Part Two: Color Picker from Robby Ingebretsen on Vimeo.


Become a Kaxaml Power User Part Three: Images from Robby Ingebretsen on Vimeo.

9 comments

Leave a comment

MIX 10K Entry is Live…

image

…and so far the voting results are kind of dismal.  Hmmm.  Maybe not everybody appreciates the chance to digitally apply a sweet ‘stache to the richest man alive.  Or maybe the retro thing doesn’t work for everyone.  Or maybe it’s just kind of confusing. In the end I had to cut a bunch of features and, frankly, this Moustachr is a shell of the app it used to be.  So sad.  The fight from 17K to 10K was hard on both of us. 

At any rate, it was a lot of fun to build and I love this contest.  I already have an idea for next year.  That’s right MIX 10K.  You haven’t beat me yet.  I’ll be back!  (And now I know just how little 10,000 characters of code really is.)

6 comments

Leave a comment

10K is Way Less than You Think

Snowed in over the weekend, I started on my submission to the MIX 10K challenge.  I’m pretty sure that whoever came up with HorizontalTrackLargeChangeDecreaseRepeatButton was deliberately sabotaging me!

2 comments

Leave a comment