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.
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 controls to pink hues by simply changing three color resources.
<!-- Resources -->
<SolidColorBrush x:Key="BaseColorBrush" Color="Pink"/>
<SolidColorBrush x:Key="HoverBrush" Color="PaleVioletRed"/>
<SolidColorBrush x:Key="HyperlinkBrush" Color="PaleVioletRed"/>
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.
In early March, I did Scott Guthrie's Silverlight 2 Digg sample application walkthrough, and it was amazing to see how easy and with so few lines of code it was to put together such an application. The UI I generated in the walkthrough was very basic, so I thought it might be fun to design a more interesting UI and apply one of the control skin styles I created in a previous post.
I started in a typical manner and created a very quick mockup of what the UI might look like in Blend, and then I opened the Digg project in Blend and redesigned most of the UI. When it came time to utilize one of the control skins (I decided to use the Red skin), I had to leave Blend and open the project in Visual Studio (because Expression Blend 2.5 Preview doesn't support control template editing for Silverlight; although, future versions will). In Visual Studio, I copied the Red skin's Application.Resources data into the Digg application's Application.Resources section (this is in the App.xaml file), and then I opened Page.xaml and added style references for the ListBox, TextBox, and Button controls. I also decided to leverage the tooltip style for a little error helper UI that I designed to appear when a term is entered into the search box and returns no results (I did this because it confused me at first when no results were returned and nothing was communicated in the UI, so I figured I'd add a little helper UI for my own sake; not to mention that it benefits anyone else playing with the application ;) ). I decided not to design the user control that pops up a closer look at each story presented in the listbox (master/details control), so I removed that part of the project, and, now, I was pretty much good to go, so I built my project and you can check it out at the link below.
The following is a screen shot of the resultant application UI, and you can view it live here...
You can check out my project by downloading it here. The project should open and run fine in Visual Studio, but if you decide to open it in Expression Blend 2.5 Preview you'll want to remove the Style reference (the ItemContainerStyle reference is fine) from the ListBox or the UI won't render properly when opening Page.xaml, and I'm trying to track down the cause of the problem now.
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
One more set of control skins is up and ready for you to use. I had hoped to have two ready, but one set needed some additional tweaking work that I haven’t been able to finish while on vacation in Thailand, and I’m going to stop trying until I return to Seattle on 4/14.
This new set is very rough and organic in appearance, but it can still work on various sites or it can be used in early mockups of a site to give the mockups a rough and sketched appearance. I take this sort of approach to many of my early mockups; especially, if I don’t want reviewers to focus on design details.
Here’s a screen shot of the new set of controls.
You can also view a live version of the controls or download the Page.xaml, Page.xaml.cs/Page.xaml.vb, and App.xaml, so you can apply the style to your own site.
For those of you who are interested in designing your own control skins, there is a good walkthrough of how you might do this on LiquidBoy’s blog (at the start of this post there is a link to a walkthrough on creating a button control skin called “Skinning a button – 4 different ways and counting”), and you can download a Beta version of Blend to use for creating your skins on Silverlight.net (along with all of the other tools you might need).
Enjoy the new skin!
This is a walkthrough of how to hook data up to both ListBox and Datagrid. In this walkthrough, we'll create a small collection to use as the data source.
For this walkthrough, you'll need Visual Studio 2008, the new Microsoft Silverlight Tools Beta 1 for Visual Studio 2008, the Silverlight 2 SDK Beta 1, and the Silverlight 2 Beta 1 runtime. For Silverlight specific tools, go to Silverlight.net.
* This post walks through creating a C# project, but there is also a VB version of the code at the bottom of the post
* Delay’s blog has some great info on how to use ListBox in various ways (he covers most of the key scenarios )
* When adding ListBox and DataGrid to Page.xaml, pay attention to the capitalization in each tag (e.g. <ListBox…and <..:DataGrid…)
Create a Silverlight 2 Project
Create a new Silverlight 2 project and a web application project to host it.
Layout a ListBox
In your Silverlight project, add a reference to System.Windows.Controls.Data. This will allow us to use the Datagrid control.
Open Page.xaml and remove the height and width settings from UserControl (shown as text with a strike through below). I do this so the Silverlight content can fill the web browser page rather than be restricted to a specified width and height.
Add vertical and horizontal alignment specifications to the LayoutRoot grid control, so the grid will align center on the page. Then, add a Margin of 50, so the grid has some buffer between it and the edges of the page. Next, add two rows to the grid that are each 50% of the total grid height, and then add a ListBox control to row 0, give it an x:Name attribute of “myListBox”, and a height and width (original xaml is shown in gray and new or modified xaml is shown in full color below).
<UserControl x:Class="DataSample.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid
x:Name="LayoutRoot"
Background="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="50">
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<ListBox x:Name="myListBox" Grid.Row="0" Height="200" Width="300"/>
</Grid>
</UserControl>
Now, run your project and you should see an empty ListBox as shown below.
Create a Collection to Fill the ListBox
We need to fill the ListBox with data, and to do this we’re going to create a collection in code. We’re going to add two new classes to Page.xaml.cs, so open the file, and add a class called Peeps with a String property for FirstName, a String property for LastName, and an int property for Age. Also, add a class called PeepsList that inherits from List<>, and fill it with as many peeps as you like. You could, of course, create two new separate class files for this if you prefer.
Next, create an instance of the PeepsList collection in the Page class’s constructor and then set the ItemSource of the ListBox to this new instance (use the x:Name attribute for the ListBox you used in the xaml file).
Here’s my sample code; the code in full color is what I added to the file to accomplish what was described above.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace DataSample
{
public partial class Page : UserControl
{
//Constructor called on page load
public Page()
{
InitializeComponent();
//When the page loads create a new list of peeps
PeepsList listData = new PeepsList();
//Set the listbox "myListBox" ItemSource to the newly created list of peeps
myListBox.ItemsSource = listData;
}
}
//Defines peeps item content
public class Peeps
{
//Properties
public String FirstName{ get; set; }
public String LastName{ get; set; }
public int Age{ get; set; }
//Constructor
public Peeps(String _fName, String _lName, int _Age)
{
FirstName = _fName;
LastName = _lName;
Age = _Age;
}
}
//Creates list of peeps to use in listbox and datagrid
public class PeepsList : List<Peeps>
{
//Constructor
public PeepsList()
{
this.Add(new Peeps("Lisa", "Martin", 19));
this.Add(new Peeps("Ilana", "James", 39));
this.Add(new Peeps("Halle", "Bora", 19));
this.Add(new Peeps("Jason", "DeVora", 29));
this.Add(new Peeps("Julie", "Jones", 10));
this.Add(new Peeps("George", "Hill", 30));
}
}
}
Now, run your project and your ListBox should look as follows.
Create an ItemTemplate to Control Presentation of Data
Our ListBox now shows the namespace and name of the Peeps class, so we need to create an ItemTemplate to control presentation of the data in the collection, and to do this you’ll need to open Page.xaml again.
We’re going to list the First Name property of each of the Peeps in our ListBox. To do this, add a ListBox.ItemTemplate tag, and inside of that add a DataTemplate tag, and inside of that add a Textblock and set the Text attribute’s Binding to FirstName, as shown below.
<UserControl x:Class="DataSample.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid
x:Name="LayoutRoot"
Background="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="50">
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<ListBox x:Name="myListBox" Grid.Row="0" Height="200" Width="300">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FirstName}" Margin="5"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Now, run your project and it should look as shown below.
Layout a DataGrid
Now, let’s add a Datagrid to our UI and fill it with the same data from the PeepsList. To do this, open Page.xaml and add a namespace reference to System.Windows.Controls.Data, and then add a DataGrid xaml element to the page and place it in row 1 of the grid. Be sure to add the AutoGenerateColumns =”True” attribute, so it automatically creates column headers, and give it an x:Name attribute of “myDataGrid”. The last thing to do to the DataGrid is to give it a height, width, and margin. All new xaml is shown below in full color below.
<UserControl x:Class="DataSample.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data">
<Grid
x:Name="LayoutRoot"
Background="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="50">
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<ListBox x:Name="myListBox" Grid.Row="0" Height="200" Width="300">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding FirstName}" Margin="5"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<data:DataGrid x: