Designer: Document Tree

The Document Tree panel contains the document tree that corresponds to the XAML document you are currently editing. The document tree is a hierarchal visual representation of all the elements in your workspace.

The purpose of the document tree is to:

Provide you with a visual reference of your document’s structure.
Indicate how a control relates to other controls and sibling controls.
Enables you to choose layers or controls within the document, in order to add to, edit, or delete these layers or controls.
Allows you to add and move controls between layers in a drag and drop fashion.

Locate Controls

The document tree displays a hierarchical view of the controls in the current document; that is, controls that are added to another control as child controls are indented below the parent. The document tree also displays the icon of each control in your document, and when you select a control in the Designer, it is highlighted in the document tree. When you select the control in the document tree, it is also selected in the Designer; that is, it is surrounded by resize handles and anchors.

Active Layer

The Designer works in layers, maintaining an active layer at all times. You can choose to edit, add, remove, and reposition controls on the active layer only. In the document tree, the active layer is indicated by the icon.

The following controls can be set as the active layer:

Canvas
Data Grid
Dock panel
Grid
Stack Panel
Uniform Grid
Viewport 3D

In addition to the controls above, any visible object derived from content control, such as a button, can also be set as the active layer.

The following cannot be set as the active layer:

Any object that cannot have child controls, such as an Image control.
Any class derived from Content Control that is collapsed, such as a Combo Box Item.
Any control whose visibility is hidden or collapsed.

Hide Layers

You can hide inactive layers by toggling the visibility of the control in the document tree or in the Designer. Hiding a layer simply modifies its visibility while you are editing the active layer.

Tip: Make sure the layer is visible again before publishing your project to the server.

You can also hide individual controls within the active layer. That is, the layer itself is visible, but the controls within it are not.

Organize Content with Drag and Drop

Within the document tree you can drag and drop one control onto another. This allows cross layer assignment of controls to new parents. It also allows some properties, such as tool tips and headers, to have framework elements applied as content. Controls can also be dragged from the toolbox and dropped onto new parent controls in the document tree.

Manipulate Controls in the Document Tree

The following table describes the actions you can perform on the controls in the document tree, including the layer object(s). These actions can all be performed from the right-click context menu, while some are also available from the toolbar.

Action	Description
Locate	Indicates the location of the selected control in the Designer with a flashing orange border.
Delete	Deletes the selected control from the designer and document tree. You cannot paste a deleted control back into the Designer. Use the Undo button on the toolbar to undo the delete action.
Cut	Cuts the selected control from the Designer and document tree. If required, you can then paste the control onto the current active layer or onto another layer after making it the active layer.
Copy	Copies the selected control. If required, you can then paste the control onto the current active layer or onto another layer after making it the active layer.
Paste	Pastes a cut or copied control onto the active layer.
Paste Special	Opens the Applying <control (control name)> to Target dialog box, where you can select the properties to apply to the control. The available options depend on the control you are working with.
Bring to Front	Brings the selected control to the top when two or more objects are stacked.
Move Forward	Moves the selected control forward by one increment when two or more controls are stacked. Note: If only two controls are stacked, this action behaves the same as Bring to Front.
Move Backward	Moves the selected control backward by one increment when two or more controls are stacked. Note: If only two controls are stacked, this action behaves the same as Send to Back.
Send to Back	Sends the selected control to the bottom when two or more controls are stacked.
Fit to Cell	Enlarges the selected control to fit into the entire cell.
Grid	Allows you to add rows and columns, remove additional rows and columns, and set column width and row height to the top-level grid control.
Visibility	Allows you to collapse or hide the selected control or layer. If a control is already hidden or collapsed, you can choose to make it visible. Note: Collapsing and hiding controls differ in that hiding the control reserves the space it occupies in the layout, whereas collapsing does not reserve the space. When the project is built, the space occupied by a hidden control is rendered as whitespace instead of the control. Since space is not reserved for a collapsed control, no whitespace is rendered when the project is built.
Rotate	Allows you to rotate the selected control by 90 degree increments, or to set a specific value using a slider.
Add Event Handler	Opens the Event Triggers dialog box where you can choose an event to add an event handler to. When you select the event, the MainForm.xaml.vb panel appears where you can insert the code for the action you want to have occur when the event is triggered.