• ux musings

    Windows System Color Theme for Silverlight

    • 2 Comments

    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

     

  • ux musings

    Silverlight 3 Application Themes

    • 1 Comments

    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!

  • ux musings

    Props to Two Cool Silverlight Applications

    • 3 Comments

    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!

  • ux musings

    Mix 09' Was Amazing!

    • 10 Comments

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

    1. VS2008 SP1
    2. 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!

     

  • ux musings

    Silverlight 2 Public Release Candidate is Available Now

    • 13 Comments

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

     

Page 2 of 4 (20 items) 1234