Those of you who have a background in Web Design must be familiar with the use of CSS for defining using/ reusing styles. A very efficient way to separate create and modify styling from the content. This is pretty much the same in Expression Blend. Using styles you can rapidly and efficiently modify styles on various areas of text such as headings, sub headings and body text. Styling can also be used for creating styled buttons etc. Another benefit of using styles is that they separate the behavior from the presentation (overall look and feel).
In Expression Blend styling is different from templates. We can use both styles and templates together but they are add different capabilities to the project. A template is used to modify the entire look and feel of a control for example a check box. If we need to make a check box with rounded edges or a custom shape we would have to make changes in the template of the control. But if we only need to change the color of the standard template that can be achieved through the style functions.
Now lets quickly go through the steps for creating simple style in Expression Blend. I’m currently using Expression Blend 3
Open Expression Blend and from the file menu select ‘New Project’. For this example we’d be using Silverlight 3 Application + website. Save the project at any convenient location.
For this article I’m using a few block of the world famous ‘Lorem Ipsum’ text that are placed on the layout root.
For a start we’d create a style for heading and body text. Go to Object > Edit Style > Create Empty.
Like I mentioned before we’re going to make style for heading first so I’m going to name this style ‘headingText’ and from the ‘define in’ section I’d choose ‘Application’ so that I can use this same style on other pages of the application as well.
One the naming and scope definition is done click ok and you’d be taken to the App.xaml in which you can edit the style UI
Play around an experiment to make the right style. For this example I’ve changed the font color , font size font weight and margins. Now if you observe the Properties Panel you’d see that all the properties I’ve edited have a small white box next to them.
The XAML of the style would look like this:
<Application.Resources>
<!-- Resources scoped at the Application level should be defined here. -->
<Style x:Key="headingText" TargetType="TextBlock">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="#FFFF6600"/>
<Setter Property="Margin" Value="2"/>
</Style>
</Application.Resources>
If you go back the MainPage.xaml and check the XAML the defined style would be applied as:
Style="{StaticResource headingText}"
Now lets just repeat the above steps to create a style for the body text and the final output would be:
