Expression Blend The Objects and Timeline Panel

An overview of the Blend Objects and Timeline Panel by author Joel Cochran.

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


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.


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.

By Peter Bromberg   Popularity  (3054 Views)