August, 2009

  • 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!

Page 1 of 1 (1 items)