Search

Introduction

One of the main concepts, when you work over a complex (or not so) project, is “divide and conquer”. This is the need of splitting the whole project into small and reusable parts, called controls. Having lots of these smaller parts, you can easily manage them in a view (page, window, etc).

People who have worked with WinForms and ASP.NET are already familiar with this idea. It is realized both in WPF and Silverlight as well. Each control has its own behavior and style. The look and feel of each control can be tweaked through styles or can be entirely redesigned through templates, and the behavior of controls can be modified through event handlers.

Ronnie Saurenmann from the Swiss MSDN Team has posted three very impressive Line of Business style applications which are available to try out. This is some kind of continuation of a blog post that Ronnie wrote in August which included some interesting demos of Silverlight for LOB.

Radenko Zec has an article on styling Silverlight datagrid control in which he explains how to modify default Silverlight datagrid control look.

Styling control is a very easy way to tweak the minor visual characteristic of the control such as foreground and background colors, the font style and size, padding, etc. Usually the styles are stored as resources which allows you to reuse them whenever you want.

The Style has TargetType specifying the type of the object the style can be applied to and a key used to identify the style. The Style contains numerous Setters, which describe the values which you want to set to specific properties.

To apply style to a control simply specify the Style property of the control to point to the static resource with a specific key name.

   1: <Grid>

   2:     <Grid.Resources>

   3:         <Style TargetType="Button" x:Key="myButtonStyle">

   4:             <Setter Property="Width" Value="100" />

   5:             <Setter Property="Height" Value="25" />

   6:             <Setter Property="Foreground" Value="#FF87091F"/>

   7:             <Setter Property="Padding" Value="2"/>

   8:             <Setter Property="BorderThickness" Value="4"/>

   9:             <Setter Property="FontWeight" Value="Bold" />

  10:             <Setter Property="FontFamily" Value="Portable User Interface" />

  11:         </Style>

  12:     </Grid.Resources>

  13:     <Button Content="Click Me!" Style="{StaticResource myButtonStyle}">

  14:     </Button>        

  15: </Grid>

 That's it!