Silverlight in Style

In his recent post blog, Jafar Husain did a nice introduction to the Rating Control which we shipped with the July edition of the Silverlight Toolkit.  Jafar and I (the PM) spend quite a bit of time on this control making sure we provide a very powerful control that is both flexible, highly customizable and also easy to use.  We had a set of scenarios that were important for us to deliver on. One of them was what we refereed to as the “Netflix” scenario. In this scenario, the initial state of the rating control was displaying an average value (in reality, it is netflix’s best guess on how you would rate this movie). When user selects a value, the average disappears and new user selection is displayed.

Normal State: (Average_Value)	Selected State (Value)

If you take a look at the Rating Control API, we have a property called Value  but you will notice that we did not have an additional property for AverageValue. We debated for a while about the usefulness of such property. On one hand, most rating controls display an average value, so it would be natural to include a property for Average Value. Digging a little bit more, we realized that adding this property will be add a lot of redundancy to the control. The complexity of managing all the Visual States for both the Value and AverageValue would make the designer experience far more complicated than it needs to be when in the end there is a much simpler way to handle such scenario as we will see in this post. 

The trick to accomplishing this scenario is simply super-imposing two rating controls. One would capture the average value and the other one would capture user selection. I chose to use a UserControl to encapsulate this 2 controls:

NetflixRatingControl.xaml:

<UserControl x:Class="RatingSample.NetflixRatingControl"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
            xmlns:local="clr-namespace:RatingSample"
            xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
            xmlns:inputToolkitPrimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Input.Toolkit">
    <Grid>
        <Grid.Resources>
          ....
        </Grid.Resources>
        <!--ReadOnly Rating Control used to display average-->
        <inputToolkit:Rating IsReadOnly="True" x:Name="netflix_average" 
                             Visibility="{Binding Path=Value, ElementName=netflix, Converter={StaticResource ValueToVisibilityConverter}}"
                             ItemCount="5" Value="{Binding AvRating}" 
                             ItemContainerStyle="{StaticResource RatingItemStyle_Average}"/>
        <!--Rating Control used to display user selected rating-->
        <inputToolkit:Rating x:Name="netflix" ItemContainerStyle="{StaticResource RatingItemNetflixStyle}"  
                             ItemCount="5" />    
    </Grid>
</UserControl>

NetflixRatingControl.xaml.cs:

namespace RatingSample
{
    public partial class NetflixRatingControl : UserControl
    {
        public NetflixRatingControl()
        {
            InitializeComponent();
        }
        /// <summary>
        /// Represent the average value for all ratings.
        /// </summary>
        public double? AverageValue
        {
            get
            {
                return netflix_average.Value;
            }
            set
            {
                netflix_average.Value = value;
            }
        }
        /// <summary>
        /// Represent the current rating selected by user.
        /// </summary>
        public double? Value
        {
            get
            {
                return netflix.Value;
            }
            set
            {
                netflix.Value = value;
            }
        }

    }

Pretty straightforward!. You can see a live sample here

Download Source Code here

In my last blogs, I went over how to customize the existing Silverlight Toolkit themes. In this post, I will talk about what it takes to create new themes that work with Implicit Style Manager.

Let's start by creating a Silverlight 2 project in Blend 2 and style few controls:

These 3 controls will help us illustrate how to create your theme file from the styles defined in your app.xaml or page.xaml. But before we get there, let's make sure we set up our project to make it easy to develop and test our theme file.

1. Using Visual Studio 2008, create a new Silverlight 2project:

2. Edit myTheme.xaml and add the following content:

3. We can go to blend now and start creating styles for each control as we usually do (By editing the control template).

4. Switch to the XAML View and copy all the Styles defined in the UserControl Resource Dictionary to myTheme.xaml

5. At this point we are ready to make the necessary changes to myTheme.xaml. 

1. Removing X:Key references from you style definitions.

Silverlight uses the full name of the target type as the key in the dictionary. Under the hood, ISM relies on the same mechanism to retrieve a style from the resource dictionary. Therefore the x:Key has to be removed.

Here is an example of how to convert the Button Style generated by Blend to a ISM version

Style generated by Blend	ISM Version

2. Change references to other Styles

Often, we have Styles that have reference to other styles such as in the case of ListBox style that has a reference to ScrollViewer. In this case, ISM will expect the Fullname of the type as the key.

Style generated by Blend	ISM Version

3. Add explicit references to other Styles

When creating new styles for certain composed controls that exposes style properties such as ItemStyleContainer or CalendarStyle, Blend will automatically hock up those style as follow:

ISM would not know about the ItemContainerStyle unless you add an explicit reference to it in the parent control's Style (in this case ComboBox Style)

Style generated by Blend	ISM Version

DatePicker, DataGrid and ComboBox are other examples of controls that will require adding a reference to other nested styles. You refer to existing the Silverlight Toolkit Themes to see how we modified the styles for these controls.

Conclusion

Creating themes that work with ISM is relatively easy but it can be painful to spot issues with your theme if forget to make the appropriate changes as described above. So a word of advice: Be very careful! :)  I hope this post will inspire you to create your own themes (like this one created by Pete Blois).

I wanted to see how far I can take the styling of the Silverlight toolkit charting controls. To answer my question, I turned to Excel and picked one my favorite chart themes:

The challenge was to see if I can reproduce the same look with the Silverlight toolkit charts. I created the initial charts in Visual Studio but all the styling happened within Expression Blend SP1. I am very pleased by the degree of flexibility the charting preview bits offer. You can change pretty much everything: the chart plot area, the legend, the axis...etc.  The design experience in Blend is still a little bit complex and cumbersome but I know that this something that is being actively addressed for future releases.

Here is the a screenshot of my Silverlight Application:

Creating this look required me to alter pretty much every style that the charts exposed in one way or the other. As I mentioned before, for a first time user, this can be tricky. To make it a little bit easier (at least I hope), I prepared this guide that walks through all the steps in Blend to produce such a style:

Download the guide in PDF format: Designer’s Guide to Styling Silverlight Toolkit Charting Controls.

You can download the sample project here

NOTE: I am still working on the Pie Chart which is a bit more challenging to produce....stay tuned :) ...

Today, I will explore the ExpressionDark Theme and will go through the process I use to generate many great looking variations of this theme. A killer tool that helps generate colors for themes is Kuler. what's even better is the Colorful Expression Add-in for Expression Design and Blend which in fact retrieves the colors from the Kuler back-end . This tool is great since it allows you to browse within Blend various color variations and generates brushes from those colors for you.

Here is a snapshot of the add-in as you will see it in Blend:

The codeplex site for Colorful Expression can be found here:http://www.codeplex.com/colorful. For the purpose of my work, I had to make minor changes to Colorful Expression Tool to generate the Brushes with the exact key that ExpressionDark Theme uses.

I created a simple silverlight application that helps preview how those colors will end up looking when applied to the Expression Theme.  The top part of the screenshot below shows the different brushes defined on top of the ExpressionDark.xaml theme. The lower part shows few controls where the Expression Theme was applied using the colors defined above.

You can download the ThemeDesigner Application here

Let's walk through the workflow:

1) Loading the Solution with Colurful Add-in

• Follow the instruction from the codeplex site to get the initial installation done
• Copy the modified Colorful.Blend.AddIn.dll and Colorful.Control.dll from the Colurful folder that you will find in the ThemeDesigner.zip) and copy to Program Files\Microsoft Expression\Blend 2 folder
• Start the command line and go to the Blend 2 folder: under Program Files\Microsoft Expression\Blend 2
• type Blend.exe -addin:Colorful.Blend.AddIn.dll
• Go to File->Open->Project/Solutions and load the ThemeDesigner solution

2) you should see something like this:

3) Changing the color variations:

	Delete the the "trees" grid
	Drag on of the Palettes from the colorful dialog to the design surface. (Adjust the Margin to 0,0,0,0 and ColumnSpan to 5...etc)
	You will get the message. Select the second option to overwrite existing resource
	You should see the colors reflected in the controls.

if you run the app, you will see the color scheme reflected in the controls:

4) Using the generated brushes to produce a new Expression variation

• if you like the colors, the next step would be to go back to Blend under the XAML view
• Select and Copy the following Brushes:

• Locate the ExpressionDark.xaml file from the toolkit sample folder, add to your project (or to the sample project from the last 2 blogs). Copy the brushes above over the existing one.

Conclusion:

My goal with this application was to have a better design experience when tweaking the colors of the expression theme. I hope this will help you as well.

Download ThemeDesigner here

In this blog I will be discussing the customization of the Rainier Theme. We will use the sample from the last blog and will first add the RainierOrange.xaml file from the Source\Controls.Samples\Theming\ThemeBrowser folder to our project and rename it RainierRadialBlue.xaml (don’t forget to set the build action to content). Ready?  Let’s start changing the color scheme of the controls in their different states

• Modifying the Normal Brush:

if you look into the RainierRadialBlue.xaml, you will notice the following brush:

by changing this brush, you will affect the color of all the controls when they are in their normal state.

Say for example, I want to change normal state as follow:

I will simply define a new RadialGradientBrush (I usually use Blend to do this):

Changing the mouse over state requires modifying the MouseOverBrush as follow:

• Modifying the Selected Background brush:

Changing the selected state requires modifying the selected background brush as follow:

• Modifying Highlight & Border Brush

The border brush defines the border of the controls when they are in the normal state:

The Highlight Brush defines the border color of the controls when they are in a focused state:

Conclusion:

Rainier theme was inspired from the default theme of the Silverlight controls. We wanted to allow a greater flexibility when changing the background color of the controls. As you can see, It took only few changes of a set of predefined brushes to change the look and feel of all the controls.

You can download the sample project here & RainierRadialBlue.xaml here.

We shipped the Silverlight Toolkit with the following Themes:

In this post, I will be talking about how to customize these themes  and produce many great looking variations.

Customizing Shiny Blue Theme:

First thing first, if you haven’t already done so, download the Silverlight Toolkit here. Under the Source\Controls.Samples\Theming\ThemeBrowser you will find all themes files as well as the source code for theme browser sample. This blog assumes that you are familiar with Implicit Style Manger. Please refer to Beatriz’s or Jesse Liberty blogs. (for a deep dive go to Jafar's blog, the developer of ISM)

For now, we will be working with ShinyBlue.xaml.

Step 1:

Create a new Silverlight Project in Silverlight Project

Step 2:

Add a reference to Microsoft.Windows.Controls.Theming.dll and System.Windows.Controls.dll

Step 3:

Add ShinyBlue.xaml to your project, rename to ShinyDarkTeal.xaml and set the build action to Content.

Step 4:

Add the following lines to your page.xaml file:

Step 5:

Open ShinyDarkTeal and search for the following lines (towards the beginning of the file):

 <Color x:Key="NormalBrushGradient1">#FFBAE4FF</Color>

 <Color x:Key="NormalBrushGradient2">#FF398FDF</Color>

Replace by the following:

<Color x:Key="NormalBrushGradient1">#FFC5E1D7</Color>

<Color x:Key="NormalBrushGradient2">#FF7CB2A2</Color>

<Color x:Key="NormalBrushGradient3">#FF3F8570</Color>

<Color x:Key="NormalBrushGradient4">#FF294C41</Color>

Step 6:

Compile and run the sample. You should see the following:

Conclusion

As you can see, changing the color of the theme is simple. In the next blog, I will dive deeper into theme customization. In the meanwhile, you can Download the sample here. I added more variations of the Shiny theme for you enjoyment:

You can download the individual themes here:

• ShinyDarkTeal.xaml
• ShinyDarkGreen.xaml
• ShinyDarkPurple.xaml

By now you must have already heard of the Silverlight Toolkit my team shipped today. If not, you can read all about it here.

Over the next few blogs, I will be covering a range of topics all intended to help Designers and Developers create graphically compelling applications with Silverlight. Here is a summary of upcoming blogs:

• Silverlight Toolkit Themes Customization
• Creating new themes
• Preview of upcoming Silverlight Toolkit themes
• Creating Styles for the Silverlight Charting Controls.

Stay tuned!