Jared Bienz's Blog : Expression

Application Skinning in WPF and Silverlight

jbienz — Tue, 23 Jun 2009 02:34:49 GMT

Over the past two years we’ve seen some incredible applications built on WPF and Silverlight. But application style doesn’t happen on its own, and many of the questions I’m asked these days are centered around application styling and custom controls.

As our fiscal year comes to an end, and with Silverlight 3 and WPF 4 are rapidly approaching, I thought it’d be a great time to put together a few short videos on skinning and custom controls. I hope these two ~20 minute videos help demystify a topic that’s really not as elusive as it seems.

Skins for WPF and Silverlight (20:15)

Creating ‘Lookless’ Controls for WPF and Silverlight (14:26)

Clean Prototyping with Compositions

jbienz — Wed, 10 Jun 2009 23:02:44 GMT

By now you’ve hopefully seen SketchFlow and how it can help you conceptualize your projects before turning them into reality. If not, I highly recommend you check out the Mix ‘09 session Sketch Flow: From Concept to Production.

One of the tasks common to prototyping and actual development is planning navigation between pages (or screens). Luckily, Blend make this as easy as right-clicking on any button and choosing Navigate To – <Screen Name>. When you do this, Blend builds links into the application flow so that the SketchFlow player and the live application understand how the user can get around. These links show up in blue and look something like this:

You’ll notice in the image above that both the Start page and Winary page can get to any other page in the application. That’s because both the Start page and the Winery page have a set of buttons that look like this:

In fact it’s very common to want some piece of navigation shared across all the pages in an application. For example a navigation bar on the left side of a page or across the top is very common on websites and in SharePoint. In Blend 3 we can support the same concept by converting a group of controls into a ‘Composition Screen’. That composition can then be shared across all pages, and the navigation it provides comes along as well. In the application flow, it ends up looking something like this:

But you might notice that things have become a bit messy and we have blue lines and green lines that seem to go to the same places. That’s because Blend is showing the new composition lines in green and the old manually defined navigation links still remain in blue. Luckily, with the composition in place the manual links are extraneous and can be removed. This is done by right-clicking the line and choosing Remove Connection. The Sketchflow player and navigation system are smart enough to realize the composition still provides navigation routes, even if the manual links are gone. So the player still works just like it did before:

With the extra links removed, here’s one possible cleaned up flow for this application:

Of course it doesn’t hurt to leave the original links defined, and it may even be desirable to have them there to clarify intent. For example, just because the user can navigate directly from login to an empty shopping cart doesn’t necessarily mean we expect them to do it often.

Finally, I’ll close with a cool new feature I noticed in one of the latest builds: It’s now possible to dim out navigation lines and / or composition lines for the screens you’re not currently viewing. Pretty cool.

The Role of Sketching in Software Development

jbienz — Wed, 27 May 2009 01:11:46 GMT

It only been since 2006 that we seriously started to drive WPF adoption, and Silverlight 2 hit the web just a scant 11 months ago. Still, in such short time ISVs have created some amazing things with these platforms.

Unfortunately, though the platforms themselves have seen some serious adoption, inclusion of design in the software development lifecycle still has a long way to go.

The good news is that methodologies and best practices are starting to emerge and I look forward to some great articles on the subject over the coming months. I’ve personally had the opportunity to present on this topic with one of our User Experience Evangelists, Sara Summers, and we cover something every ISV can add to their methodology: Sketching.

Sketching isn’t hard and anyone can do it (though I’ll freely admit I was uneasy at first drawing my little stick figures next to what felt like Sara’s “creative art”). But the point of a sketch isn’t how well it’s drawn; it’s how well the sketch captures a moment or an experience for a user in an application.

Sketches are informal. They’re lightweight, and they can be thrown away. Sketches can be used throughout the development process and, when used correctly, can significantly reduce the need to revisit code that’s already complete. People need to see and ‘feel’ an application before they can accept its design, but unfortunately it’s costly and time consuming to build interactive user interfaces that will just be thrown away. That’s why we so often end up with ‘bugs’ or feature requests involving design after an iteration goes to QA.

Sketches help people see the vision of an application and interactive sketches help the user ‘feel’ how it will work. These alone solve many of the problems that exist in application design today, but there’s still the costly issue of building interactive UI that can’t be reused. Luckily, with Expression Blend 3, tools are on the way to help with reuse.

On her blog Sara talks about Why Static Wireframing is Dead or, to put it another way, why static sketches shouldn’t be “good enough”. She also does a great job introducing SketchFlow with Non-Destructive Iterative Design and Fast and Easy Interactivity. Finally, if you haven’t yet seen SketchFlow in action, the Mix ’09 session SketchFlow: From Concept to Production is definitely worth a watch.

Silverlight and WPF Controls

jbienz — Tue, 26 May 2009 22:46:42 GMT

WPF and Silverlight have been out for a while now, and the number of controls available for these platforms is surprising. Consider this rather comprehensive list of Silverlight controls by Tim Heuer with at least 17 vendors and over 160 controls. Or this list of around 30 tools and libraries for WPF.

If you need to quickly check out and try out many of the available controls, Mike Taulty’s Control Browser is here to help. It shows all the built-in controls for both platforms as well as the controls included in the toolkit and many of the 3rd-party libraries available. It’s a great little click-once app, so head over to Mike’s Blog to read about it or click here to install.

XAMLfest Going Online

jbienz — Tue, 12 May 2009 23:46:15 GMT

Several of you joined us last October for the pilot XAMLfest in Houston Texas. The tour has grown up quite a bit since then, and we’re now starting to cover Silverlight 3 and Blend 3. Even better, we’re taking the tour online so you don’t have to leave the office to attend or get a refresher.

So what is XAMLfest?

Are you excited about WPF but concerned about the learning curve? Have you seen Silverlight but don’t know where to get started? Or are you curious about how tools like Expression Blend help designers and developers deliver great user experiences together? If so, join us at XAMLfest!

XAMLfest Online is a five day event delivered through a combination of live sessions and recorded training. The recorded training can be viewed at any time, but each segment should be watched before you participate in a related live session. The table below should help illustrate how each session relates to another:

Sessions are geared to both designer and developer audiences and attendees can participate in both tracks. Live sessions start 6/1 and recorded content is available starting 5/25. For more information and to register, please visit xamlfestonline.com. These sessions are open to the public as well, so feel free to pass this invitation on.

Please note: Participants must currently register for each session individually. We realize this is not convenient for those that plan to attend every session and we're working with msdev.com on a better solution. Thank you for taking the time to register.

Blend Tips and Tricks

jbienz — Tue, 07 Apr 2009 03:45:03 GMT

I’ll be presenting Blend Tips and Tricks for application designers in a few venues over the next two months. The first session is tomorrow night at the D2Sig user group here in Houston.

As usual, I’m ‘borrowing’ from other excellent resources created by excellent people within Microsoft to do this presentation. I’d like to give those authors credit and give folks an option to view the wealth of other resources I couldn’t fit into my talk. So here they are!

Arturo’s Design Assets & Recordings
ux.artu.tv /?p=121

The Future of Expression Blend (Mix 2009)
sessions.visitmix.com/MIX09/C04F

Sara Summer’s Blog
uxarray.com