Building A Silverlight Application: A Designer's Perspective
RiaPalooza was a fun and engaging event that I had the opportunity to attend back in May of this year. It was focused on exploring and promoting the development of Rich Internet Applications (RIAs), and the best part for me was having the opportunity to meet some really amazing and talented designers and developers working in this space. I also did a co-presentation with Tim Heuer on the designer developer workflow; which was great. We didn't have enough time to cover all of the material we wanted to cover, so I decided to put together a few videos of both the stuff we covered and didn't cover; well, actually not all of the material because I primarily focus on the designer aspects here.
You will find three videos below. The first video describes the application we were building and then dives into generating a wireframe for the application using Blend, so the designer and developer could work on the application simultaneously (the developer on the business logic, and the designer on finessing the UI in Blend). This video is roughly 30 minutes. The second video focuses on finessing the UI, and in particular the process of styling controls. This video is also roughly 30 minutes. The third video jumps into designing and coding a user control and the motivation behind it. This video is roughly 10 minutes.
For each video you will find a start and end project. You can use the start project to follow along with the video if you would like. If you plan to do this, you will need the following applications and tools; which can be obtained from Silverlight.net...
- Visual Studio 2008
- Silverlight Tools Beta 2 for Visual Studio 2008
- Expression Blend
A few general comments before you check out the videos. The videos are long and therefore they are not perfect, and they may be a bit choppy in some places (I decided it was time to stop re-recording things over and over and just get the videos up ;)). You can check out the final application for video three running here. I still need to move some of the code from Beta 1 to Beta 2 for the project, so it's not actually searching MSN, Digg, etc... yet (it's using dummy data). I'll update that code shortly and post the final project and running application.
Creating a Wireframe
This video describes the application that will be built over the course of all three videos, and then walks through creating a wireframe for the application using Expression Blend.
FYI: There is no start application because we're starting from scratch at this point in the process.
Styling Controls
This video will walk you through my process for customizing and styling controls to suit a particular design goal. There are a couple of things I'd like to mention before you watch this video. First, I dive into the XAML when styling the ListBox ItemContainerStyle because there isn't a way to dig into this using Blend at this time, and I do the same when designing the data template for each item in the ListBox for a similar reason. Second, this video doesn't use smooth zoom in and out transitions because I needed to reduce the file size.
Creating a User Control
This video will very quickly walk you through the process for creating a user control. I don't spend a lot of time on the details in Blend or Visual Studio, but rather do a lot of copying and pasting of large chunks of XAML and code in order to move quickly. I do spend some time explaining the details about what was pasted in place though.
FYI: There is no start application because the start applicaiton is the end application from the previous video.
