ux musings : Silverlight

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!

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.