One way, is to define a style for the inteface element and attach a behavior that forces the string to be in all caps. Attaching behaviors in styles is something that I just discovered was possible, and it's pretty amazing!

I've created a sample project that contains two very simple TextBlock styles and associated behaviors that either force TextBlock text to be upper case or lower case as appropriate. What's great about this is that people consuming the styles no longer have to worry about the case of the text. The style alone controls the text case. This is particularly interesting in situations where TextBlocks are bound to data as the form of the bound data may not be known (e.g. it may not be all upper case, mixed case, etc...). The image below is a screen shot of the sample application

Before diving into the details, I want to briefly discuss the application I was building for the demo. The application was a blog for me, and it had to have bright and vibrant colors, fun animations and transitions, and an atypical feel. I didn't build out the entire experience during the demo, but I did build some of the 'friends' section and the 'flickering' section, and the general feel for the application is shown below

 Before moving further, please…

• Install Silverlight 4 Tools RC2 for Visual Studio
• Install the Silverlight Toolkit
• Install Blend 4 RC
• Download my project for reference

Application Themes

Towards the beginning of my demo, I showed how use of the Silverlight Navigation Application template can speed application development efforts. It provides building blocks for common application types, a navigation framework with a couple of pages, and it can leverage themes available on the Expression Gallery. The subsequent images show how I started building my application by using the template and how I applied a custom theme to speed initial application building steps

Create Silverlight Navigation Application Template Based Project Create a new Silverlight project and choose the Silverlight Navigation Application template. After creating the application, the UI should appear as follows when opening MainPage.xaml in the Visual Studio design surface

Apply New Project Styles and Update References Replace the default Styles.xaml file with my Styles.xaml, and then update project references by adding the following as shown below (my Styles.xaml file requires several additional references before the project will build correctly)

Build Project Once the Styles.xaml file is updated appropriately and the project is built, it should look as follows in the browser

Page Transitions

Compelling page transitions are used in many applications these days, and Blend makes it easy to create these types of transitions. In my application, I used one of the page transitions that Blend enables 'out of the box' (so to speak). The transition is a Ripple effect and details for creating this transition are found below

Add Visual State and Transition Effect to Page Open the xaml page, open the 'States' panel, add a VisualStateGroup, add a state, and name the state ('LoadPage' is what I named my state). Next, add a transition effect by clicking the 'fx' glyph, choose a transition effect (I chose Ripple), click the graph glyph and choose an easing function (I chose circle out), and then choose the time for the transition to take place (I chose 1 second)

Add GoToStateAction to Page Open the 'Assets' panel, select the 'Behaviors' item from the tree, and then drag and drop 'GoToStateAction' onto your 'Page' in the 'Objects and Timeline' panel

Specify GoToStateAction Properties Open the 'Properties' panel, select 'Loaded' for the EventName, and then choose your newly created state in the StateName combobox

Shapes

Blend provides several shapes that you can leverage in your applications. The arrow shape was used in my application to highlight the currently selected item in the ListBox, and details for producing this same effect are found below

Edit the ListBox ItemContainerStyle Right click the ListBox, select 'Edit Additional Templates', and then select the appropriate template as shown below

Choose a Shape Open the 'Assets' panel, select 'Shapes' from the tree, and then choose an appropriate arrow shape

Add the Arrow to the UI Double click the arrow to add it to the UI and then set the opacity of the arrow to 0

Set Arrow Opacity in Selected State Open the 'States' panel, choose the 'Selected' state, and then set the arrow opacity to 100%

Master - Details Transitions

Transitions can make the navigation experience for master-details scenarios engaging and fun, and Blend makes it easy to create these experiences. In my application, as items in the ListBox are selected, the details slide in from the right, and this is very easy to create as you will see below

Create Details User Control and Add Slide In Visual States Create a user control for details (mine is called CT_OneControl.xaml), add a visual state group, add two states, name the states (mine are named 'Slide1' and 'Slide2'), add a transition effect for the visual state group (mine is slide in from the right), add an easing function (mine is circle out), and a time for the transition to take place (mine is .75 seconds)

Add the User Control to the Page with the Master Control Add the newly created details user control to the page with the master control as shown below

Add a Bit of Code to the Trigger the Details State Transition Add an eventhandler to the master control to trigger the details state transition (my master control is a ListBox, my event is SelectionChanged, and my event handler is LB_One_SelectionChanged). Now add a bit of code to the event handler that checks for the current state of the details user control, and, then, sets the state to one of the two states that is not the current state (in my case it sets the state to 'Slide1' or 'Slide2' accordingly)

The End! Until part two ;)

• All button controls are now slightly rounded to add a bit of visual interest to the set
• The "Animated" property for text hinting is now used to soften the appearance of fonts (we're not sure it works well when the interface is in high contrast modes, but it looks great when in standard mode)
• All controls use the font Segoe UI and fallback to Lucida Sans Unicode and then Verdana 

The project also contains a Styles.xaml file that you can use to theme your Silverlight Navigation Application projects by simply swapping Styles.xaml files. This new theme is a high contrast derivation of one of the three new themes that we plan to make available to the community this month. More details can be found below and the updated project is available for download here.

Screen Shots

What follows are screen shots of the controls in standard and high contrast modes... 

Text Hinting

As mentioned previously, the theme now uses texthinting set to "Animated", and the controls look great in standard mode, but they are a bit muddied in high contrast modes with dark background colors, as you can see below (the first image shows texthinting set to "Animated" and the second image shows texthinting set to "Fixed"). If your scenarios require crisp text, we recommend you do a search and replace on "Animated" and replace it with "Fixed"... 

Let me know what you think of the theme, and feel free to ping me with questions!

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

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

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

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

Check them out!

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

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!

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

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