📘 GridSplitter Element
🏘️ NoesisGUI ▸ 🏠 Noesis Studio ▸ 📘 GridSplitter Element
Overview
Introducing a GridSplitter Element to a 📘 Grid Element allows users to manipulate the dimensions of quadrants within a Grid's layout. In practice, this allows end-users to customize the dimensions of UI Elements within an interface, such as being able to adjust the width of a sidebar within a screen.
Usage Guide
| 🌟 Strengths: | • Allows users to manually customize the spatial footprint of Elements within a layout.
|
| 📝 Considerations: | • Only applicable to the 📘 Grid Element.
• Although a GridSplitter does have the ability to influence the size of its neighboring quadrants, it is however constrained to the Grid Row(s) and Column(s) it is assigned to within its 📘 Properties Panel.
• Each GridSplitter can only affect one axis (horizontal or vertical) at a time.
• To be able to function with a user's click-and-drag interactions, GridSplitters must be sized large enough to serve as an appropriately-sized hitbox.
|
| 📌 Typical Use Cases: | • Giving users control over the space allocated to various UI quadrants within a layout.
|
Setting Up A GridSplitter
A GridSplitter can be added to any 📘 Grid Element by clicking-and-dragging it from the 📘 Add Element Panel into a Grid on the 📘 Stage or in the 📘 Navigator Panel.
The GridSplitter can then be assigned to any quadrant using the techniques outlined in 📘 Assigning Elements To Grid Quadrants.
Configuring GridSplitter Behavior
When placed in a position within a Grid, the GridSplitter has the ability to not only influence the dimensions of its own quadrant, but is also able to affect the size of the quadrants directly neighboring it in the layout.
How the GridSplitter behaves, and its area-of-effect, can be customized via its unique Element Properties in its 📘 Properties Panel:
PreviewStyle
When the 📑 Shows Preview Property is set to 'On', allows for the GridSplitter Element to take on a different Style.
This Style displays when the GridSplitter is being clicked-and-dragged, and automatically ceases to display once the GridSplitter is released.
When this mode is active, The Grid layout doesn't change its layout until the GridSplitter is released.
KeyboardIncrement
In addition to click-and-dragging, GridSplitters also support user-driven quadrant resizing via the keyboard's ArrowKey (Up/Down/Left/Right), provided the Element has been first given Focus.
The KeyboardIncrement value corresponds to how many pixels a Row or Column is displaced by with each press of ArrowKey (Up/Down/Left/Right).
Resize Behavior
A GridSplitter's Resize Behavior determines which quadrants within a 📘 Grid Element are impacted by the GridSplitter.
Note
The following examples assume a layout FlowDirection of 'LeftToRight', and a GridSplitter Resize Direction Property of 'Auto'.
In the case of a 'RightToLeft' FlowDirection, the direction of the GridSplitter's Resize Behavior are inverted from the below.
In the case of a manually-set Resize Direction, the Resize Behavior only impacts which of the Grid's quadrants are affected by the GridSplitter, but not whether they move horizontally or vertically, as that is determined by the chosen Resize Direction instead.
| BasedOnAlignment | The GridSplitter's Horizontal Alignment and Vertical Alignment determine which neigboring quadrants are affected by the GridSplitter. For example:
• A GridSplitter with a Horizontal Alignment of 'Left', is able to resize its own quadrant, and the quadrant directly neigboring its left edge.
• A GridSplitter with a Horizontal Alignment of 'Center', and a Vertical Alignment of 'Stretch', is able to resize its own quadrant, and the quadrants directly neigboring its left and right edges.
|
| CurrentAndNext | The GridSplitter is able to resize its own quadrant, as well as the quadrant directly neighboring its bottom edge (if set to modify Rows), or bottom edge (if set to modify Columns).
|
| PreviousAndCurrent | The GridSplitter is able to resize its own quadrant, as well as the quadrant directly neigboring its top edge (if set to modify Rows), or left edge (if set to modify Columns).
|
| PreviousAndNext | The GridSplitter is able to resize the quadrant directly above and below it (if set to modify Rows), or the quadrants directly to its right and left (if set to modify Columns), but does not resize the quadrant it is assigned to.
|
Resize Direction
The Resize Direction sets whether the GridSplitter should inherit its behaviours from its Horizontal Alignment and Vertical Alignment Properties, or whether it should be set to expressly modify its affected Grid quadrants along the horizontal axis ('Columns'), or along the vertical axis ('Rows').
Drag Increment
When resizing a Grid quadrant by clicking-and-dragging a GridSplitter Element, the Drag Increment sets the distance in pixels at which 'snapping' occurs when resizing a Grid quadrant.
For example, a Drag Increment value of '100', will allow the quadrant to be displaced from its original position at intervals of 100px. In this scenario, a user could move a quadrant 100px, 200px, 300px, etc... away from its initial position within the Grid.
Shows Preview
The Shows Preview Property changes the behavior of the GridSplitter when clicked-and-dragged:
| Off | • The GridSplitter does not display a custom Style during click-and-drag.
• User-driven quadrant resizing is displayed in real-time during click-and-drag.
|
| On | • The GridSplitter displays a custom 'Preview' Style during click-and-drag. If no custom Style is created, a default semi-opaque overlay will display whilst clicking-and-dragging.
• User-driven quadrant resizing only takes effect once the GridSplitter is released from its click-and-drag.
|