Before I take off, a couple of shoutouts that I’ve meaning to extend (does one extend a shout out?):

Barack Obama Headlines in Deep Zoom This is not only a fun and great use of Deep Zoom, but it’s also a remarkable way to step back and take in the massive impact of the image of a black president.  Regardless of politics, I haven’t met anyone who isn’t touched by that.  Great idea Vertigo.

Site update and stunning video from IdentityMine IdentityMine just updated their site and with it, a really beautiful video that highlights some of the company’s many strengths (and makes Chad look very serious).  I’ll admit it: the video made me miss working there.  Nicely done IM.

Silveright.FX This is a very nicely designed framework for creating attached behaviors in Silverlight.  As far as I know, attached behavior are more of a side effect of attached properties than a goal, but it’s the thing to watch in our XAML UI world for the next few months.  At first glance, you can miss how handy this can be, but think of it in terms of workflow and code reuse.  Great job Nikhil.

Lately I’ve been making a point of being a little more organized about how I track reusable code.  When I’m working with a client and come across something that is worth keeping or sharing I’ll usually ask if I can do it on my own time so I can keep or share it.  So far everyone’s been very amenable to that idea.  I think it’s a win-win: free code for everyone (future me, you, current clients and future clients).

So here are the first fruits of that, a few “to share” Panels (for WPF and Silverlight) that I’ve been meaning to blog about for a while.  They’re pretty simple, but have proven to be a really handy part of my arsenal.

ColumnWrapPanel (WPF or Silverlight)

Download it here. This is the one I’m most excited about.  It’s a smarter version of a WrapPanel that tries to enforce a little more order on how it arranges its items.  It does this by maintaining a sense of columns and row height as it places the items and then snaps the items to those columns and rows.  Its also smart enough to place items into “empty” spaces that get created by extra tall or extra short items in the panel.  Think of it as WrapPanel without the jaggies.

Here’s some XAML:

<c:ColumnWrapPanel MinColumnWidth="200" RowHeightIncrement="50">
  <Rectangle c:ColumnWrapPanel.ColumnSpan="3" Height="100" Fill="YellowGreen" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="2" Height="250" Fill="Orange" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="1" Height="50" Fill="LightBlue" />
  <Rectangle c:ColumnWrapPanel.ColumnSpan="1" Height="50" Fill="Tomato" />
</c:ColumnWrapPanel>

This solves a problem that I’ve run into over and over and which never had a good solution,  especially when laying out a data entry form or something else where you have a set of items that have dissimilar sizing requirements but which need to fill an area efficiently.  In the case of a traditional form, you could think of each color square as being a StackPanel or Grid that contains grouped elements in the form (e.g. use green for a name, orange for a set of address fields and blue and red for notes or a single checkbox).

By the way, there are some obvious efficiencies to be gained in this code (mostly with how I maintain the cell table) so if anyone finds the time to clean it up, I’d love your updated and better code!

SmartGrid (WPF Only)

Download it here. This is a super simple panel that derives from Grid.  It allows you to specify names for your rows and columns and then assign items by name (rather than by index).  I really like this for two reasons: first, it gives you self documenting XAML and second because it allows you to add and remove columns and rows without need to reindex all the content in your panel.  Here’s what the XAML looks like.

<c:SmartGrid>
    <c:SmartGrid.RowDefinitions>
        <c:SmartRowDefinition RowName="Header" Height="65" />
        <c:SmartRowDefinition RowName="Body" Height="*" />
    </c:SmartGrid.RowDefinitions>

    <Rectangle Fill="YellowGreen" c:SmartGrid.RowName="Header" />
    <Rectangle Fill="Orange" c:SmartGrid.RowName="Body" />

</c:SmartGrid>

I tried to port this one from WPF to Silverlight but I couldn’t find the right hooks.  Unfortunately Silverlight Grid has sealed up Measure and Arrange and the other sizing events were too late to set the indexes properly on the items.  There may have been something else too, but you may succeed here where I failed.  Let me know if your port it.

IndexingStackPanel (WPF Only)

Download it here. This one is old school.  I created it for Kaxaml originally, but continue to get a lot of mileage from it.  It’s a derived StackPanel that sets attached properties on its children to indicate where they show up in the panel.  I use it a lot with an ItemsControl.  It tells you whether it’s odd/even (slightly less useful now that we have alternating row colors built into the framework), first/last/middle and where it is relative to the selected item in a Selector.

My favorite use case for this is dealing with rounded corners on a menu or in a list.  The problem shows up if the thing that contains your list has rounded corners on the top and bottom.  In that case, you want all items to be square except the top and bottom.  With IndexingStackPanel you can just trigger of the attached property to find if you’re top or bottom or middle and adjust the corner radius of the item as appropriate.

By the way, if you use this with an ItemsControl, you need to create the triggers in the ItemContainerStyle (not the ItemTemplate).

I’ll be speaking about Silverlight this afternoon at the <head> conference. It’s a really new kind of conference, organized by the venerable Aral Balkan.  He’s arranged for an impressive speaker list (including Tim O’Reilly and Lynda Weinman).  The “new” bit is that it’s online only (with hubs in select cities).  It brings folks together digitally rather than physically. 

I’ve been surprised by how well this works so far!  There have been a handful of technical snafus (as you might expect for the first round of something like this), but the community feeling is intense.  Arguably as good, albeit different, as a real conference.

It’s late notice, but I have a handful of tickets (3?) that I can give away (to the conference, not just my talk!).  If you’re interested in attending, let me know.  Happy to share, just drop me an email at robby@nerdplusart.com.

Alright, well wish me luck at my first ever online-only conference!

I haven’t had a lot of time in the last week to get things updated.  I guess it’s good to be busy!  I did finally update the particle generator and the homepage though.  Other stuff (AnimatingPanelBase, Kaxaml and the VS code snippets) are coming soon. 

Incidentally, converting my frame-based animations from the DispatcherTimer approach I was using to CompositionTarget.Rendering makes a bigger difference than I expected.  Nice one team!  Things are noticeably smoother (but I had a bit of scare before I disabled the UseLayoutRounding property, which was causing the animations to snap at pixel boundaries and get pretty jerky).

By the way, if there is any interest in the code for the homepage, I’m happy to share it.  I’ve been meaning to do a walkthrough of how I created the blurring effect for a while and I was going to give out the code with that.  Happy to share soon with anyone wants it, though.

This should not be missed.  Project Rosetta is only a couple articles old, but I’m already finding a lot of inspiration and useful content there.  The first article is supposed to be for Flash to Silverlight converts, but I think the application is way broader.  I’m better off for having read it and I never really was much of a Flash guy.  It’s just a bunch of really useful concepts crammed into 9 really straightforward lessons.  It makes you realize how much fun all of this stuff can be.  Next step: be more like Rick.

I’ve been experimenting with particle generation a little bit over the weekend.  I guess that if I were a gamer, particle effects may seem kind of ordinary.  They’re first draft fodder for game guys.  For me, though, there is still a lot of allure and new here.

The result: I’ve got myself a new effect crush. I still have a ways to go toward ideal implementation though.  The basics seem to be there, it does emit particles after all.  Most of the issues that I’ve been running into are related to performance.  There really isn’t a “lightweight” way to generate all those particles, so I end up just creating hundreds of ellipses and moving them around the screen.  Given what I’m doing, I think that Silverlight’s doing a pretty outstanding job keeping up…but I wish there were a lighter-weight way to handle these kinds of drawing operations.  In WPF, I would override OnRender for the control and then just issue drawing commands.

Well, in the meantime, you can check out a full screen version of the demo or download the source. This isn’t final, though, so stay tuned for some updates.  Planned changes may include: gravity, directional momentum, some simulated 3D, support for multiple colors and some more perf tweaking.  You can, of course, always get the most current version from the labs page.

Finally, as always, if you do end up doing something with this I would really love to know about it.  Please send email to hello@nerdplusart.com.  Knowing that people use it is the fun part of putting stuff out there.

This is amazing.  Stefan has managed to get intellisense working in Blend using the new (and secret?) addin support that shipped with the latest Blend preview.  Even better, he used the intellisense code from Kaxaml!  Awesome!  I just hope Kaxaml doesn’t feel bad since it just became a tiny bit more obsolete.  Sorry Kaxaml.  Hey, you still have XamlScrubber, right?

Seriously, if you spend any time in Blend, you should get this.  It works great.  It’s fast, easy and (did I mention?) awesome.  Nice work Stefan.

Well, 4:00PM was my deadline, so here’s where we landed.  That’s a screenshot of the running app.  I feel pretty good about the progress that I made, but I think it’s going to take a couple more days to finish this up…so one or two more weekends.  For now, you can get the source as it stands right here.  Remember, it’s definitely not done so this is just for learning/fun.

Some interesting notes about development:  First, I had to restructure the data again once I started building it.  The original approach kept all of the tasks in collections that belonged to each of the projects.  This made it difficult to get a complete list of all the tasks (without doing a lot of artificial collection manipulation).  In the end, I structured the data a lot more like it’s structured on Remember The Milk: I keep a list of tasks and a list of projects and then tie them together with an ID reference.  This is a little more DB and a little less XML, but it really simplified things.

Second, I ended up creating three controls that are worth sharing.  They need some tweaking before they are general purpose (I was rushing through this stuff) but you can sift through the source and use them as you please.

The first is a Shape called CalloutShape.  This is the shape you see surrounding the calendar above.  Right now, the arrow is in a fixed spot and has a fixed width and height.  That would be really easy to customize though.  If you do the work, let me know and I’ll post or link to the cleaned up version.  If you haven’t created a shape before, this is probably worth check out.  It’s a really straightforward example.  When creating the shape’s geometry, I use a CombinedGeometry to merge the arrow with the rounded rectangle.  That’s a handy technique for creating a geometry that might otherwise require a lot of math (in this case, to handle the rounded corners)

Next is a panel called IndexingStackPanel.  This actually comes from Kaxaml.  It’s basically just a StackPanel that sets attached properties on it’s children that let you know the child’s index, whether it’s odd or even, where it is relative to the selected item in a Selector, etc.  It’s really useful for things like alternating line colors, etc.  This one is relatively robust.

Finally, there’s a really simple Calendar control in there.  Probably still too simple at this point.  It’s meant to be used with another control that will handle month changes, etc.  Right now it just displays a set of dates and let’s you select one.  Again, if you do anything cool with it let me know.

Well, thanks for following along this weekend.  I’ll keep you posted on ThoughtBox’s progress.  If you’re a fellow GTDer and looking for something that works on Windows, I’d love a hand on this project so drop me a line and we can crank this out.

The weekend is quickly slipping away.  I had a lot less time to spend on this than I had hoped (I guess that’s how it always goes).  I helped a friend move this morning and it took a little longer than expected and I ended up running some errands, etc.  You know.

Anyway, here’s the visual design for ThoughtBox!  I tried to find colors that would be both calming (the light blue green and soft gray) and yet demand a sense of action (the bright orange).  This is how I would like to think of my task planning…calm, controlled and action oriented (I should write my own book)!  If I actually had been using ThoughtBox, maybe I would have realized how long the errands were going to take today.

As far as type goes, I ended up using Miramonte and Georgia.  Miramonte is one of the “free” typefaces that Ascender included with the WPF SDK.  In the end, that only shows up in the state bar along the top, but it’s a really strong type so it gives the UI a strong anchor up there.

For everything else, I’m using Georgia.  It’s an obvious choice because it’s free and on just about every computer in the world, but non-obvious because it’s a serif font which is kind of unusual for UI.  I think it works though.  Picasa uses Georgia for the category names and I always liked the way it looked.

I’m a big believer if the “Photoshop” step in creating an app and we tend to make a strong investment in this step at IdentityMine and I think it pays off.  On the other hand, I guess it’s possible to over invest here to and that’s why I’m moving on to the next step.  I haven’t worked out all of the kinks with this design yet and we’re going to need to clean up some things, but mostly I’m happy with it.  I think it’s coming together.

In other news, I actually got a jump start on some code.  I forgot to post the comp when I actually finished it.  I don’t think I’m going to finish this weekend, at least not with support for syncing with Remember The Milk (and that’s the ultimate goal), but I should have a working UI done.

Just finished the wireframe for the app.  I built the design around a principle from the book that really struck a chord with.  David Allen talks about horizontal vs. vertical task management.  The Horizontal tasks are all of your projects and the Vertical tasks are all of the action items that you need to get through in order to complete that task.  So, I’ve got projects going across the top (horizontally) and the tasks are in a list below the projects.

Above the projects, there are a bunch of “states” that an action item can be in.  The bar along the top represents each of those states (Inbox, Next Actions, Tickler File, Someday, etc.). 

Everything that you select essentially acts as a filter.  So, if you choose Due Today and then Errands, it will show you all of the action items in the Errands project that need to be completed today.

When you add a new item, it will automatically pick up the characteristics of whatever area/project is selected.  If I were to click “Add New Task” in the above state, it would automatically be in the project “Clean the Study” and be a “Next Action.”

Woops.  Just noticed two errors.  First, all of the visible items should have the “Next Action” icon selected because we’ve got the “NEXT” area highlighted.  Also, I need to include an ALL option in the states bar.  That’s noted and I’ll include it in the next step (the visual design).  Normally, I’d update the wireframe but we only have a weekend for this!

Alright, well we’re cruising through this.  At this speed, there’s a good chance that we’re going to have to make some tweaks during visual design and then development this afternoon but that’s okay it’s a small project and the customer (me) is pretty forgiving.  Also, I’ve already found some small tweaks to our data model to support this.  (Going to need, for example, an “order” field for the tasks so that they can be reorderd…that’s what the gripper on the side is for).

Next step: visual design and our deliverable will be a comp.  Sweet!  This step will be fun.