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:Name="myDataGrid” Grid.Row="1" AutoGenerateColumns="True" Height="200" Width="300" Margin="10"/>
</Grid>
</UserControl>
Now, open Page.xaml.cs and set myDataGrid’s ItemSource to the new PeepsList instance just as you did for the ListBox as shown below in full color.
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;
//Set the datagrid "myDataGrid" ItemSource to the newly created list of peeps
myDataGrid.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; }
//Contructor
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));