Before I dive into the Silverlight 3 application themes, I would like to mention some research that my co-workers on the Visual Studio User Experience Team are doing focused on professional and non-professional web/application developers. The research involves…
- A short survey
- A telephone interview to discuss your development experiences
A gratuity will be offered to individuals selected to participate in the telephone interview, and selection for interviews is based on responses to the survey. The gratuity is either a $25 Visa/American Express gift card or select Microsoft software titles. If you are a professional or non-professional web/application developer and would like to be involved in this research, please email vidyaraj@microsoft.com.
Application Themes
Now, let’s take a look as some of the application themes I’ve put together over the past few months. At this time, there are 10 themes that you can easily apply to your Silverlight 3 projects created using either the ‘Silverlight Navigation Application’ or ‘Silverlight Business Application’ Visual Studio project templates.
Please note...
- If you do not see these projects in the Visual Studio New Project dialog, you will need to install the Visual Studio tools for Silverlight as well as .Net RIA services; see Silverlight.net for specific details
- If you do not have Visual Studio, feel free to use my starter ‘Silverlight Navigation Application’ and ‘Silverlight Business Application’ projects. You will still need to install .Net RIA services if you choose to use the business project, but this project includes some nice login/logout UI, so it may be more suitable to your application needs and worth checking out
To apply these themes, simply swap out the ‘Styles.xaml’ file found in the project ‘Assets’ folder with the desired ‘Styles.xaml’ theme file.
Candy
This theme was just completed, and I'm including an application mockup for you to reference, so you can see how you might actually use it in the real world.
Please note...
- The Navigation template requires that the image 'BackgroundImg.png' is placed in the 'Assets' folder and added to the project
- The Business template requires that the images 'Arrows.png' and 'BackgroundImg.png' are placed in the 'Assets' folder and added to the project
Seeing Sound
The application colors in many of the subsequent themes can be customized by modifying the brushes found at the top of the 'Styles.xaml' file or by using Blend as shown below.
Please note...
- Both the Navigation template and the Business template require that the image 'Noise.png' is placed in the 'Assets' folder and added to the project
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
- Hyperlinks nicely transition between selected and unselected states
Mediterranean Sun
Please note...
- Both the Navigation template and the Business template require that the image 'Noise.png' is placed in the 'Assets' folder and added to the project
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
LimeShocker
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
- Hyperlinks nicely transition between selected and unselected states
Aurora
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
Pinky
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
- Hovering over a hyperlink causes an interesting animation on the blue arrow
Skyline
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
Subdued
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
Frosted Cinnamon Toast
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
Retro
Please note...
- Application colors are easy to customize through modification of the brushes found at the top of the 'Styles.xaml' file
The themes are available for download here or on the Microsoft Expression community website.
One last thing, I have a few theme questions that I would appreciate your feedback on...
- Do these themes help you get started building your applications (act as inspiration, learning tools...), and, if not, why not?
- Do you use these theme's 'as is' with little modification when building your applications?
- What type of themes would you like to see in the future (what would help you be more productive when building your applications)?
Please, send me your feedback using the direct comment section at the bottom of this post. I will use the information to improve the themes in the future, so your feedback really matters, and I look forward to hearing from you!
Props to Colaab and SchoolMaster; two nice looking Silverlight applications with very compelling functionality. Collab has been designed for people to upload, review, and collaborate on content in real time. I can imagine some great experiences this application will provide such as enabling design reviews of application Ux for geographically dispersed teams and many others. School Master targets the educational market in the Netherlands, and allows users to manage parent details, student addresses, grades, etc... Both of these application are visually attractive too (can't beat that)!
Check them out!
Mix 09' was amazing! There were so many great announcements and a wide variety of very interesting presentations. The two keynotes were exciting as well, and I particularly enjoyed the keynote on day 2 where Deborah Adler talked in depth about how she designed a comprehensive system for packaging prescription medicine for her master's thesis. Target saw great potential in Deborah's ideas and collaborated with her to develop the ClearRx system for prescription medicines; a system that is both beautiful and saves lives. Amazing stuff and very inspiring!
I want to quickly call attention to some of the presentations that I found particularly interesting...
- Building Amazing Business Centric Applications with Microsoft Silverlight 3 In this presentation, Brad shows how Silverlight 3 now makes it fast and easy to develop line of business applications. This is great stuff!
- .NET RIA Services - Building Data-Driven Applications with Microsoft Silverlight and Microsoft ASP.NET In this presentation, Nikhil shows how Silverlight and ASP.Net can be used together to greatly simplify the n-tier application pattern. I would also recommend that you check out Nikhil's Silverlight framework for building RIA applications! There are some great patterns in the framework that greatly simplify application development
- Working across the Client Continuum In this presentation, Laurent shows how you can use the same WCF service for a variety of client applications including HTML, AJAX, ASP.Net, Silverlight, and WPF. He spells things out very clearly, and this presentation is a great learning tool!
- Sketch Flow: From Concept to Production This is one of my favorite presentations! Christian does a terrific job of showing off many of the great new capabilities provided by Sketch Flow (a designers best friend). Be sure to check it out!
- The Future of Microsoft Expression Blend In this presentation, Christian and Doug talk about the power Blend gives designers to control their creative vision in a productive and collaborative manner. This is a must see for designers!
- Web Form Design This presentation describes the benefits of utilizing Ux patterns to improve the user experience of web forms. Very informative and detailed; well worth watching
- User Experience Design for Non-Designers This is an interesting presentation that quickly describes the process of good user experience design. I really enjoyed it!
- User Experience Design Patterns for Business Applications with Microsoft Silverlight 3 In this presentation, I talk about core design principles, design patterns, and design attributes that can be used to create great business application user experiences. I also touch on how easy it is to implement several key business application design patterns in Silverlight 3 (I wish I had more time to drill into the details here)
The application I built during my Mix presentation is available here, and requires...
- VS2008 SP1
- Silverlight 3 Beta
I made a couple of minor tweaks to the application to improve the user experience from what I presented at Mix (e.g. the 'In Progress' page previously showed double sets of 'Save' and 'Cancel' buttons; I eliminated this problem), and, please note that there are a couple of bugs that may appear in the UI as you interact with it, and these are known issues (e.g. paging may not work consistently and deleting items from the main DataForm on the 'In Progress' page will throw an error if you delete any item that sits right above a group header).
Also, the two application styles I show at the beginning of my presentation are available here, and look as follows when applied to your application when created using the new Silverlight 3 Navigation template...
Frosted Cinnamon Toast
Lime Shocker
You can easily swap in one of my App.xaml files for the App.xaml file produced when you use the Silverlight 3 Navigation template, but you may need to upate the namespace reference; for example, if I use the template to create an application called 'SLApp', the App.xaml file will show the following for the x:class 'x:Class="SLApp1.App"'. My App.xaml file might use the following namespace, so you will need to update it to match yours, x:Class="UIOne.App".
I can't wait for Mix 10'! I hope you'll be there, but in the mean time be sure to check out the great Mix 09' content!
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).
<!-- Resources -->
<SolidColorBrush x:Key="BaseColorBrush" Color="#FF9FD752"/>
<SolidColorBrush x:Key="BaseColorBrushFaint" Color="#269FD752"/>
<SolidColorBrush x:Key="ForegroundColorBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="HoverBrush" Color="#7FFBF445"/>
<SolidColorBrush x:Key="HyperlinkBrush" Color="#FF74AF22"/>
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....
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...
<!-- Resources -->
<SolidColorBrush x:Key="BaseColorBrush" Color="Tomato"/>
<SolidColorBrush x:Key="BorderBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="ForegroundBrush" Color="#FF333333"/>
<SolidColorBrush x:Key="HoverBrush" Color="WhiteSmoke"/>
<SolidColorBrush x:Key="HyperlinkBrush" Color="Tomato"/>
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...
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...
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.
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...
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.
<!-- 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...
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.
<!-- Resources -->
<SolidColorBrush x:Key="BaseColorBrush" Color="CadetBlue"/>
<SolidColorBrush x:Key="HoverBrush" Color="Purple"/>
<SolidColorBrush x:Key="HyperlinkBrush" Color="Plum"/>
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: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));
}
}
}
Run your application and it should look as follows.
VB Version of Code
If you prefer to code in VB, here is the VB version of the code for Page.xaml.vb
Partial Public Class Page
Inherits UserControl
Public Sub New()
InitializeComponent()
'When the page loads create a new list of peeps
Dim listData As PeepsList = New PeepsList()
'Set the listbox "myListBox" ItemSource to the newly created list of peeps
myListBox.ItemsSource = listData
'Set the listbox "myListBox" ItemSource to the newly created list of peeps
myDataGrid.ItemsSource = listData
End Sub
End Class
'Defines peeps item content
Public Class Peeps
'Properties
Private fName As String
Public Property FirstName() As String
Set(ByVal Value As String)
fName = Value
End Set
Get
Return fName
End Get
End Property
Private lName As String
Public Property LastName() As String
Set(ByVal Value As String)
lName = Value
End Set
Get
Return lName
End Get
End Property
Private aAge As Integer
Public Property Age() As Integer
Set(ByVal Value As Integer)
aAge = Value
End Set
Get
Return aAge
End Get
End Property
'Contructor
Public Sub New(ByVal _fName As String, ByVal _lName As String, ByVal _age As Integer)
firstName = _fName
lastName = _lName
age = _age
End Sub
End Class
'Creates list of peeps to use in listbox and datagrid
Public Class PeepsList
Inherits List(Of Peeps)
'Contructor
Public Sub New()
Me.Add(New Peeps("Lisa", "Martin", 19))
Me.Add(New Peeps("Ilana", "James", 39))
Me.Add(New Peeps("Halle", "Bora", 19))
Me.Add(New Peeps("Jason", "DeVora", 29))
Me.Add(New Peeps("Julie", "Jones", 10))
Me.Add(New Peeps("George", "Hill", 30))
End Sub
End Class
Now, you can apply one of the custom styles I created in my previous post to further customize the UI you just created.
Last week, Silverlight 2 beta one was the hot topic at the Mix 08 conference that took place in Las Vegas, and rightly so, as it now has even more great functionality to offer, and you can find out about specific details on Silverlight.net or on Scott Guthrie's blog. Scott's blog also contains several very informative walkthroughs detailing how to use much of the new functionality, and I highly recommend checking it out.
One of the new aspects of Silverlight 2 that I'm most psyched about right now is the new set of controls that it has to offer; which includes...
- Button
- Toggle Button
- Radio Button
- Checkbox
- Texbox
- Tooltip
- Hyperlink
- Slider
- ScrollViewer
- Calendar
- Datepicker
- DataGrid
- ListBox
- etc…
The default controls look great as is, but I need variety, so a designer friend of mine and I decided to put together a few new sets of styles for the controls listed above. We now have three different sets that are ready for you to check out and two more that will be ready for consumption within the next two weeks. Here’s what we have now, and you can view the styled controls in action or download them to add to your project (Page.xaml contains my sample page layout and App.xaml contains the style definitions)….
The download for the Flat set of styles also contains a Page.xaml.cs, and a Page.xaml.vb file. The reason these files are there is because I'm auto generating my columns in my data grid and the only way I can control the styles for the column content is through code (I'm changing fontfamily and fontsize). If I weren't autogenerating the columns I could control the style for the column content in the way I have for every other control (in the case of datagrid, I would use ElementStyle and EditingElementStyle).
The following set of steps describe some of the ways that you can apply these styles to your project.
Apply Styles Globally
To use the styles globally in your project, open your App.xaml file and replace your <Application.Resources>...</Application.Resources> with my <Application.Resources>...</Application.Resources> for the set of styles that you are interested in using.
Then, you can utilize the styles for controls throughout your project by adding a reference to the style of interest. For example, for button you would add the bold text below to the button tag,
<Button Content="hi" Style="{StaticResource buttonStyle}"/>
Apply Styles to a Particular XAML Page
To use the styles in a particular XAML page, open the page and add the following below the opening UserControl tag, <UserControl.Resources></UserControl.Resources>, and then copy and paste my styles from App.xaml into the tag (minus <Application.Resources></Application.Resources>)
Then, you can utilize the styles for controls throughout the XAML page by adding a reference to the style of interest. For example, for button you would do exactly as described in the previous example, and add the bolded text below to the button tag,
<Button Content="hi" Style="{StaticResource buttonStyle}"/>
Apply a Style to a Particular Control Inline
To use a style for a particular control inline, place the style directly in the control of interest. For example, for button you would add the following to your button tag (you also need to remove the x:Key attribute from the style tag as shown in the comment below)
<Button Content="hi">
<Button.Style>
<!-- Button -->
<!-- ORIGINAL STYLE TAG NEEDS X:KEY REMOVED AS SHOWN BELOW, HERE'S THE ORIGINAL TAG ----> <Style x:Key="buttonStyle" TargetType="Button">-->
<Style TargetType="Button">
<REST OF STYLE HERE BUT I'M NOT SHOWING IT :)-->
</Style>
</Button.Style>
</Button>
Please ping me with questions if anything is unclear.
