ux musings : Silverlight 2

Silverlight 2 Public Release Candidate is Available Now

CorrinaB — Wed, 01 Oct 2008 08:44:00 GMT

The first public release candidate for Silverlight 2 is available now, so please download it and start updating your applications as soon as you get a chance! You can download the release candidate and accompanying Visual Studio and Blend support for it here.

I've started updating my applications; starting with my Red control skin. The Red skin is now ready for you to start using, and it even include styles for many of the new Silverlight 2 controls (ComboBox, Progress Bar, and Tab Control). Just as I did for beta 2, I've template bound most of the control colors and added resources for these colors as well. This makes it easy to customize the appearance of the controls for a particular need, and the xaml below shows how you might do this. In this case, I'm changing the colors of all controls to green hues by simply modifying the five color resources listed below (these resources are found at the top of the associated App.xaml file - see the link to the sample project below for more details).

Feel free to check out a live version of these controls or download my sample project using the links below. If you have comments, questions, issues, or concerns that you wouldn't mind sharing with me, please don't hesitate to shoot me an email using the email link at left. I can't wait to hear your feedback!

**There is a styling bug in the DataGrid's column headers that is being addressed. You will notice this bug if there are too few columns to fill the width of the DataGrid, and basically it prevents the filler column header from picking up the new style.

Red Skin
View live...
Download skin....

Rough Skin for Silverlight Beta 2 Is Easy to Customize

CorrinaB — Tue, 05 Aug 2008 07:20:00 GMT

One thing that I forgot to mention about the Silverlight beta 2 rough skin is that it is very easy to customize now. At the top of the Page.xaml file in my sample project are several resources that can be used to quickly change the colors for all controls. In the example below I have changed the BaseColroBrush and HyperlinkBrush to Tomato and I've changed the HoverBrush to WhiteSmoke, and the controls all update nicely to reflect the new color theme...

Rough Skin Updated for Silverlight Beta 2

CorrinaB — Mon, 04 Aug 2008 09:09:00 GMT

I finished updating the rough skin to beta 2. If you would like to use this skin feel free to download and use my sample project using the link below, and you can view it live if you'd like too...

Rough Skin
View live...
Download skin...

Previous Post's Application Using Live Data Services

CorrinaB — Thu, 24 Jul 2008 04:15:00 GMT

All of the code for the sample application described in my previous post is updated and working in Silverlight 2 beta 2 now, and it is using live data services from various places on the web including MSN Video, Flickr, Digg, and Ebay. My passion is not coding, so the code is not perfect by any means, but it works reasonably well.

You can download my sample project or view the application live using the following links...

Building A Silverlight Application: A Designer's Perspective

CorrinaB — Tue, 22 Jul 2008 20:19:00 GMT

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.

End Application

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.

End Application

Bubbly Skin Updated for Beta 2

CorrinaB — Sun, 20 Jul 2008 05:46:00 GMT

I finally had a bit of free time to update the bubbly skin to beta 2. If you would like to use this skin feel free to download and use my sample project using the link below, and you can view it live if you'd like too...

Bubbly Skin
View live...
Download skin...

Red and Flat Skins Updated for Beta 2

CorrinaB — Mon, 16 Jun 2008 06:25:00 GMT

Silverlight 2 beta 2 was just released on June 6th with lots of new features and functionality (check out Scott Guthrie's blog for specific details). Control skinning has changed slightly since in beta 1, and I just finished updating my red and flat skins for beta 2. In this update, I've template bound most of the control colors and added resources for these colors as well to make it very easy to customize the appearance for a particular need. There are several ways you can do this. One way would be to use Blend...

Create a new Silverlight 2 project in Blend
Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
*Do not include DatePicker or Calendar style xaml in this step as these controls cannot be styled in Blend at this time and will prevent your UI from rendering at all if included
Add a control to the design surface from the toolbox
In the Objects and Timeline tool window, select the control you've just added to the design surface, and right click and select Edit Control Parts (Template) -> Apply Resource -> "select the appropriate style resource associated with the control"
The control will now have the style applied to it and if you switch to "Design" view you will see this
With the control selected, open the Properties tool window and you can change the Background, BorderBrush, or Foreground colors as desired (if they were set in my style)

Another way would be to...

Create a new Silverlight 2 project in Visual Studio
Copy and paste my style xaml (from Page.xaml) into your Page.xaml <UserControl.Resources>... or Application.xaml <Application.Resources>...
Add a control to the design surface from the toolbox
Manually add a style reference to the appropriate style xaml
Modify the color resources found in Page.xaml (near the top of the page)

Here's an example of how you might do this. In this case, I'm changing the colors of all Flat controls to pink hues by simply changing three color resources.

And, this is what the controls would look like with these simple changes...

In this case, I'm changing the colors of all Red controls to blue and purple hues by simply changing the three color resources you see below.

And, this is what the controls would look like with these simple changes...

Below you'll find a link to live versions of each control set and access to my sample projects. There are a few things to keep in mind when you start digging into the projects. First, the Calendar control requires some code in order to hook up to the day and month button styles (this issue will be fixed in the future). This code is found in Page.xaml.cs. Second, the Calendar control will not template bind to colors and nor will it use global resources, so you will have to go into the Calendar style xaml and manually update each color to your desired color (this issue will be fixed in the future). Next, ToolTip is no longer stylable. I plan to create my own ToolTip control that is stylable in the near future, but until then you'll have to make due with the default style we provide for you. Lastly, you cannot style the Calendar, DatePicker, or DataGrid controls in Blend. In fact, you can't include style xaml for Calendar and DatePicker in a project you plan to open in Blend or none of the UI will render (this problem will be fixed in the future).

If you check out these styles, I'd love to know what you think about the ability to tweak the control colors, and I'd also like to know what other sorts of customizations you would like to do along these same lines. Also, is the ability to style ToolTip important to you? I can't wait to hear your feedback!

Red Skin
View live...
Download skin...

Flat Skin
View live...
Download skin...

One last thing, I'm working on updating the two other styles and hope to have these up within the next two weeks.

New Visual Design For My Blog

CorrinaB — Tue, 29 Apr 2008 22:09:00 GMT

As a user experience designer, the visual design of content I produce is an important consideration. Therefore, I had to create a new visual design for my blog because the default was a bit dull for my tastes, and I felt that it didn't represent me as a designer very well. I had a few simple goals in mind for the new design, and they included the following...

The design had to be visually distinct
The design had to use strong colors
The content in the UI had to remain readable
The individual sections of the UI had to remain visually distinct
I wanted to play with the book metaphor
The design had to be implementable through use of CSS modifications

After producing a mockup for a redesign of my blog in PhotoShop, I began to explore how to modify the CSS for the UI (user interface). I checked out the source for one of the pages and was quickly able to access the CSS information I needed and, low and behold, the blog also had tools that would allow me to easily customize the CSS and apply it to the UI. At this point I was pretty much good to go, except for the fact that I hadn't redesigned a site through CSS modifications alone in years.

In order to get inspired and ready to dig into the CSS, I took a quick peak at the cool stuff that people were doing at CSS Zen Garden. Then, I dove into modifying the CSS, and after many hours of twiddling I was finally able to get the UI to look like I had designed it to look. Now my blog has a visual design I'm happy with! Yay!

Here's a before image of the blog template I modified (it's amazing what you can do with CSS and a few images)...

I'm compelled to include some Silverlight 2 information in this post, so here are a few interesting tidbits I've found recently that I'd like to share...

This is an interesting post by Matt Berseth on sorting and filtering content in the Silverlight 2 Beta 1 DataGrid control
This is another interesting post for the Silverlight 2 Beta 1 DataGrid control. In this post you learn how to do CRUD operations using Linq to SQL and WCF from the Swiss MSDN team