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…
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).
What follows are screen shots of the theme in the various Windows default and high contrast modes...
Corrina, Tsitsi, Vidya, and Susan
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 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 email@example.com.
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.
To apply these themes, simply swap out the ‘Styles.xaml’ file found in the project ‘Assets’ folder with the desired ‘Styles.xaml’ theme file.
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.
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.
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...
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...
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...
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....