C H A P T E R 10

■ ■ ■

235


Styling in Silverlight
Of course you will want to create a rich appearance for your Silverlight application. You’ll make choices
about your design. What font size and family will you use? How much space will you place between your
objects? What size of text boxes and buttons will you use?
As you’ll learn in this chapter, you can control the styles of your Silverlight application’s UI elements
in several ways. The first approach you will explore is the straightforward use of inline properties. Then
you will look at how to define and apply Silverlight styles.
Inline Properties
You can simply define style properties directly in the object definitions. As an example, the following code
snippet sets the FontFamily, FontSize, FontWeight, and Margin properties within the TextBlock itself.
<TextBlock
Grid.Row="0"
Grid.Column="0"
Text="First Name"
FontFamily="Verdana"
FontSize="16"
FontWeight="Bold"
Margin="5" />
You can set inline properties using either Visual Studio or Expression Blend. Let’s try out both.
Try It Out: Setting Inline Properties with Visual Studio
The following exercise demonstrates how to use Visual Studio 2008 to define the appearance of your
Silverlight applications with inline properties. In this exercise, you will create the UI for a simple data-
input application. You will not add any logic to the application, since the focus is on the appearance of
the controls.

1. Open Visual Studio 2008 and create a new Silverlight application named
Ch10_VSInlineStyling. Allow Visual Studio to create a Web Application project
to host the application.
CHAPTER 10 ■ STYLING IN SILVERLIGHT

236

2. When the project is created, you should be looking at the MainPage.xaml file. If
you do not see the XAML source, switch to that view. Start by adjusting the size
of the UserControl to get some additional space in which to work. Set Height to
400 and Width to 600, as follows:
<UserControl x:Class="Ch10_VSInlineStyling.MainPage"
xmlns="
xmlns:x="
Width="600" Height="400">
<Grid x:Name="LayoutRoot" Background="White">

</Grid>
</UserControl>
3. Add four rows and two columns to the root Grid. Set the width of the left
column to 150, leaving the rest of the row and column definitions unspecified,
as follows:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>

<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
Next, add TextBlock controls in the three top-left columns and TextBox
controls in the top-right columns, with the text First Name, Last Name, and Age.
Then add three Button controls within a horizontal StackPanel in the bottom-
right column. Give these buttons the labels Save, Next, and Delete. (Again, you
won’t be adding any logic to these controls; you will simply be modifying their
appearance.) The code for this layout follows:
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Age" />
CHAPTER 10 ■ STYLING IN SILVERLIGHT

237



<TextBox Grid.Row="0" Grid.Column="1" />
<TextBox Grid.Row="1" Grid.Column="1" />
<TextBox Grid.Row="2" Grid.Column="1" />

<StackPanel Grid.Row="3" Grid.Column="2" Orientation="Horizontal">
<Button Content="Save" />
<Button Content="Next" />
<Button Content="Delete" />
</StackPanel>
</Grid>
4. Press F5 to start the application. You will see that the UI you have created is far
from attractive, as shown in Figure 10-1. So let’s make this ugly UI look a bit
nicer by adding some styling.

Figure 10-1. Default input form without styling
CHAPTER 10 ■ STYLING IN SILVERLIGHT

238

5. Start with the three TextBlock controls. Within Visual Studio, set the
FontFamily, FontSize, FontWeight, and Margin properties directly within each
TextBlock definition, as shown in the following code snippet. As you type the
property names, you will notice that IntelliSense makes this task a bit less
tedious. Once you have set the four properties on the First Name TextBlock,
copy and paste the properties to the other two TextBlock controls.
<TextBlock Grid.Row="0" Grid.Column="0" Text="First Name"
FontFamily="Verdana"
FontSize="16"
FontWeight="Bold"
Margin="5" />

<TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name"
FontFamily="Verdana"
FontSize="16"
FontWeight="Bold"
Margin="5" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Age"
FontFamily="Verdana"
FontSize="16"
FontWeight="Bold"
Margin="5" />
6. Run the application again. You can see the changes that have been made to the
TextBlock labels, as shown in Figure 10-2.
CHAPTER 10 ■ STYLING IN SILVERLIGHT

239


Figure 10-2. Input form with styled TextBlock labels
7. Now let’s focus on the TextBox controls. Add the following style attributes to
these controls.
<TextBox Grid.Row="0" Grid.Column="1"
VerticalAlignment="Top"
Height="24"
Margin="5"
FontSize="14"
FontFamily="Verdana"
Foreground="Blue"
Background="Wheat" />

<TextBox Grid.Row="1" Grid.Column="1"

VerticalAlignment="Top"
Height="24"
Margin="5"
FontSize="14"
FontFamily="Verdana"
CHAPTER 10 ■ STYLING IN SILVERLIGHT

240

Foreground="Blue"
Background="Wheat" />

<TextBox Grid.Row="2" Grid.Column="1"
VerticalAlignment="Top"
Height="24"
Margin="5"
FontSize="14"
FontFamily="Verdana"
Foreground="Blue"
Background="Wheat" />
8. Run the application to see the effect. It should look like Figure 10-3.

Figure 10-3. Input form with styled TextBox controls
Notice that the spacing between the rows is too large. Ideally, the spaces
should only be large enough to allow the margins of the controls to provide the
separation. To adjust this spacing, on each RowDefinition, change the Height
property to Auto, as follows:
CHAPTER 10 ■ STYLING IN SILVERLIGHT

241


<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
9. Once more, run the application to see how it looks at this point. Figure 10-4
shows the results of the automatic height settings.

Figure 10-4. Input form with styled RowDefinitions
10. The next elements to tackle are the Button controls. Add the following style
attributes to these three controls:
<Button Content="Save"
FontFamily="Verdana"
FontSize="11"
Width="75"
Margin="5" />

<Button Content="Next"
FontFamily="Verdana"
FontSize="11"
Width="75"
Margin="5" />

<Button Content="Delete"

FontFamily="Verdana"
CHAPTER 10 ■ STYLING IN SILVERLIGHT

242

FontSize="11"
Width="75"
Margin="5" />
11. Run the application to see the effect. It should look like Figure 10-5.

Figure 10-5. Input form with styled buttons
12. Finally, it would be nice to add a margin around the entire application. To do
this, simply add a Margin property definition to the root Grid, as follows:
<Grid x:Name="LayoutRoot" Background="White" Margin="25">
13. Press F5. The final product is a UI that looks pretty nice, as shown in Figure 10-6.
As you saw in this exercise, the process of setting inline properties in Visual Studio is simple and
straightforward. However, the sample application contained only nine controls. You will look at some
better options later in this chapter, in the “Silverlight Styles” section. Next, let’s see how to set inline
properties within Expression Blend.
CHAPTER 10 ■ STYLING IN SILVERLIGHT

243


Figure 10-6. Final input form styled with inline properties
Try It Out: Setting Inline Properties with Expression Blend
The previous example used Visual Studio to set the inline properties of an application’s controls. For
those of you who are not a big fan of a lot of typing, you may find that Expression Blend is a better place
to set these properties. In this next exercise, you will perform the same styling as in previous exercise,
but using Expression Blend to set the properties, rather than Visual Studio 2008. Let’s give it a try!

1. Open Expression Blend and create a new Silverlight 2 application named
Ch10_BlendStyling.
2. The UserControl is 640 by 480 by default when created in Expression Blend, so
you can leave that size. The first thing to do is add the column and row
definitions. You can copy and paste the grid definitions from the previous
exercise, or you can add the columns and rows using Expression Blend’s grid
editor, as described in Chapter 9. The end result should look like Figure 10-7.
3. Next, add the controls to the form. In the Toolbox, double-click the TextBlock
control three times to add three TextBlock controls to the grid. Then double-
click the TextBox control three times, which will add three TextBox controls
below the TextBlock controls.
4. Double-click the StackPanel layout control. Once the StackPanel is added,
double- click it in the Objects and Timeline panel so that it is outlined, as
shown in Figure 10-8.
CHAPTER 10 ■ STYLING IN SILVERLIGHT

244


Figure 10-7. Completed grid layout

Figure 10-8. Selecting the StackPanel in the Objects and Timeline panel
CHAPTER 10 ■ STYLING IN SILVERLIGHT

245

With the StackPanel selected, double-click the Button control three times. The
three Button controls will appear within the StackPanel, as shown in Figure 10-9.

Figure 10-9. The Button controls added to the StackPanel

By default, Expression Blend adds a number of properties that you don’t want.
In the next steps, you’ll remove the properties shown in bold in the following
XAML:
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap"/>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap"/>
<TextBox HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"/>
CHAPTER 10 ■ STYLING IN SILVERLIGHT

246

<TextBox HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"/>
<TextBox HorizontalAlignment="Left"
VerticalAlignment="Top" Text="TextBox" TextWrapping="Wrap"/>

<StackPanel Margin="0,0,50,20">
<Button Content="Button"/>
<Button Content="Button"/>
<Button Content="Button"/>
</StackPanel>
</Grid>
5. In the Objects and Timeline panel, highlight all of the TextBlock and TextBox
controls, as shown in Figure 10-10. You can highlight multiple items in the
Objects and Timeline panel by holding down the Shift or Ctrl key as you click.

Figure 10-10. Selecting multiple objects in the Objects and Timeline panel
With these six controls selected, look in the Properties panel. Notice that any
property that is set in the XAML has a white dot to its right. (Properties you
cannot edit have a gray dot.) You can easily remove these properties from the
XAML and “reset” the code by clicking the white dot and selecting Reset. Start
out by resetting the HorizontalAlignment property located in the Layout
section of the Properties panel, as shown in Figure 10-11. Then reset the
VerticalAlignment property. This will remove the HorizontalAlignment and
VerticalAlignment property definitions in the XAML.