Background
This is the third part of the series in building the Silverlight Twitter client application which I have named NGTweet. You can refer to the earlier post if you had missed it. I did not pay much attention to the user interface in the previous posts. One of the strong point in favour of Silverlight as well as WPF is that we can build rich User Interfaces. The divide between developers and designers can be reduced by using tools like Expression Blend to build “cool” applications.
For a developer its always difficult to come up with the right mix of colours and textures to give a consistent look and feel. We tend to spend more time getting the logic in place. People with designer skills are good at developing user interfaces which are user friendly and appealing to the end user. Microsoft has released a set of Themes to help developers build consistent and appealing UI. I am going to demonstrate it in this post.
Pre-requisites for using Silverlight Themes
Silverlight has build in support for applying styles and Themes to controls. This has been there since the first edition. But it is always time consuming to handcraft each and every style and theme. With the release of Silverlight toolkit Microsoft published prebuilt Themes which are very easy to use. We need to install the Silverlight toolkit to get started. There are dedicated versions of the toolkits available for WPF, Silverlight and Windows Phone 7. These are also based on the version of Silverlight or other technologies like Silverlight 4.
For the purpose of this demo I am using the Silverlight 4 toolkit. The toolkit contains additional controls which add to the core framework controls like the Calendar control, Busy Indicator etc. I’ll explore some of these controls in future postings. Assuming that you have the required infrastructure including Visual Studio 2010 and Silverlight 4 toolkit lets continue from where we had left last time around.
Use Silverlight Themes
When we displayed the results in the list box last time it was displayed with just a border around the items. It wasn’t very appealing and user friendly. So I thought of modifying the plain border into a rounded corner one.
<Border Background="BlanchedAlmond"
Margin="2"
Padding="3"
BorderBrush="Black"
CornerRadius="5"
BorderThickness="1">
Its a simple change but I like the end result. There is slight discomfort in the look of the text as well, when it stretches beyond the width of the list box and the horizontal scrollbar appears. Also the border doesn’t stretch uniformly for all text. Turns out that we need to disable the horizontal scrollbar of the ScrollViever control. And to fix the border issue we need to provide the ItemContainerStyle for the listbox item. These two changes are shown below
<ListBox Name="lstTweets"
Width="400"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
Height="500">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
The result of these changes is seen in the screenshot below
With the listbox in decent shape, lets turn our attention towards themes. There are 12 default Themes available with the Silverlight 4 toolkit. We can access them from the toolbox.
To start using a particular theme we can drag and drop the theme from toolbox onto the designer surface. Based on which theme is selected the reference will be added to the project references.
Each theme is a separate dll. I tried different themes so I have got references to all the ones which I tried. Once you have finalized the preferred theme, you can remove the unused references. As can be seen from the screenshots there is also a namespace added to the user control
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
The dll related to this is also added to the references when we drag a theme from toolbox. Once the references are added we can start using the theme for the controls. When we drag a theme it would create a tag in the XAML automatically based on where we drop it. We might need to position it appropriately. In my case I would like to to apply the theme for the complete user control. So I place it as the first content element of the user control itself. So all the controls will get wrapped inside the theme.
<UserControl x:Class="NGTweet.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400"
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
<toolkit:ExpressionDarkTheme>
In the last line we applied the ExpressionDarkTheme to this user control. Similarly we need to have the closing tag before the end of user control markup.
</toolkit:ExpressionDarkTheme>
</UserControl>
This will apply the settings from the theme to the controls. Lets take a look at the screen after applying this theme.
The background and the look of the scrollbar has changed. But the listbox looks ugly. That's because the background we have specified for the list box item control. The value is overriding the default style provided by the theme. Lets go and remove the background and see if it improves things with the default theme settings.
<Border Margin="2"
Padding="3"
BorderBrush="Black"
CornerRadius="5"
BorderThickness="1">
That change solved our problem. Now the UI looks neat and clean. Just to highlight the difference in appearance I’ll provide screenshots of couple of other themes. Here is the output of applying the BubbleCremeTheme
This is BureaBlueTheme in action
And the last one I would try is ShinyRedTheme
Since I am using only listbox control here the difference might not be so contrasting. But when you have a screen filled with all types of controls you can definitely see the difference after applying the theme.
Conclusion
If I were to get the look and feel of the above screenshots it would have taken few hours if not more. People with experience in designer tools like Expression Blend might still be able to get it done is shorter span of time. But not everyone has the privilege of using tools like Expression Blend. For developers working just with Visual Studio 2010 these themes can be of great help. Even if you are using Expression Blend the themes can act as a good starting point to customize only the controls you are interested in and for others continue using the defaults.
You can check the look and feel of different controls if a theme was applied using this link from Silverlight toolkit samples. Apart from the default themes available with the toolkit, Microsoft also released additional themes named Cosmopolitan, Windows, AccentColor and JetPack. All these can be downloaded using this link. Tim Heuer wrote about these themes in his blog on Jetpack and 3 other themes.
As always I have uploaded the complete working solution to dropbox.
Until next time Happy Programming
Thank you so much, it helped me! :)
ReplyDelete