When you are working on a rich user interface application, the most important thing that you need to
figure out is how you can make your user interface appealing and intutive. As developer you can
put together the back end plumbing to fetch the data and wire it to the user interface. But its the
design part that can be tricky at times. You try to figure out color schemes and layout details of
your pages and controls to make it appealing to your users.
Silverlight Toolkit provides more than a dozen themes that you can choose to implment your user interface
look and feel. Some time you find that one theme may not fit all the needs. Well, tool kit does not stop
you from mixing the themes as well. In this post I will show simple steps on how to use
Themes from Silverlight Toolkit.
Install Silverlight Toolkit
If you are reading this post then there is good chance that you already know what silverlight toolkit
is and you have already installed it. But for sake of completion, I will provide the link from where
you can download latest toolkit.
Download Silverlight Toolkit From CodePlex
Add Assembly Reference
Add reference to theme assemblies as per your need. Each theme is contained in with in its own assembly. You
can add reference to all or what you need. For example I wanted to add Shiny Red and
Rain Purple themes to my project. So I have added reference to those assemblies only. Following
screen shot how the references look like in my project.
Add Theme From Toolbox
Adding a theme to your page is as simple as dropping a control from the toolbox. If you look under
Silverlight Controls node in Toolbox, you will find the controls as shown in the
snapshot below. Pick the one that you want to use and drop in on your Silverlight page surface.
You will see a code snippet as shown below appear on your page's XAML.
<shinyRedTheme:ShinyRedTheme>
<Grid x:Name="LayoutRoot">
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<StackPanel x:Name="ContentStackPanel">
<toolkit:RainierPurpleTheme Height="50" Name="rainierPurpleTheme1" Width="100">
<Button x:Name="ClickItButton" Content="Click Me!" Width="Auto"></Button>
</toolkit:RainierPurpleTheme>
</StackPanel>
</ScrollViewer>
</Grid>
</shinyRedTheme:ShinyRedTheme>
The tag prefix toolkit and shinyRedTheme are ones that need to
be defined at top of your page with other namespace declaration. When you drop a theme from
toolbox on the page, the declaration gets added at top of the page automatically. Here is what
it looks like in my project.
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
shinyRedTheme is namespace declaration that I added manually.
Add Controls
One you have dropped a theme on the page, you can add your UI controls inside that theme's
container and all the controls with in that block will have that theme applied to it.
Mix Themes On Silverlight Page
If your UI needs to more than one themes and needs to be nested, there is nothing special
you will need to do. Simple drag and drop another theme inside one theme and you are good
to go. Following image shows rainier purple theme nested inside shiny red theme. And the
XAML code snippet above reflects it as well.
I hope this gives you a good starting point on how to use themes from silverlight toolkit.
Subscribe