Lays out children in a grid formation.
RowCount and ColumnCount properties
<Grid RowCount="4" ColumnCount="2"/>
By default, elements in the grid are placed in the order they appear in UX, from left to right,
top to bottom. However, you can explicitly specify per element which grid cell they should be placed
in using the
<Grid RowCount="1" ColumnCount="2"> <Rectangle Row="0" Column="1" Color="Red"/> <Rectangle Row="0" Column="0" Color="Blue"/> </Grid>
If you want an element to occupy multiple rows or columns,
you can use the
<Grid RowCount="2" ColumnCount="2"> <Rectangle ColumnSpan="2" RowSpan="2" Color="Red"/> </Grid>
Rows and Columns properties
More fine grained control of how the rows and column sizes are calculated can be achieved with the Rows and Columns properties. These properties accept a comma separated list of grid sizes which can take on a few different forms. The values can either be absolute, relative or automatic.
Example of a Grid with 3 rows of size 10, 10 and 50 points, and 3 columns, the first each occupy 20% of the available space and the last one occupies 60%.
<Grid Rows="10,10,50" Columns="1*,1*,3*"/>
The proportional column sizes here are calculated by first summing all the values (1+1+3 = 5). Then we divide our value by the total (1/5 = 20%, 1/5 = 20%, 3/5 = 60%).
Note that proportional sizes only make sense if the grid is expanding to fill the parent panel, or has a fixed size. If it is shrinking to fit it's contents the proportional rows/columns will have zero size.
The following Grid has 2 rows where the first row gets the height of the tallest element in that row, and the second row takes up any remaining space:
<Grid Rows="auto,1*" />
- Fuse.Controls.Panels 1.6.0-rc1
Interface of Grid
CellSpacing : float ux
The spacing between cells, in points.
ChildOrder : GridChildOrder ux
Whether the children are ordered in rows or columns for automatic cell placement.
ColumnCount : int ux
ColumnData : string ux
The alignment of content within the cells.
DefaultColumn : string ux
DefaultRow : string ux
GetColumn(Element) : int uno
GetColumnSpan(Element) : int uno
GetRow(Element) : int uno
GetRowSpan(Element) : int uno
Grid Constructor uno
The index of the column the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
The number of columns this element occupies in a Grid. Defaults to 1.
The index of the row the element occupies while in a Grid. If not set, the grid will place the element in a cell according to its position in the child list.
The number of rows this element occupies in a Grid. Defaults to 1.
Inherited from Panel
Inherited from LayoutControl
Inherited from Control
Appearance : object uno
Background : Brush ux
CreateNativeView : IView uno
GraphicsVisual : Visual uno
NativeView : IView uno
Inherited from Element
ActualAnchor : float2 uno
ActualPosition : float2 uno
ActualSize : float2 uno
The Alignment of the
Determines how the aspect ratio is maintained in a situation when it violates the min or max sizing constraints.
BoxSizing : BoxSizingMode ux
The manner in which the size and position of the element is calculated.
CachingMode : CachingMode ux
CalcRenderBounds : VisualBounds uno
ClipToBounds : bool ux
Clips the child elements to the bounds of this element visually.
HitTestMode : HitTestMode ux
Specifies how hit tests should be performed on this element.
IsPointInside(float2) : bool uno
LimitHeight : Size ux
The height limit for an element using
LimitWidth : Size ux
The width limit for an element using
TreeRenderer : ITreeRenderer uno
Visibility : Visibility ux
The Visibility of the
Inherited from Visual
AbsoluteViewportOrigin : float2 uno
AbsoluteZoom : float uno
Begins removing a given node, playing all RemovedAnimations before actual removal.
Begins removing a given visual, playing all RemovedAnimations before actual removal.
Requests that this visual be brought into the visible are of the screen. Typically a containing
ScrollView will scroll to ensure it is visible.
Brings the given child to the front of the Z-order. In UX markup, use the BringToFront trigger action instead.
ChildCount : int uno
The number of child nodes of this visual.
Children : IList of Node ux
The children of the visual. All nodes placed inside the visual in UX markup are assigned to this list. The order of Visuals this list determines the order of layout. The Z-order of the children is by default equal to this order, but can be manipulated separately using methods like BringToFront and SendToBack.
FindTemplate(string) : Template uno
FindViewport : IViewport uno
FirstChild<T> : T uno
FirstVisualChild : Visual uno
GetVisualChild(int) : Visual uno
GetZOrderChild(int) : Visual uno
HasChildren : bool uno
HasPendingRemove : bool uno
HasVisualChildren : bool uno
Whether this visual has any visual child nodes.
HitTestBounds : VisualBounds uno
IfSnap(float2) : float2 uno
IfSnapDown(float2) : float2 uno
IfSnapUp(float2) : float2 uno
Indicates the visual for this node has changed. This allows the root-level node to know that it must draw, and any caching that it must invalidate the cache for this node.
Indicates the composition of the visual has changed, but that the visual drawing itself is still valid (for example a position change).
IsContextEnabled : bool uno
Whether this node is in an enabled context.
The context is disabled if one of the ancestor nodes have IsEnabled set to
IsInteracting : bool uno
IsLocalVisible : bool uno
Returns whether this visual is visible without concern for whether an ancestor visual is hidden or collapsed.
Returns whether this visual is currently visible. Will return false if any of the ancestor visuals are hidden or collapsed. This property can not be used to check whether a visual is hidden because it is occluded by another visual, or is outside the view but otherwise visible.
LastChild<T> : T uno
LastVisualChild : Visual uno
The layer this visual belongs to in the Parent container.
LayoutRole : LayoutRole ux
Describes how this visual participates in layout.
LocalBounds : Box uno
LocalToParent(float2) : float2 uno
Converts a coordinate from the local space into the parent space.
LocalTransform : float4x4 uno
OnInvalidateRenderBounds : bool uno
Remove(Node) : bool uno
The list of resources defined at this node.
Sends the given child to the back of the Z-order. In UX markup, use the SendToBack trigger action instead.
Snap(float2) : float2 uno
SnapDown(float2) : float2 uno
SnapToPixels : bool ux
Whether to snap the result of layout of this visual to physical device pixels.
SnapUp(float2) : float2 uno
Converts a coordinate from the parent space into the local space.
ValidFrameCount : int uno
ViewHandle : ViewHandle uno
VisualChildCount : int uno
The number of child visuals of this visual.
VisualContext : VisualContext uno
WindowToLocal(float2) : float2 uno
WorldPosition : float3 uno
WorldTransform : float4x4 uno
ZOrderChildCount : int uno
Inherited from Node
Bindings : IList of Binding ux
The list of bindings belonging to this node.
ContextParent : Node uno
The context parent is the semantic parent of this node. It is where non-UI structure should be resolved, like looking for the DataContext, a Navigation, or other semantic item.
FindByType<T> : T uno
Finds the first node with a given name that satisfies the given acceptor. The serach algorithm works as follows: Nodes in the subtree are matched first, then it matches the nodes in the subtrees ofthe ancestor nodes by turn all the way to the root. If no matching node is found, the function returns null.
GetFirstData : object uno
GetNearestAncestorOfType<T> : T uno
IsRootingCompleted : bool uno
Whether rooting for this node is completed. Returns false if unrooting has started.
IsRootingStarted : bool uno
Whether rooting of this node has started. Note that even if this property returns true, rooting may not yet be completed for the node. See also IsRootingCompleted.
Run-time name of the node. This property is automatically set using the ux:Name attribute.
NextSibling<T> : T uno
Returns the next sibling node of the given type.
If you override
OnRooted you must call
base.OnRooted() first in your derived class. No other processing should happen first, otherwise you might end up in an undefined state.
The parent Visual of this node. Will return null if the node is not rooted.
PreviousSibling<T> : T uno
Returns the next sibling node of the given type.
Properties : Properties uno
A linked list holding data for extrinsic properties.
Remove(Binding) : bool uno
SubtreeToString : string uno
Inherited from PropertyObject
Inherited from object
Equals(object) : bool uno
GetHashCode : int uno
Attached UX Attributes
ColorScheme (attached by Resources) : ColorScheme ux
Specifies how an element is docked while inside a DockPanel
Shorthand for setting the
MatchKey property on the implicit
Each created when using the
Items attached property.
Edge (attached by EdgeNavigation) : NavigationEdge ux
LayoutMaster (attached by LayoutControl) : Element ux
Gained (attached by AttachedFocusMembers) : FocusGainedHandler (object, FocusGainedArgs) ux
Called when a Visual receives input focus.
IsFocusable (attached by Focus) : bool ux
Lost (attached by AttachedFocusMembers) : FocusLostHandler (object, FocusLostArgs) ux
Called when a Visual loses input focus.
Clicked (attached by Clicked) : ClickedHandler (object, ClickedArgs) ux
Tapped (attached by Tapped) : TappedHandler (object, TappedArgs) ux
KeyPressed (attached by AttachedKeyboardMembers) : KeyPressedHandler (object, KeyPressedArgs) ux
Called when a Visual receives a key press event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
KeyReleased (attached by AttachedKeyboardMembers) : KeyReleasedHandler (object, KeyReleasedArgs) ux
Called when a Visual receives a key release event while having input focus. On mobile devices, keyboard input only applies to physical buttons (such as BackButton), not soft keyboards.
FillPadding (attached by Layout) : bool ux
LayoutMasterMode (attached by LayoutMasterAttr) : LayoutMasterMode ux
Determines how the layout of the master element is used to control the size of this one.
Activated (attached by Activated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Activated
Deactivated (attached by Deactivated) : PulseHandler (object, EventArgs) ux
Adds a handler for when the page is Deactivated
Navigation (attached by Navigation) : IBaseNavigation ux
Page (attached by NavigationPageProperty) : Visual ux
Transition (attached by NavigationControl) : NavigationControlTransition ux
Remove (attached by Navigator) : RemoveType ux
SwipeBack (attached by Navigator) : NavigatorSwipeDirection ux
IsPhysicsWorld (attached by World) : bool ux
Entered (attached by AttachedPointerMembers) : PointerEnteredHandler (object, PointerEnteredArgs) ux
Called when a pointer enters a visual.
Left (attached by AttachedPointerMembers) : PointerLeftHandler (object, PointerLeftArgs) ux
Called when a pointer leaves a visual.
Moved (attached by AttachedPointerMembers) : PointerMovedHandler (object, PointerMovedArgs) ux
Called when a pointer is moved on a visual.
Pressed (attached by AttachedPointerMembers) : PointerPressedHandler (object, PointerPressedArgs) ux
Called when a pointer is pressed on the visual.
Released (attached by AttachedPointerMembers) : PointerReleasedHandler (object, PointerReleasedArgs) ux
Called when a pointer is released on a visual.
WheelMoved (attached by AttachedPointerMembers) : PointerWheelMovedHandler (object, PointerWheelMovedArgs) ux
Called when a pointer wheel is moved on a visual.
Interface for objects that can have a script engine representation