Styling in Silverlight

You can set inline properties using either Visual Studio or Expression Blend.. Try It Out: Setting Inline Properties with Visual Studio The following exercise demonstrates how to use Vi

Trang 1

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

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

Trang 2

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:

<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" />

Trang 3

237

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

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

Trang 4

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"

Trang 5

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

Trang 6

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:

Trang 7

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:

Trang 8

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:

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

Trang 9

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

Trang 10

244

Figure 10-7 Completed grid layout

Figure 10-8 Selecting the StackPanel in the Objects and Timeline panel

Trang 11

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

Trang 12

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

Trang 13

247

Figure 10-11 Resetting the HorizontalAlignment property

6 The TextWrapping property is located in the Text Section of the Properties

panel, but you must extend the section to see it I figured that this would be a

good opportunity to show you another feature of the Properties panel At the

top of the Properties panel, type TextWrapping into the Search box That will

filter the Properties panel to show only the TextWrapping property Click and

reset that property as well

7 Next, highlight the StackPanel and reset its Margin property in the same way

When you have finished all of these steps, the XAML should contain the

following source code:

<Grid.RowDefinitions>

Trang 14

of the Properties panel, you will see Row and Column properties Set their values

so that you have the following result:

<TextBlock Text="TextBlock" Grid.Row="1"/>

<TextBlock Text="TextBlock" Grid.Row="2"/>

<TextBox Text="TextBox" Grid.Column="1"/>

<TextBox Text="TextBox" Grid.Column="1" Grid.Row="1"/>

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

Trang 15

249

9 Go through each of the TextBlock controls to set the Text properties to First

Name, Last Name, and Age Next, set the Text property of the TextBox controls to

blank (or just reset the property) Then set the Orientation property for the

StackPanel to Horizontal Finally, set the Content property for the Button

controls to Save, Next, and Delete The final result should be the following:

<TextBlock Text="First Name"/>

<TextBlock Text="Last Name" Grid.Row="1"/>

<TextBlock Text="Age" Grid.Row="2"/>

<StackPanel Grid.Column="1" Grid.Row="3" Orientation="Horizontal">

10 Run the solution, and you will see the initial layout, which should look the

same as what you started with in the previous exercise (Figure 10-1) The next

thing to do is set the style properties for your controls

Highlight all three TextBlock controls In the Properties panel, set the following

Trang 16

<TextBlock Text="First Name" FontFamily="Verdana"

FontSize="16" FontWeight="Bold" Margin="5,5,5,5"/>

<TextBlock Text="Last Name" Grid.Row="1" FontFamily="Verdana"

<TextBlock Text="Age" Grid.Row="2" FontFamily="Verdana"

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

FontFamily="Verdana" FontSize="14" FontWeight="Bold"

Foreground="#FF0008FF" Background="#FFF9F57D"

VerticalAlignment="Top" Margin="5,5,5,5"/>

<Button Content="Save" Margin="5,5,5,5"

Trang 17

251

14 Your application will appear something like what is shown in Figure 10-12

When you run the application, it should look very similar to the application at

the end of the previous exercise (Figure 10-6)

Figure 10-12 Final Project in Expression Blend

Getting the code perfect is not the point of this exercise It’s OK if your application doesn’t look

exactly like my screenshot The main objective was to get you familiar with setting and resetting inline

properties in Expression Blend

In these two exercises, you saw how to change the appearance of your Silverlight applications using inline properties in Visual Studio 2008 and Expression Blend Although this method is very

straightforward, in a normal application with a lot of controls, setting all of the properties can become

tedious And if you need to change the appearance of some elements throughout the application, it will not be an easy task This is where Silverlight styles come in

Silverlight Styles

In the previous section, you saw how you can change the appearance of a Silverlight application by

setting inline properties This works perfectly fine, but it presents maintenance problems From a

maintenance perspective, it’s better to separate the style properties from the control definitions For

example, consider the following TextBlock definition:

Trang 18

This problem is certainly not new to Silverlight Developers and designers have faced this challenge for years with HTML-based pages HTML solves the problem with a technology known as Cascading Style Sheets (CSS) Instead of specifying the different attributes of HTML controls directly, developers can simply specify a style for the control that corresponds to a style in a style sheet The style sheet, not the HTML, defines all of the different appearance attributes for all controls This way, if developers want

to adjust an attribute of a control in an application, they can change it in the style sheet one time, and that change will be automatically reflected in every control in the application that references that style Silverlight offers a similar solution Silverlight allows you to create style resources, in much the same way you would define styles in a CSS style sheet In Silverlight, style resources are hierarchical, and can

be defined at either the page level or the application level If defined at the page level, the styles will be available only to controls on that page Styles defined at the application level can be utilized by controls

on all pages across the entire application The “Silverlight Style Hierarchy” section later in this chapter provides more information about the style hierarchy

A Silverlight style is defined using the <Style> element, which requires two attributes: the Key attribute represents the name of the style, and the TargetType attribute tells Silverlight which type of control gets the style Within the <Style> element, the style is made up of one or more <Setter>

elements, which define a Property attribute and a Value attribute As an example, the preceding

TextBlock control’s appearance properties could be defined in the following Silverlight style definition:

</Style>

In HTML, to reference a style from a control, you simply set the style attribute In Silverlight, this syntax looks a little different Silverlight styles are referenced in a control using an XAML markup extension You saw markup extensions in use in Chapter 5—when working with data binding in

Silverlight, you set a control’s property using the form {Binding, <path> To reference the sample FormLabel style from your TextBlock, the syntax would look as follows:

Let’s give styles a try, starting with defining styles at the page level

Tiêu đề	Styling in Silverlight
Trường học	University of Example
Chuyên ngành	Computer Science
Thể loại	Thesis
Năm xuất bản	2025
Thành phố	Example City

Định dạng
Số trang	31
Dung lượng	336,3 KB