📘 Grid Element
🏘️ NoesisGUI ▸ 🏠 Noesis Studio ▸ 📘 Grid Element
Overview
The Grid Element is a powerful and versatile layout Element that can be divided up into an internal grid of Rows and Columns to which its children can be assigned.
Due to its ability to host an infinite amount of child Elements, The Grid Element is also often used to 'group' Elements together within a hierarchy.
Usage Guide
| 🌟 Strengths: | • Ability to contain unlimited children Elements.
• Ability to define Row-based and Column-based layouts.
• Ability to define Row and Column dimensions using 'Pixel', * 'Star' (Relative/Proportional), or 'Auto' (Adapts to dimensions of child Element).
• Ability to assign children Elements to Rows/Columns and Row/Column Spans.
|
| 📝 Considerations: | • Limited styling options if using as a background element or panel.
|
| 📌 Typical Use Cases: | • Layouting
• Usage as a generic container for multiple Elements, as an equivalent to a 'Group' found in many Design tools.
|
Grouping Elements Into a Grid
Elements can be instantly grouped into a new Grid by selecting one, or multiple Elements in 📘 Navigator Panel or on the 📘 Stage, and pressing Ctrl (Hold) + G .
Alternately, this can also be achieved by right-clicking on Elements and from the context menu, navigating to 'Layout', 'Group Into', then selecting 'Grid'.
Elements can be ungrouped by pressing Ctrl (Hold) + Shift (Hold) + G.
Alternately, ungrouping can also be performed by right-clicking on a Grid and from its context menu, navigating to 'Layout', then selecting 'Ungroup'.
Grid Layout Setup
Rows and Columns can be added to a Grid Element by selecting it in the 📘 Navigator Panel or on the 📘 Stage, hovering over its right and top edge adorners, and clicking to add Columns and Rows respectively.
Rows or Columns can be removed at any time by clicking on an existing Row or Column's unit of measurement, and selecting 'Delete Row' or 'Delete Column' respectively.
The height of each Row, and the width of each Column can be set by clicking-and-dragging the adorners separating each Row/Column, or by clicking on the value adorners, and inputting a value.
Row and Column Sizing
The space allocated to any Row or Column can be set via one of three units of measurement:
The * ('Star') Unit
The * ('Star') unit provides a proportional sizing solution in which each Row or Column is sized relative to other Rows or Columns along the same axis which are also sized in * ('Star') units.
Using this system, a Column set to 1* will be half the width of a Column set to 2*.
These internal proportions persist across various dimensions given to the Grid Element within a layout.
The Pixel Unit
The Pixel unit provides a sizing solution in which the dimensions of Rows/Columns are set in pixels.
Using this system, a Column set to measure 64px will always be 64px wide regardless of the overall dimensions of the Grid Element in a layout.
The 'Auto' Unit
The Auto unit provides a sizing solution in which the dimensions of a Row or Column will shrink or expand to the size of an Element within the Grid assigned to it.
Elements can be assigned to Rows or Columns using the techniques outlined in 📑 Assigning Elements To Grid Quadrants
Note
All three units of measurement can be mixed and matched within a single Grid layout.
Assigning Elements To Grid Quadrants
A Grid's Rows and Columns don't just serve as visual guides, but they also allow any any first-level child Elements of the Grid to be assigned to specific quadrants within it.
The placement of each child Element within the Grid's layout is controlled by two pairs of Properties:
Row
Column
|
Sets the starting position of the selected child Element within one of the Grid's quadrants.
The Row and Column Properties use zero-based numbering. Therefore the first Column of a Grid is defined as Column 0, and not Column 1.
|
Row Span
Column Span
|
Sets across how many Rows or Columns the selected Element spans.
Elements span starting from the quadrant the Element is positioned in via the Row or Column Properties.
In a layout with a FlowDirection Property of 'LeftToRight', child Elements span from the left to the right, whilst Elements in a layout set to 'RightToLeft', will start from the right, and span leftward.
|
