ux musings : Controls

Silverlight 4 Notification Window Class

CorrinaB — Tue, 08 Dec 2009 08:27:00 GMT

Tim Heuer has a great blog post on the new NotificationWindow class for Silverlight 4 Out-Of-Browser applications. This class allows you to create notifications or 'Toast' for your Out-Of-Browser applications when you need to provided helpful information to the user as they are interacting with the application.

Tim provides great visuals for the notification window in his sample application, and I decided to leverage his sample to explore things myself and created a style that maps nicely with the default Silverlight control styles. My sample project can be found here and the visuals can be seen below...

Windows System Color Theme for Silverlight - Part Two

CorrinaB — Wed, 02 Dec 2009 06:34:00 GMT

The SDK controls are now themed in the Windows system color theme style, and the Toolkit controls will be themed very soon! The updated project is available for download here.

For those of you who desire a bit more contrast in the theme, particularly for high contrast color modes, there are a few approaches you can take...

One quick and simple approach is to open SysColors.cs and replace the appropriate gradient brushes with solid color brushes by changing LinearGradientBrush properties to Brush properties, and, in most cases, I would recommend using ControlColor for the replacement. This will eliminate the gradients used on buttons and increase contrast a bit
You could take it even further and replace the use of ControlDarkDarkBrush for fonts with ControlTextBrush or WindowTextBrush, depending on where the font sits (e.g. if it sits on a background filled with ControlBrush it should use ControlTextBrush and if it sits on a background filled with WindowBrush it should use WindowTextBrush). You may also consider changing control borders from ControlDarkBrush to ControlDarkDarkBrush. These changes will increase the contrast even more
Another approach is to create a second rescouce dictionary for use only when in high contrast color modes that has the desired contrast level. I have created a second project that shows how this can be done. This project shows mockup Ux for an LOB demo that was used at PDC 09', and it isn't fully functional, so please focus on the theme swapping functionality which can be found in MainPage.xaml.cs and LoadResource.cs. Creating a second theme is a lot more work, but it may be the best approach for many projects

Screen Shots

What follows are screen shots of the PDC Ux in default and high contrast white modes and the newly themed SDK controls in various Windows default and high contrast modes...

Windows System Color Theme for Silverlight

CorrinaB — Tue, 24 Nov 2009 05:53:00 GMT

Accessibility is important to consider when designing applications. Not only do those with visual, physical, speech, cognitive, and neurological disabilities benefit from software that is accessible, but those without these disabilities benefit as well. Silverlight makes it possible to create applications that address accessibility needs, and some colleagues of mine and I decided to explore some of the possibilities by creating a control and navigation template theme that maps to Windows system colors (this will allow the application to seamlessly respond to Windows high contrast mode color changes).

At this time, we have the Navigation template and the core controls themed. We plan to continue our explorations and theme the SDK and Toolkit controls as well. Please tell us what you think of our work to date…

What do you think of the visual appearance of the theme?
Will you be able to apply it to your Silverlight applications without extensive redesign, and if not why not?
Does the theme meet the needs of your core scenarios, and if not why not?
What is missing?

Utilizing the Theme

In order to use the theme, you will need to include the styles, “CoreControlStyles.xaml” and “Styles.xaml”, and two code files in your project. The first code file,” SysColors.cs”, maps the system colors to brushes, and the second code file, “SetterValueBindingHelper.cs” courtesy of Delay's Blog, enables data binding of the system color brushes in property setters (we utilized this in a few places).

Screen Shots

What follows are screen shots of the theme in the various Windows default and high contrast modes...

Thanks!

Corrina, Tsitsi, Vidya, and Susan

Mix 09' Was Amazing!

CorrinaB — Thu, 26 Mar 2009 00:53:00 GMT

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...

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!

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...

A New Set of Control Skins

CorrinaB — Mon, 24 Mar 2008 05:31:00 GMT

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!

Hooking Data up to ListBox and Datagrid

CorrinaB — Mon, 17 Mar 2008 03:17:00 GMT

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*" />

</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>

</Grid.RowDefinitions>

<ListBox.ItemTemplate>

</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>

</Grid.RowDefinitions>

<ListBox.ItemTemplate>

</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.

Silverlight 2 Control Skins

CorrinaB — Tue, 11 Mar 2008 03:32:00 GMT

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)….

Bubbly View Download
Red View Download
Flat View Download

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,

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,

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.Style>

<Style ~~x:Key="buttonStyle"~~ TargetType="Button">-->

</Style>

</Button.Style>

</Button>

Please ping me with questions if anything is unclear.