Getting started with Silverlight: Part 6 – Polish the UI with Styles and Templates

This is part 6 in a series on getting started with Silverlight.  To view the index to the series click here. You can download the completed project files for this sample application in C# or Visual Basic.

We now have a functioning application but could use some more polish.  Let’s make the data template for the search results look a little better.  We’re going to modify a few things in the data template in Search.xaml for the ItemsControl. 

These modifications can be done in Blend just like we have been doing with the editing template features.  This is how it was accomplished above.  With these styles now applied the new UI looks like this:

Notice how more polished that looks and we didn’t affect any code, just the template style.  Since there was a few changes here since the last step it would be a lot of code to write out but let me point out where the styles are in the final project.

The styles and templates are applied just like the binding syntax with data and the templates.  If we look at the ScrollViewer it now states:

   1: <ScrollViewer Style="{StaticResource scrollViewerStyle}" ...

   2: ...

Notice the familiar syntax?  instead of {Binding} it uses {StaticResource} to refer to a resource that either exists in the document or the App.xaml.  In this case the style is in the App.xaml (look for the scrollViewerStyle and scrollBarStyle nodes at the bottom of the file).

We also just made some subtle changes to the colors of the included style from the template.  With styling and templating in Blend, you don’t have to worry about modifying your .NET code most of the time.  We are able to change the visual layout and theme of controls without changing the code.

More resources on using Expression Blend:

• Adam Kinney’s blog (Blend Evangelist)
• Styling and Skinning Controls

Having a designer friend at this stage of polishing the UI is extremely helpful.  In fact, you’d likely have this UI defined MUCH earlier in the project than our exercise here.  The two tools, Expression Blend and Visual Studio, share the same project structure file so you can easily open the project in either tool instead of passing around loose files.

Take a look around the Assets/Styles.xaml file in the completed project to understand how styles and templates can be used.

Next step: finishing off our application by making it available out-of-browser in part 7.