 |
This article is taken from the book Expression Blend in Action., by Joel Cochran. It is being reproduced here by permission from Manning Publications. Manning Early Access Program (MEAP) books and ebooks are sold exclusively through
Manning. Visit the book's page for more information. Softbound print: Fall 2011
| 425 pages ISBN: 9781617290299
You can get an instant 40% discount on this MEAP edition by simply clicking on the book image to the left, and use promo code egghead40 |
The Objects and Timeline panel can be considered a developer's best friend because
it is an easy way to navigate the complex XAML hierarchy. In this article, based
on chapter 2 of Expression Blend in Action, author Joel Cochran explains how the Objects and Timeline panel's facets help you
navigate complex hierarchies much faster than in the XAML code.
Directly below the Projects panel is the Objects and Timeline panel. I often call
the Objects and Timeline panel (I'll shorten it to O&T) a developer's best friend because it is an easy way to navigate
the complex XAML hierarchy. While you can select elements directly on the Artboard,
it is frequently easier to do so in the O&T. It is also easier to view the structure and relationships of the elements than it is to read the XAML
itself.
NOTE: In this article, we are only addressing the Objects part the panel.
The O&T is a must have tool in your arsenal because it helps us to easily traverse
and manage the XAML hierarchy. In this section we will discuss some basic topics
like thinking hierarchically, the active container, and the selected element.
Then, we'l see how we can take advantage of the O&T to move and reorder elements,
toggle visibility, and lock elements to prevent accidental changes. Finally,
we'll use the O&T to jump to the selected line of XAML code.
Thinking hierarchically
The O&T is all about visualizing XAML. By its nature, XAML is a hierarchical
structure and the more complex an application's design becomes, the more complex the XAML. Elements are necessarily
nested inside other elements, thereby forming relationships to one another such
as ancestor, parent, child, and sibling.
It is often impossible to see these relationships just looking at the rendered elements
on the Artboard. While you can certainly read the XAML, all of the property settings
make it difficult and tedious to just see the outline of elements and their relationships.
The deeper elements are nested, the harder it becomes to visualize the overall
structure. The O&T allows you to quickly see just the outline of the hierarchy.
Active container
In XAML, all elements need to be children of other elements. Elements are basically
broken into two camps, Controls and Containers. Controls are action items, things like Buttons and TextBoxes. Containers, like Grids and StackPanels, are elements that hold collections of other elements. Containers can hold either
controls or other containers.
To add an element to a project, you can either double-click the tool in the toolbar
or select the appropriate tool and draw it on the Artboard. In either case, you
have to know which element will be the parent of the newly added element. This designation is Active Container.
You can make any container an Active Container by simply clicking it in the O&T.
An Active Container is adorned with a blue border, as seen in figure 1. In this
sample, the Active Container is not a Selected Element, which we'll
discuss in the next section. Any element added to the Artboard will automatically
become a child of the Active Container.
Figure 1 The grid element named ToolPanel has a blue border and is an Active Container.
Any elements added to the Artboard will automatically become children of this container.
There is one caveat you need to be aware of: if the added element is a container,
then it will automatically become the Active Container. This can lead to some
unexpected results if you aren't careful. If you want to add three StackPanel elements to a Grid element, you might just double-click the StackPanel tool three times. If you do that, however, you end up with the result shown in figure 2.
Figure 2 These nested StackPanels are the result of the Active Container automatically switching to newly added container
elements.
Each StackPanel subsequently becomes an Active Container, so each new StackPanel is added as a child to the previous StackPanel: this is not the desired result. To avoid this problem you would need to reselect
the correct parent container each time, which can be slow and tedious. Fortunately,
Blend allows you to pin the Active Container meaning that the selected container
will remain an Active Container no matter what elements you add.
To pin an Active Container, right-click on it. The context menu will have an option
about two-thirds of the way down the list that will allow you to toggle the Pin Active Container state on or
off. Figure 3 shows the context menu with the Pin Active Container option selected.
Figure 3 Using Pin Active Container to keep the selected container active no matter
what elements you add
When an Active Container is pinned, the border color will switch from blue to yellow.
The Active Container will remain pinned until you toggle this option off.
Selected element
The Selected Element is highlighted with a gray background. In figure 1, you can
see that the Active Container is ToolPanel, but the Selected Element is CardTextBox.
The Active Container and the Selected Element can also be the same element. In that case, the element will have both the blue border and the
gray background, as shown in figure 4.
Figure 4 The Grid element named ToolPanel is both an Active Container, denoted by
a blue border, and the Selected Element, which is indicated by a gray background.
The Selected Element is very important because that is the element you are actually
working on. This means that it should have the focus on the Artboard, and the
properties in the Properties panel will reflect just that element.
Moving and reordering elements
The O&T makes moving and reordering elements a simple task. Element order can
definitely matter depending on what type of container holds the elements. For
tasks like fixing our misplaced StackPanels from figure 2, a simple cut and paste works great: we would just cut the errant StackPanels
one at a time and paste them into the Grid container as originally desired. Order
doesn't matter to Grid, so this would work fine.
This can get a bit messy when order matters, so another option is to use Blend's
built-in drag-and-drop helpers. Inside the O&T, you can grab an element and
drag it to the desired target. Due to nesting, selecting just the right location
can sometimes be tricky, so Blend provides markers and tooltips letting you know
exactly where an element will be dropped. You can see this in figure 5.
Figure 5 Using Blend's drag-and-drop helpers to move this Button element to the right position in the StackPanel
In this example, I've grabbed the Button control and am moving it below the TextBlock control inside the same StackPanel. The ToolTip reads Copy but it will actually move the Button in this case. These helpers come in very handy when dealing with complex situations.
Toggling visibility
Sometimes elements on the Artboard are just in the way, visually speaking. You could
hide them in several way using properties like Opacity and Visibility, but you
don't really want to do that because those are runtime properties. Using the O&T you can hide elements at design time without affecting
their run time status.
There are two columns to the right of every element in the O&T. The first of
these is the Visibility column represented by Eye icons. Clicking on the eye
next to an element will hide it from view in Blend. Figure 6 shows a Button element that is hidden. If the element contains other elements they will also
be hidden.
Figure 6 The Button element above is hidden in Blend. Notice the Eye icon has been
replaced with a simple disc. Clicking the disc will unhide the element.
When an element is hidden, the eye icon is replaced with a disc. Clicking on the
disc will unhide the element. It is important to note that hidden elements can still be selected, altered, affected,
and even deleted.
WARNING: Hidden elements can still be selected and deleted. In order to prevent that,
be sure to lock them when you hide them.
Locking elements
Using the O&T you can also lock elements in order to prevent inadvertent changes.
If you've put a lot of work into a graphic or a gradient or some other feature,
it would be a shame for it to get deleted accidentally. Like Visibility, a locked element is only locked at design time: this setting has no effect on the
application at runtime.
The Lock feature is found in the column to the right of the Visibility feature and
is represented by a padlock icon. Clicking on the disc in the lock column next
to an element will prevent it from being selected. Locked elements cannot be
moved, edited, or deleted. Visibility and Locking can be used separately or together,
as demonstrated in figure 7.
Figure 7 The Button in this sample is both hidden and locked.
As with Visibility, this is a simple toggle, so clicking either the disc or the padlock
will toggle the locked state of an element. Just like visibility, if the locked element contains other elements they
will all be locked.
Jumping into the XAML
While I don't typically choose to edit XAML in Blend, there are times when I want
to see what's happening. Scrolling through a long XAML listing is just no fun, but selecting an element in
Blend when the XAML view is open will position the XAML at the correct element. To see this in action, open Split
View in the Artboard and select any element in the O&T. The XAML file should
automatically go to that element and highlight it in the XAML. You can see the effect in figure 8.
Figure 8 The Button is selected in the Objects and Timeline panel, which also selects
it on the Artboard and in the XAML file.
Summary
Learning to use the Objects and Timeline panel is a sure way to improve your experience
with Blend. With it you can navigate complex hierarchies much faster than in
the XAML code. You can also use it to select desired elements, move and reorder elements, and hide and lock elements on the Artboard.