Connect

  • Connect with me

  • Wednesday, June 01, 2011

    NGTweet Part 3 : Use Silverlight Themes to enhance UI

    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


    image


    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.


    image


    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.


    image


    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.


    image


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

    image


    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


    image


    This is BureaBlueTheme in action


    image


    And the last one I would try is ShinyRedTheme


    image


    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 Smile

    3 comments:

    1. This is a nice article..
      Its very easy to understand ..
      And this article is using to learn something about it..
      asp.net, c#, javascript
      Thanks a lot..!

      ReplyDelete
    2. This is a nice article..
      Its very easy to understand ..
      And this article is using to learn something about it..
      asp.net, c#, javascript
      Thanks a lot..!

      ReplyDelete
    3. Anonymous4:48 AM

      Thank you so much, it helped me! :)

      ReplyDelete