NoesisGUI
Documentation Index
 

📘 Add Element Panel

🏘️ NoesisGUI ▸ 🏠 Noesis Studio ▸ 📘 Add Element Panel

Overview

Documentation_Panel_Function_AddElement_AppWindow.png

The Add Element Panel contains all of Noesis Studio's built-in Elements. Elements are prefabricated widgets that come packed with functionality which can be easily leveraged to avoid having to create the most common interface controls and systems from scratch.

Any custom Extension Elements created will also appear in this panel.

In Noesis Studio, a majority of these Elements can be completely customized in function and style. These customizations can be saved, and easily re-applied to other instances of the same element type. This can either by done by creating an Element Template (custom physical structure of an element), or an Element Style (custom collection of properties applied to an element).

During the process of selecting a prefabricated Element as a base for creating custom interface elements, it is helpful to think in terms of functional needs over the particular visual appearance of the Element as it comes out of the box. For example, whilst it may be tempting to use a Button element as an On/Off switch, a ToggleButton element would typically be a better choice, as it already contains internal mechanics to handle a built-in Checked/Unchecked state, which the Button element does not contain.

Searching and Filtering Elements

Specific Elements can be searched for, and filtered by name via the 'Search elements' field. To turn filtering off, clear the 'Search elements' field.

Adding Elements

Elements can be added to a Page in one of multiple ways, however, please note that a XAML page must first be open in the application to be able to access the contents of the Add Element panel.

Some Element types, such as the Border element, are only able to receive one child Element at a time. As such, it may not be immediately possible to add an element to the desired destination. In these cases, it can be useful to place an Element type that supports multiple children (such as a Grid), directly within the Element type that only supports a single child.

Drag-and-Drop to Navigator

Click-and-drag any element from the Add Element panel directly to a layer in the Navigator.

The destination layer will receive a blue outline as a visual indicator of placement, and a white horizontal line will display to illustrate where in the layer hierarchy the new element will be placed.

Drag-and-Drop to Stage

Click-and-drag any element from the Add Element panel directly to the Stage.

The element will be placed within a pre-existing destination layer already on the Stage.

A blue border will appear around the destination layer as a visual indication of where the new element will be placed within the layout and hierarchy.

Click-and-Draw on Stage

Any Element can be selected from the Add Element panel by clicking it, then with the Element selected, it can be 'drawn' on the Stage by clicking-and-dragging.

Similarly to the 'Drag-and-Drop to Stage' method, a blue border will appear around the destination on the stage in which the new element will be placed in the layout and hierarchy.

Group Into / Change Layout Type

Documentation_Panel_Function_AddElement_ContextMenus.png

Some elements can be grouped into another Element, or converted into a different Element type, directly from the Navigator or from the Stage.

This can be performed by right-clicking on any Element in either the Navigator or on the Stage, then within the context menu, navigating to the 'Format' submenu, and either selecting 'Group into' or 'Change Layout Type', followed by selecting the new desired layout element type, which will apply the change to the element.

Note

This method can only be used with select layout Elements.

Element Types

Discover the 📘 Interface Elements of Noesis Studio.

 
© 2017 Noesis Technologies