Styles in Silverlight

Introduction

We all are aware of CSS and user control concepts in ASP.NET which are used for styling web pages. A similar concept in Silverlight provides the option to use a predefined look for controls. While Styles are used for applying simple makeover to controls, Templates are used for complex styling with an option to change the complete visual representation. Generally, Styles are used for a consistent look throughout the application, and control templates are used for the visual improvement of controls.

In this post, we will create a style and will attach it to a control.

Defining a Style

Styles are set as common properties that can are reusable by various other instances. In Silverlight, styles are defined in a resource file and can be applied to a control against its Style property.

Now suppose we need a button style for our application. The first step we need to do is create a Style in the resource file. Here in this example, I will add a Style to the Application.Resource tag in the app.xaml file. The code below shows a style named MyCustomStyleButton with a TargetType of Button. The TargetType will ensure that this Style can be used for a specific type of control only.

Let's create a Style for a Button:

<Application.Resources> 
<!–Creating a Button Style–> 
<Style x:Name="MyCustomeStyledButton" TargetType="Button"> 
</Style> 
</Application.Resources>

Now we will add properties to this Style using a Setter property collection.

<Application.Resources> 
<!–Creating a Button Style–> 
<Style x:Name="MyCustomeStyledButton" TargetType="Button"> 
<!–Asigning properties with Setter Collection–> 
<Setter Property="Background" Value="AliceBlue"/> 
<Setter Property="Height" Value="28″/> 
<Setter Property="Width" Value="125″/> 
<Setter Property="VerticalAlignment" Value="Center"/> 
</Style> 
</Application.Resources>

Now for complex properties, we can define a Style as follows:

<!–Complex Properties–> 
<Setter Property="BorderBrush"> 
<Setter.Value> 
<LinearGradientBrush EndPoint="1,0.5″ StartPoint="0,0.5″> 
<GradientStop Color="Red" Offset="0″ /> 
<GradientStop Color="#FF792525″ Offset="1″ /> 
<GradientStop Color="#FF351010″ Offset="0.439″ /> 
</LinearGradientBrush> 
</Setter.Value> 
</Setter>

So overall, the button style is ready to be use for button type controls.

<Style x:Name="MyCustomeStyledButton" TargetType="Button" > 
<!–Asigning properties with Setter Collection–> 
<!–Simple Properties–> 
<Setter Property="Foreground" Value="Red"/> 
<Setter Property="Height" Value="28″/> 
<Setter Property="Width" Value="125″/> 
<Setter Property="VerticalAlignment" Value="Center"/> 
<Setter Property="FontWeight" Value="ExtraBold"/> 
<!–Complex Properties–> 
<Setter Property="BorderBrush"> 
<Setter.Value> 
<LinearGradientBrush EndPoint="1,0.5″ StartPoint="0,0.5″> 
<GradientStop Color="Red" Offset="0″ /> 
<GradientStop Color="#FF792525″ Offset="1″ /> 
<GradientStop Color="#FF351010″ Offset="0.439″ /> 
</LinearGradientBrush> 
</Setter.Value> 
</Setter> 
</Style>

Applying a Style to a Button

Now we need to attach the custom style to our button. which can be done by adding a static resource to the button style property.

<Button Content="Submit" 
Margin="51,48,0,0″ 
Name="button1″ 
Style="{StaticResource MyCustomeStyledButton}" 
>

And our button will look like:

Explicit and Implicit Styling

The example above is an Explicit method of applying a Style to a control, where the controls are assigned with style names. But if we want the same button look throughout the application as a default style, then we need to follow the implicit way of styling.

For implicit styling, we will remove the name attribute from the XAML. So then the the style is applicable to all controls of the specified TargetType.

<Style TargetType="Button" > 
<!–Asigning properties with Setter Collection–> 
<!–Simple Properties–> 
<Setter Property="Foreground" Value="Red"/> 
<Setter Property="Height" Value="28″/> 
<Setter Property="Width" Value="125″/> 
<Setter Property="VerticalAlignment" Value="Center"/> 
<Setter Property="FontWeight" Value="ExtraBold"/> 
<!–Complex Properties–> 
<Setter Property="BorderBrush"> 
<Setter.Value> 
<LinearGradientBrush EndPoint="1,0.5″ StartPoint="0,0.5″> 
<GradientStop Color="Red" Offset="0″ /> 
<GradientStop Color="#FF792525″ Offset="1″ /> 
<GradientStop Color="#FF351010″ Offset="0.439″ /> 
</LinearGradientBrush> 
</Setter.Value> 
</Setter> 
</Style> 

Conclusion

Styles help maintain consistency and also minimizes redundant code in XAML files tremendously. In our next post, we will see how to change the look of controls using control templates.