Grid Class
Definition
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
A layout that arranges views in rows and columns.
public ref class Grid : Microsoft::Maui::Controls::Layout, Microsoft::Maui::IGridLayout, System::Collections::Generic::ICollection<Microsoft::Maui::IView ^>, System::Collections::Generic::IEnumerable<Microsoft::Maui::IView ^>, System::Collections::Generic::IList<Microsoft::Maui::IView ^>
[Microsoft.Maui.Controls.ContentProperty("Children")]
public class Grid : Microsoft.Maui.Controls.Layout, Microsoft.Maui.IGridLayout, System.Collections.Generic.ICollection<Microsoft.Maui.IView>, System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>, System.Collections.Generic.IList<Microsoft.Maui.IView>
[<Microsoft.Maui.Controls.ContentProperty("Children")>]
type Grid = class
inherit Layout
interface IGridLayout
interface ILayout
interface IView
interface IElement
interface ITransform
interface IContainer
interface IList<IView>
interface ICollection<IView>
interface seq<IView>
interface IEnumerable
interface ISafeAreaView
interface IPadding
Public Class Grid
Inherits Layout
Implements ICollection(Of IView), IEnumerable(Of IView), IGridLayout, IList(Of IView)
- Inheritance
- Derived
- Attributes
- Implements
Remarks
The following example shows a basic use:
using System;
using Microsoft.Maui.Controls;
namespace FormsGallery
{
class GridDemoPage : ContentPage
{
public GridDemoPage()
{
Grid grid = new Grid
{
VerticalOptions = LayoutOptions.FillAndExpand,
RowDefinitions =
{
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = GridLength.Auto },
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) },
new RowDefinition { Height = new GridLength(100, GridUnitType.Absolute) }
},
ColumnDefinitions =
{
new ColumnDefinition { Width = GridLength.Auto },
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition { Width = new GridLength(100, GridUnitType.Absolute) }
}
};
grid.Children.Add(new Label
{
Text = "Grid",
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
HorizontalOptions = LayoutOptions.Center
}, 0, 3, 0, 1);
grid.Children.Add(new Label
{
Text = "Autosized cell",
TextColor = Color.White,
BackgroundColor = Color.Blue
}, 0, 1);
grid.Children.Add(new BoxView
{
Color = Color.Silver,
HeightRequest = 0
}, 1, 1);
grid.Children.Add(new BoxView
{
Color = Color.Teal
}, 0, 2);
grid.Children.Add(new Label
{
Text = "Leftover space",
TextColor = Color.Purple,
BackgroundColor = Color.Aqua,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center,
}, 1, 2);
grid.Children.Add(new Label
{
Text = "Span two rows (or more if you want)",
TextColor = Color.Yellow,
BackgroundColor = Color.Navy,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 2, 3, 1, 3);
grid.Children.Add(new Label
{
Text = "Span 2 columns",
TextColor = Color.Blue,
BackgroundColor = Color.Yellow,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 0, 2, 3, 4);
grid.Children.Add(new Label
{
Text = "Fixed 100x100",
TextColor = Color.Aqua,
BackgroundColor = Color.Red,
HorizontalTextAlignment = TextAlignment.Center,
VerticalTextAlignment = TextAlignment.Center
}, 2, 3);
// Accomodate iPhone status bar.
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
// Build the page.
this.Content = grid;
}
}
}
The following shows Grids on the various platforms:
It is convenient for the Grid layout class to store row and column indices of each of its child elements. Additionally, when a View element is laid out with a grid, application developers can access and change the child's position and span from the child itself by using the GetRow(BindableObject), SetRow(BindableObject, Int32), GetRowSpan(BindableObject), SetRowSpan(BindableObject, Int32) static methods, and the equivalent static methods for columns and column spans.
The documentation for the following Grid member methods contains XAML syntax examples:
- SetRow(BindableObject, Int32)
- SetRowSpan(BindableObject, Int32)
- SetColumn(BindableObject, Int32)
- SetColumnSpan(BindableObject, Int32)
Constructors
Grid() |
Fields
_layoutManager | (Inherited from Layout) |
ColumnDefinitionsProperty |
Implements the ColumnDefinitions property, and allows the Grid class to bind it to properties on other objects at run time. |
ColumnProperty |
Implements the attached property that represents the zero-based column index of a child element. See Remarks. |
ColumnSpacingProperty |
Implements the ColumnSpacing property, and allows the Grid class to bind it to properties on other objects at run time. |
ColumnSpanProperty |
Implements the attached property that represents the number of columns that a child element spans. See Remarks. |
propertyMapper | (Inherited from View) |
RowDefinitionsProperty |
Implements the RowDefinitions property, and allows the Grid class to bind it to properties on other objects at run time. |
RowProperty |
Implements the attached property that represents the zero-based row index of a child element. See Remarks. |
RowSpacingProperty |
Implements the RowSpacing property, and allows the Grid class to bind it to properties on other objects at run time. |
RowSpanProperty |
Implements the attached property that represents the number of rows that a child element spans, and allows the Grid class to bind it to properties on other objects at run time. |
Properties
AnchorX |
Gets or sets the X component of the center point for any transform, relative to the bounds of the element. This is a bindable property. (Inherited from VisualElement) |
AnchorY |
Gets or sets the Y component of the center point for any transform, relative to the bounds of the element. This is a bindable property. (Inherited from VisualElement) |
AutomationId |
Gets or sets a value that allows the automation framework to find and interact with this element. (Inherited from Element) |
Background | (Inherited from VisualElement) |
BackgroundColor |
Gets or sets the color which will fill the background of a VisualElement. This is a bindable property. (Inherited from VisualElement) |
Batched |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from VisualElement) |
Behaviors |
Gets the list of Behaviors associated to this element. This is a bindable property. (Inherited from VisualElement) |
BindingContext |
Gets or sets object that contains the properties that will be targeted by the bound properties that belong to this BindableObject. (Inherited from BindableObject) |
Bounds |
Gets the bounds of the element. (Inherited from VisualElement) |
CascadeInputTransparent | (Inherited from Layout) |
Children |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Layout) |
class | (Inherited from NavigableElement) |
ClassId |
Gets or sets a value used to identify a collection of semantically similar elements. (Inherited from Element) |
Clip | (Inherited from VisualElement) |
ColumnDefinitions |
Provides the interface for the bound property that gets or sets the ordered collection of ColumnDefinition objects that control the layout of columns in the Grid. |
ColumnSpacing |
Provides the interface for the bound property that gets or sets the distance between columns in the Grid. |
Count | (Inherited from Layout) |
DesiredSize | (Inherited from VisualElement) |
DisableLayout |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from VisualElement) |
Dispatcher | (Inherited from BindableObject) |
EffectControlProvider |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
Effects |
A list of the effects that are applied to this item. (Inherited from Element) |
FlowDirection |
Gets or sets the layout flow direction. (Inherited from VisualElement) |
Frame | (Inherited from VisualElement) |
GestureController | (Inherited from View) |
GestureRecognizers |
The collection of gesture recognizers associated with this view. (Inherited from View) |
Handler | (Inherited from VisualElement) |
Height |
Gets the current rendered height of this element. This is a read-only bindable property. (Inherited from VisualElement) |
HeightRequest |
Gets or sets the desired height override of this element. (Inherited from VisualElement) |
HorizontalOptions |
Gets or sets the LayoutOptions that define how the element gets laid in a layout cycle. This is a bindable property. (Inherited from View) |
Id |
Gets a value that can be used to uniquely identify an element through the run of an application. (Inherited from Element) |
IgnoreSafeArea | (Inherited from Layout) |
InputTransparent |
Gets or sets a value indicating whether this element should be involved in the user interaction cycle. This is a bindable property. (Inherited from VisualElement) |
IsClippedToBounds |
Gets or sets a value which determines if the Layout should clip its children to its bounds. (Inherited from Layout) |
IsEnabled |
Gets or sets a value indicating whether this element is enabled in the user interface. This is a bindable property. (Inherited from VisualElement) |
IsFocused |
Gets a value indicating whether this element is focused currently. This is a bindable property. (Inherited from VisualElement) |
IsInPlatformLayout | (Inherited from VisualElement) |
IsLoaded |
Indicates if a VisualElement is connected to the main object tree. (Inherited from VisualElement) |
IsPlatformEnabled |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from VisualElement) |
IsPlatformStateConsistent | (Inherited from VisualElement) |
IsReadOnly | (Inherited from Layout) |
IsVisible |
Gets or sets a value that determines whether this elements should be part of the visual tree or not. This is a bindable property. (Inherited from VisualElement) |
Item[Int32] | (Inherited from Layout) |
LogicalChildren |
Obsolete.
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
Margin |
Gets or sets the margin for the view. (Inherited from View) |
MaximumHeightRequest | (Inherited from VisualElement) |
MaximumWidthRequest | (Inherited from VisualElement) |
MinimumHeightRequest |
Gets or sets a value which overrides the minimum height the element will request during layout. (Inherited from VisualElement) |
MinimumWidthRequest |
Gets or sets a value which overrides the minimum width the element will request during layout. (Inherited from VisualElement) |
Navigation | (Inherited from NavigableElement) |
NavigationProxy | (Inherited from NavigableElement) |
Opacity |
Gets or sets the opacity value applied to the element when it is rendered. This is a bindable property. (Inherited from VisualElement) |
Padding |
Gets or sets the inner padding of the Layout. (Inherited from Layout) |
Parent |
Gets or sets the parent element of the element. (Inherited from Element) |
RealParent |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
Resources |
Gets or sets the local resource dictionary. (Inherited from VisualElement) |
Rotation |
Gets or sets the rotation (in degrees) about the Z-axis (affine rotation) when the element is rendered. (Inherited from VisualElement) |
RotationX |
Gets or sets the rotation (in degrees) about the X-axis (perspective rotation) when the element is rendered. (Inherited from VisualElement) |
RotationY |
Gets or sets the rotation (in degrees) about the Y-axis (perspective rotation) when the element is rendered. (Inherited from VisualElement) |
RowDefinitions |
Provides the interface for the bound property that gets or sets the collection of RowDefinition objects that control the heights of each row. |
RowSpacing |
Gets or sets the amount of space left between rows in the Grid. This is a bindable property. |
Scale |
Gets or sets the scale factor applied to the element. (Inherited from VisualElement) |
ScaleX |
Gets or sets a scale value to apply to the X direction. (Inherited from VisualElement) |
ScaleY |
Gets or sets a scale value to apply to the Y direction. (Inherited from VisualElement) |
Shadow | (Inherited from VisualElement) |
Style | (Inherited from NavigableElement) |
StyleClass | (Inherited from NavigableElement) |
StyleId |
Gets or sets a user defined value to uniquely identify the element. (Inherited from Element) |
TranslationX |
Gets or sets the X translation delta of the element. (Inherited from VisualElement) |
TranslationY |
Gets or sets the Y translation delta of the element. (Inherited from VisualElement) |
Triggers |
Gets the list of Trigger associated to this element. This is a bindable property. (Inherited from VisualElement) |
VerticalOptions |
Gets or sets the LayoutOptions that define how the element gets laid in a layout cycle. This is a bindable property. (Inherited from View) |
Visual | (Inherited from VisualElement) |
Width |
Gets the current rendered width of this element. This is a read-only bindable property. (Inherited from VisualElement) |
WidthRequest |
Gets or sets the desired width override of this element. (Inherited from VisualElement) |
Window | (Inherited from VisualElement) |
X |
Gets the current X position of this element. This is a read-only bindable property. (Inherited from VisualElement) |
Y |
Gets the current Y position of this element. This is a read-only bindable property. (Inherited from VisualElement) |
ZIndex | (Inherited from VisualElement) |
Methods
Add(IView) | (Inherited from Layout) |
AddColumnDefinition(ColumnDefinition) | |
AddRowDefinition(RowDefinition) | |
ApplyBindings() | (Inherited from BindableObject) |
Arrange(Rect) | (Inherited from VisualElement) |
ArrangeOverride(Rect) | (Inherited from VisualElement) |
BatchBegin() |
Signals the start of a batch of changes to the elements properties. (Inherited from VisualElement) |
BatchCommit() |
Signals the end of a batch of commands to the element and that those commands should now be committed. (Inherited from VisualElement) |
ChangeVisualState() | (Inherited from VisualElement) |
Clear() | (Inherited from Layout) |
ClearValue(BindableProperty) |
Clears any value set by SetValue for |
ClearValue(BindablePropertyKey) |
Clears any value set by SetValue for the property that is identified by |
CoerceValue(BindableProperty) | (Inherited from BindableObject) |
CoerceValue(BindablePropertyKey) | (Inherited from BindableObject) |
Contains(IView) | (Inherited from Layout) |
CopyTo(IView[], Int32) | (Inherited from Layout) |
CreateLayoutManager() | |
CrossPlatformArrange(Rect) | (Inherited from Layout) |
CrossPlatformMeasure(Double, Double) | (Inherited from Layout) |
EffectIsAttached(String) |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
FindByName(String) |
Returns the element that has the specified name. (Inherited from Element) |
Focus() |
Attemps to set focus to this element. (Inherited from VisualElement) |
GetChildElements(Point) |
Returns the child elements that are visually beneath the specified |
GetColumn(BindableObject) |
Gets the column of the |
GetColumn(IView) | |
GetColumnSpan(BindableObject) |
Gets the column span of the |
GetColumnSpan(IView) | |
GetEnumerator() | (Inherited from Layout) |
GetRendererOverrides<T>() | (Inherited from View) |
GetRow(BindableObject) |
Gets the row of the |
GetRow(IView) | |
GetRowSpan(BindableObject) |
Gets the row span of the |
GetRowSpan(IView) | |
GetValue(BindableProperty) |
Returns the value that is contained in the BindableProperty. (Inherited from BindableObject) |
IndexOf(IView) | (Inherited from Layout) |
Insert(Int32, IView) | (Inherited from Layout) |
InvalidateMeasure() | |
InvalidateMeasureNonVirtual(InvalidationTrigger) |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from VisualElement) |
InvalidateMeasureOverride() | (Inherited from Layout) |
IsSet(BindableProperty) |
Returns |
Layout(Rect) |
Updates the bounds of the element during the layout cycle. (Inherited from VisualElement) |
Measure(Double, Double, MeasureFlags) | (Inherited from Layout) |
MeasureOverride(Double, Double) | (Inherited from VisualElement) |
OnAdd(Int32, IView) | |
OnBindingContextChanged() | |
OnChildAdded(Element) | (Inherited from VisualElement) |
OnChildRemoved(Element, Int32) | (Inherited from VisualElement) |
OnChildrenReordered() | (Inherited from VisualElement) |
OnClear() | |
OnHandlerChanged() | (Inherited from Element) |
OnHandlerChanging(HandlerChangingEventArgs) | (Inherited from Element) |
OnInsert(Int32, IView) | |
OnMeasure(Double, Double) | (Inherited from VisualElement) |
OnParentChanged() | (Inherited from Element) |
OnParentChanging(ParentChangingEventArgs) | (Inherited from Element) |
OnParentSet() | (Inherited from NavigableElement) |
OnPropertyChanged(String) | (Inherited from Element) |
OnPropertyChanging(String) | (Inherited from BindableObject) |
OnRemove(Int32, IView) | |
OnSizeAllocated(Double, Double) | (Inherited from VisualElement) |
OnUpdate(Int32, IView, IView) | |
PlatformSizeChanged() | (Inherited from VisualElement) |
Remove(IView) | (Inherited from Layout) |
RemoveAt(Int32) | (Inherited from Layout) |
RemoveBinding(BindableProperty) |
Removes a previously set binding. (Inherited from BindableObject) |
RemoveDynamicResource(BindableProperty) |
Removes a previously set dynamic resource (Inherited from Element) |
SetBinding(BindableProperty, BindingBase) |
Assigns a binding to a property. (Inherited from BindableObject) |
SetColumn(BindableObject, Int32) |
Changes the column in which a child element will be placed. |
SetColumn(IView, Int32) | |
SetColumnSpan(BindableObject, Int32) |
Changes the column span of the specified child element. |
SetColumnSpan(IView, Int32) | |
SetDynamicResource(BindableProperty, String) |
Sets the BindableProperty property of this element to be updated via the DynamicResource with the provided key. (Inherited from Element) |
SetRow(BindableObject, Int32) |
Changes the row in which a child element will be placed. |
SetRow(IView, Int32) | |
SetRowSpan(BindableObject, Int32) |
Changes the row span of the specified child element. |
SetRowSpan(IView, Int32) | |
SetValue(BindableProperty, Object) |
Sets the value of the specified property. (Inherited from BindableObject) |
SetValue(BindablePropertyKey, Object) |
Sets the value of the propertyKey. (Inherited from BindableObject) |
SetValueCore(BindableProperty, Object, SetValueFlags) |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from BindableObject) |
SetValueFromRenderer(BindableProperty, Object) |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
SetValueFromRenderer(BindablePropertyKey, Object) |
For internal use by the Microsoft.Maui.Controls platform. (Inherited from Element) |
SizeAllocated(Double, Double) | (Inherited from VisualElement) |
UnapplyBindings() | (Inherited from BindableObject) |
Unfocus() |
Unsets focus to this element. (Inherited from VisualElement) |
Events
BatchCommitted | (Inherited from VisualElement) |
BindingContextChanged | (Inherited from BindableObject) |
ChildAdded | (Inherited from Element) |
ChildRemoved | (Inherited from Element) |
ChildrenReordered | (Inherited from VisualElement) |
DescendantAdded | (Inherited from Element) |
DescendantRemoved | (Inherited from Element) |
FocusChangeRequested | (Inherited from VisualElement) |
Focused | (Inherited from VisualElement) |
HandlerChanged | (Inherited from Element) |
HandlerChanging | (Inherited from Element) |
Loaded |
Occurs when a VisualElement has been constructed and added to the object tree. This event may occur before the VisualElement has been measured so should not be relied on for size information. (Inherited from VisualElement) |
MeasureInvalidated | (Inherited from VisualElement) |
ParentChanged | (Inherited from Element) |
ParentChanging | (Inherited from Element) |
PropertyChanged | (Inherited from BindableObject) |
PropertyChanging | (Inherited from BindableObject) |
SizeChanged | (Inherited from VisualElement) |
Unfocused | (Inherited from VisualElement) |
Unloaded |
Occurs when this VisualElement is no longer connected to the main object tree. (Inherited from VisualElement) |
Explicit Interface Implementations
Extension Methods
AbortAnimation(IAnimatable, String) |
Stops the animation. |
Animate(IAnimatable, String, Animation, UInt32, UInt32, Easing, Action<Double,Boolean>, Func<Boolean>) |
Sets the specified parameters and starts the animation. |
Animate(IAnimatable, String, Action<Double>, Double, Double, UInt32, UInt32, Easing, Action<Double,Boolean>, Func<Boolean>) |
Sets the specified parameters and starts the animation. |
Animate(IAnimatable, String, Action<Double>, UInt32, UInt32, Easing, Action<Double,Boolean>, Func<Boolean>) |
Sets the specified parameters and starts the animation. |
Animate<T>(IAnimatable, String, Func<Double,T>, Action<T>, UInt32, UInt32, Easing, Action<T,Boolean>, Func<Boolean>, IAnimationManager) |
Sets the specified parameters and starts the animation. |
AnimateKinetic(IAnimatable, String, Func<Double,Double,Boolean>, Double, Double, Action, IAnimationManager) |
Sets the specified parameters and starts the kinetic animation. |
AnimationIsRunning(IAnimatable, String) |
Returns a Boolean value that indicates whether or not the animation that is specified by |
Batch(IAnimatable) | |
GetPropertyIfSet<T>(BindableObject, BindableProperty, T) | |
SetAppTheme<T>(BindableObject, BindableProperty, T, T) | |
SetAppThemeColor(BindableObject, BindableProperty, Color, Color) | |
SetBinding(BindableObject, BindableProperty, String, BindingMode, IValueConverter, String) |
Creates and applies a binding to a property. |
Add(Grid, IView, Int32, Int32) | |
FindByName<T>(Element, String) | |
CancelAnimations(VisualElement) |
Aborts all animations (e.g. |
FadeTo(VisualElement, Double, UInt32, Easing) |
Returns a task that performs the fade that is described by the |
LayoutTo(VisualElement, Rect, UInt32, Easing) |
view
to the rectangle that is specified by the bounds parameter. |
RelRotateTo(VisualElement, Double, UInt32, Easing) |
Rotates the VisualElement that is specified by |
RelScaleTo(VisualElement, Double, UInt32, Easing) |
Returns a task that scales the VisualElement that is specified by |
RotateTo(VisualElement, Double, UInt32, Easing) |
Returns a task that rotates the VisualElement that is specified by |
RotateXTo(VisualElement, Double, UInt32, Easing) |
Returns a task that skews the X axis of the the VisualElement that is specified by |
RotateYTo(VisualElement, Double, UInt32, Easing) |
Returns a task that skews the Y axis of the the VisualElement that is specified by |
ScaleTo(VisualElement, Double, UInt32, Easing) |
Returns a task that scales the VisualElement that is specified by |
ScaleXTo(VisualElement, Double, UInt32, Easing) |
Returns a task that scales the X axis of the the VisualElement that is specified by |
ScaleYTo(VisualElement, Double, UInt32, Easing) |
Returns a task that scales the Y axis of the the VisualElement that is specified by |
TranslateTo(VisualElement, Double, Double, UInt32, Easing) |
Animates an elements TranslationX and TranslationY properties from their current values to the new values. This ensures that the input layout is in the same position as the visual layout. |
HasVisualStateGroups(VisualElement) |
Returns |
CheckHandlers(IView) | |
ComputeDesiredSize(IView, Double, Double) | |
ComputeFrame(IView, Rect) | |
ToHandler(IElement, IMauiContext) | |
ToPlatform(IElement, IMauiContext) | |
ToHandler(IView, IMauiContext) | |
SetSemanticFocus(IView) | |
CaptureAsync(IView) | |
GetVisualElementWindow(IVisualTreeElement) |
Gets the Window containing the Visual Tree Element, if the element is contained within one. |
GetVisualTreeDescendants(IVisualTreeElement) |
Gets the entire hierarchy of descendants as a list of children for a given Visual Tree Element. |
GetVisualTreeElements(IVisualTreeElement, Point) |
Gets list of a Visual Tree Element's children based off of a given Point. |
GetVisualTreeElements(IVisualTreeElement, Rect) |
Gets list of a Visual Tree Elements children based off of a rectangle. |
GetVisualTreeElements(IVisualTreeElement, Double, Double) |
Gets list of a Visual Tree Elements children based off of a given x, y point. |
GetVisualTreeElements(IVisualTreeElement, Double, Double, Double, Double) |
Gets list of a Visual Tree Elements children based off of a rectangle defined by its coordinates which are specified in platform units, not pixels. |