I am very lucky to say that I'll be at Mix 2010 next week. As excited as I am about the event itself, I'm perhaps more excited knowing that I'll come back with the tools to get cracking on development for Windows Phone 7:

Last week I got the opportunity to present at the Atlanta Silverlight Meetup. I presented a talk entitled 'Thinking Outside the Battleship Gray Box' primarily focused on UI manipulations. Here was the synopsis:

As developers, we’ve grown accustomed to the confines of the technology platforms available to us. With new platforms like WPF and Silverlight, developers must change their perceived limitations and learn how to think outside the box to create engaging experiences. How can we use new presentation layer technologies to create more engaging applications and break away from the traditional battleship gray windows application?

The talk made reference to my posts Thinking Outside the Box - Using Programatic Animations in Silverlight and Street Fighter Style UI Compositing With Prism. You can find a screencast recording from the event below.

Developing Without Limitations

The voting for the Open Call entries for Mix 2010 sessions is now open, and I would love to have your vote! The title of the session is Developing Without Limitations, although if I had to rename it I would probably rename it something like 'Developing Outside the Box'. You can expect this session to cover a handful of topics I've briefly covered on this blog including Thinking Outside the Box - Using Programatic Animations in Silverlight and Street Fighter Style UI Compositing With Prism - mostly we'll be tackling new ways to approach new UI's in Silverlight and WPF.

Here is the session abstract:

As developers, we do well working within the comfortable framework of the technology platforms that are available to us. But with new platforms like WPF and Silverlight, developers need to learn how to think outside the box when it comes to creating engaging and cutting edge experiences. How can we use new presentation layer technologies to create more engaging applications? How can we as developers help move away from the traditional battleship grey applications and create more modern, engaging, and interactive applications?

Drawing on Roger’s recent experience leveraging Silverlight technology, this presentation provides insights on how developers can learn to think without limitations. You’ll also gain a deeper understanding of how strategy, creative and technology can work together to maximize the potential of the digital medium.

While you're voting, check out my coworker's session Lighting Up With Blend, and thanks for your consideration!

If you're into Silverlight or WPF, then you've undoubtedly heard the nonstop clamoring over Composite Application Guidance for WPF and Silverlight - aka Prism. I have a list of things in Evernote that I'd love to write about Prism, but I figured I would write about something I actually felt like typing up instead - something I tend to call Street Fighter style compositing in Prism.

Recap on UI Compositing in Prism

You already know one of the bigger parts of Prism is the UI compositing it supports. Regions are defined in the Shell.xaml and you inject modules into them. The idea being that you can add, remove, and swap out sections of your application dynamically. It's one of many great technologies in Prism.

Sample Stock Trader application using UI compositing

Prism documentation highlighting defined regions

Street Fighter Style Compositing in Prism

Having done a few Prism applications, I've found that the composite UI support in Prism is really snazzy, but I've also found that I don't tend to use it the way that most Prism examples show it off. While I will frequently define region areas like shown in the example above, I will just as frequently use regions for layering - kinda like how they did it in Street Fighter.

If you've played Street Fighter before then surely you've noticed that the UI is made up of layers on top of layers. The bottom layer is the static stage background, a layer on top of that might be the animated characters in the background, the layer above that may be where the fighters are shown, above that a layer for projectiles, above that a layer for health bars and high scores, and a layer above that for the menu - which is currently hidden.

If you're going to try and do this kind of layering with regions in Prism then one thing to keep handy is how to create a Prism region whose contents will not specify a specific size, but will scale to fit the entire region. You'll want this code snippet for such a region:

<!-- image popup area -->

<ItemsControl cal:RegionManager.RegionName="ImagePresentationRegion">

    <ItemsControl.ItemsPanel>

        <ItemsPanelTemplate><Grid/></ItemsPanelTemplate>

    </ItemsControl.ItemsPanel>

</ItemsControl>

The reason I find myself using this style of composition is that it allows a lot more flexibility if you're not creating a rigid desktop style layout. Using full window overlays will make it easy to place modules into the region centered horizontally and vertically - popup menus or loading status windows for example. There are some really neat things you can do with this kind of layering, especially with perceived depth - but that's not really the point of this article.

A Quick Example

Regions used in ImageWind.net alongside its current appearance

To use Image Wind as an example, here is a rough outline of the regions used (from back to front):

• background layer
• image side scrolling layer
• title region (upper left)
• controller region (lower left)
• full size image display popup layer
• popup dialog / loading layer (various modules displayed in center)
• beta badge and service error region (upper right)

Wrap up
The main point of this article wasn't to show the cool stuff you can do with layering, or to cover when you might want to do layering within the same region versus in different regions, etc. The point of this article was really just to make sure that the composite UI in Prism isn't always thought of in such a rigid way. Oh, and to coin the term 'Street Fighter' style compositing.

A rough outline of the region layout from another recent project

It's been a little less than 2 months since My Health Info launched on MSN. 'My Health Info' is the project I've been working on at IQ Interactive the last 5+ months or so. It is written in Silverlight 3 using Prism and is a pretty big chunk of code, of which I am very proud. I have had the pleasure of working with a large number of incredibly talented and creative people at IQ Interactive. In the Silverlight space I've had the privilege of working with Corey Schuman and Mason Brown. I think this project has been a great learning experience for all of us.

Here are a few videos on My Health Info..

IQ Interactive's updated demo reel including My Health Info

What is currently released is a beta version, and another version will be released within the next month or so. I hope you'll check it out now and once the newer version is up towards the middle of next month.

I haven't written a grab bag in a while, so here is a rather impromptu set of tips from lessons learned in developing full-time in Silverlight the last several months. I hope to get better at blogging these things more frequently, but hopefully this grab bag will be useful to some.

Have Good INotifyProperty Snippets

There are several Visual Studio snippets on the web relative to implementing the INotifyProperty interface and corresponding properties in Silverlight. You should find snippets that fit your style and know how to tweak them if needed - you can edit these snippets easily in notepad.

The images below link to their corresponding snippets attached to this post - these are the snippets I'm currently using. You can use the notify property snippet with the keyword notifyp, and you can use the INotifyPropertyChanged implementation with inotifyp. You'll want to save both of these snippet files to your ..\Documents\Visual Studio 2008\Code Snippets\Visual C#\My Code Snippets\ folder.

  

The main thing to note is that the setters for the properties are comparing the values and only firing the notification if the value actually changed - this helps prevent firing events that update listeners and UI when the value didn't actually change.

(more after the break..)

It's been almost a month since I announced ImageWind.net, my current personal Silverlight project. I've really been enjoying working on Image Wind over the last several weeks and I wanted to put together a video showing off what Image Wind currently looks like.

A friend on Twitter turned me on to Screenr.com this week, and that is what I used to record this screencast. I would highly suggest checking out Screenr.com if you want to record something on your computer quick. It records the display and audio with no install (so long as you have Java installed) - really cool.

I'm trying to encourage people headed to PDC 2009 next week to post a bunch of pictures from their phones on Twitter so they can be watched in ImageWind. If you are going to post any pictures from PDC be sure to include "PDC" in the tweet text. Here is where you can find images posted with PDC in the text:
http://www.imagewind.net/index.html?search=pdc

I still have about 20-30 items on my TODO:: list for Image Wind - some of which are pretty big changes. I hope you are checking out ImageWind.net every once and a while and staying on top of the changes being made via the change log. You can also follow @ImageWind on Twitter to stay on top of current work and to see some interesting images discovered via ImageWind.

At the Atlanta Silverlight Firestarter a few months ago myself and Mason Brown did a talk 'Lighting Up the UI'. At the end of the talk I ranted a bit trying to encourage developers to think outside of the box when approaching UI's in Silverlight - to be open to creative ways in tackling new UI challenges. (You can find more on this talk in these posts on SilverlightAtlanta.net).

The example I went over in my example was a simple example of how to move an item from one ListBox to another. Most developers would look at this task the same way - they would remove the item being moved from the 'from' ListBox, and they would add the item to the 'to' ListBox. It would probably look something like this:

// get a handle on the item we are moving

ListBoxItem lbi = fromList.SelectedItem as ListBoxItem;

if (lbi == null)

    return;

fromList.Items.Remove(lbi); // remove it from the 'from' list

toList.Items.Add(lbi); // add it to the 'to' list

When you work with designers and usability engineers you'll often get challenged to do something which requires you to think outside the box. In this example the request is to get rid of the 'popping' between lists. The intent is to actually move the item, and show it moving from one list to the other - this is the sort of detail that can distinguish a standard app from a real user experience.

Here is a sample Silverlight application which shows off moving an item between lists both through the standard add/remove method, and our 'thinking outside the box' method we'll cover after the break:

(use the radio buttons to see the two ways of moving an item between ListBoxes)

(continue reading ...)

One of the things I wanted in ImageWind.Net before releasing it in beta was some basic analytics baked in. I wanted to try and use Google Analytics and I wanted to do more than just track page views - something which tells us little in a Silverlight application.

Google Analytics has support for event tracking, what that means is that instead of just tracking how many hits your site gets, you can track when users take certain actions or when events occur in your application. I did a quick search of the web and was happy to find Silverlight Analytics on CodePlex - a library which makes event tracking in Silverlight with Google Analytics easy. The Silverlight Analytics library does more than just event tracking - but that's what I am focusing on here.

(read more after the break)..