Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 2: Blend for Visual Studio 2012 CHAPTER 1 19

You can click the plus signs on the right side of the panel to add a new style rule at that

location. The yellow line indicates where new styles will be created if a location is not speci-

fied. Style rules that are dimmed are defined but not used in the current document.

Live DOM panel

The Live DOM panel displays the structure of the current document as a hierarchical repre-

sentation, as shown in Figure 1-12. With the Live DOM panel, you can select elements and

adjust their style rules. The Live DOM view provides automatic updating as the state of the

app changes.

FIGURE 1-12 he Live DOM panel displaying a hierarchical representation of the current documentT

The Live DOM panel displays nodes by using their ID if an ID is assigned or by using the

tag name if no ID is assigned. You can control the visibility of any node by clicking the eye

icon on the right side of the panel. This can be helpful when you have layers of elements

stacked on top of each other.

As with Visual Studio, you can press F5 to run the application. Blend has many features that

you can learn about by using the built-in help.

Lesson summary

■■The interactive mode enables you to run the application to build to the desired state

and then pause the application and set the styles of the application based on the cur-

rent state.

■■The Assets panel contains a list of all available assets in the project.

■■The Projects panel contains a file and folder view of the projects in the current

solution.

■■The Style Rules panel contains a list of all style sheets attached to the current

document.