diff --git a/.openpublishing.redirection.json b/.openpublishing.redirection.json new file mode 100644 index 00000000..b099a1c9 --- /dev/null +++ b/.openpublishing.redirection.json @@ -0,0 +1,8 @@ +{ + "redirections": [ + { + "source_path": "docs/user-interface/layouts/gridlayout.md", + "redirect_url": "/dotnet/maui/user-interface/layouts/grid" + } + ] +} diff --git a/docs/TOC.yml b/docs/TOC.yml index 611eaa5d..56ea2689 100644 --- a/docs/TOC.yml +++ b/docs/TOC.yml @@ -92,7 +92,7 @@ - name: Attached properties href: fundamentals/attached-properties.md - name: Resource dictionaries - href: fundamentals/resource-dictionaries.md + href: fundamentals/resource-dictionaries.md - name: Single project href: fundamentals/single-project.md - name: User interface @@ -125,8 +125,8 @@ href: user-interface/layouts/absolutelayout.md - name: FlexLayout href: user-interface/layouts/flexlayout.md - - name: GridLayout - href: user-interface/layouts/gridlayout.md + - name: Grid + href: user-interface/layouts/grid.md - name: HorizontalStackLayout href: user-interface/layouts/horizontalstacklayout.md - name: RelativeLayout diff --git a/docs/user-interface/controls/index.md b/docs/user-interface/controls/index.md index 39788780..7097b414 100644 --- a/docs/user-interface/controls/index.md +++ b/docs/user-interface/controls/index.md @@ -25,7 +25,7 @@ The main control groups used to create the user interface of a .NET MAUI app are | --- | --- | | `AbsoluteLayout` | `AbsoluteLayout` positions child elements at specific locations relative to its parent. For more information, see [AbsoluteLayout](~/user-interface/layouts/absolutelayout.md). | | `FlexLayout`| `FlexLayout` enables its children to be stacked or wrapped with different alignment and orientation options. `FlexLayout` is based on the CSS Flexible Box Layout Module, known as *flex layout* or *flex-box*. For more information, see [FlexLayout](~/user-interface/layouts/flexlayout.md). | -| `GridLayout` | `GridLayout` positions its child elements in a grid of rows and columns. For more information, see [GridLayout](~/user-interface/layouts/gridlayout.md). | +| `Grid` | `Grid` positions its child elements in a grid of rows and columns. For more information, see [Grid](~/user-interface/layouts/grid.md). | | `HorizontalStackLayout` | `HorizontalStackLayout` positions child elements in a horizontal stack. For more information, see [HorizontalStackLayout](~/user-interface/layouts/horizontalstacklayout.md). | | `StackLayout` | `StackLayout` positions child elements in either a vertical or horizontal stack. For more information, see [StackLayout](~/user-interface/layouts/stacklayout.md). | | `VerticalStackLayout` | `VerticalStackLayout` positions child elements in a vertical stack. For more information, see [VerticalStackLayout](~/user-interface/layouts/verticalstacklayout.md). | diff --git a/docs/user-interface/layouts/gridlayout.md b/docs/user-interface/layouts/grid.md similarity index 92% rename from docs/user-interface/layouts/gridlayout.md rename to docs/user-interface/layouts/grid.md index 952605b9..104d975d 100644 --- a/docs/user-interface/layouts/gridlayout.md +++ b/docs/user-interface/layouts/grid.md @@ -1,40 +1,37 @@ --- -title: "GridLayout" -description: "The .NET MAUI GridLayout, or Grid, is a layout that organizes its children into rows and columns of cells." +title: "Grid" +description: "The .NET MAUI Grid is a layout that organizes its children into rows and columns of cells." ms.date: 12/28/2021 --- -# GridLayout +# Grid -:::image type="content" source="media/gridlayout/layouts.png" alt-text=".NET MAUI GridLayout." border="false"::: +:::image type="content" source="media/grid/layouts.png" alt-text=".NET MAUI Grid." border="false"::: -The .NET Multi-platform App UI (.NET MAUI) `GridLayout`, or `Grid`, is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a `GridLayout` contains one row and one column. In addition, a `GridLayout` can be used as a parent layout that contains other child layouts. +The .NET Multi-platform App UI (.NET MAUI) `Grid`, is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a `Grid` contains one row and one column. In addition, a `Grid` can be used as a parent layout that contains other child layouts. [!INCLUDE [docs under construction](~/includes/preview-note.md)] -The `GridLayout` should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a `GridLayout` is intended for laying out content. +The `Grid` should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a `Grid` is intended for laying out content. -The `GridLayout` class defines the following properties: +The `Grid` class defines the following properties: -- `Column`, of type `int`, which is an attached property that indicates the column alignment of a view within a parent `GridLayout`. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0. +- `Column`, of type `int`, which is an attached property that indicates the column alignment of a view within a parent `Grid`. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0. - `ColumnDefinitions`, of type `ColumnDefinitionCollection`, is a list of `ColumnDefinition` objects that define the width of the grid columns. - `ColumnSpacing`, of type `double`, indicates the distance between grid columns. The default value of this property is 0. -- `ColumnSpan`, of type `int`, which is an attached property that indicates the total number of columns that a view spans within a parent `GridLayout`. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1. -- `Row`, of type `int`, which is an attached property that indicates the row alignment of a view within a parent `GridLayout`. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0. +- `ColumnSpan`, of type `int`, which is an attached property that indicates the total number of columns that a view spans within a parent `Grid`. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1. +- `Row`, of type `int`, which is an attached property that indicates the row alignment of a view within a parent `Grid`. The default value of this property is 0. A validation callback ensures that when the property is set, its value is greater than or equal to 0. - `RowDefinitions`, of type `RowDefinitionCollection`, is a list of `RowDefintion` objects that define the height of the grid rows. - `RowSpacing`, of type `double`, indicates the distance between grid rows. The default value of this property is 0. -- `RowSpan`, of type `int`, which is an attached property that indicates the total number of rows that a view spans within a parent `GridLayout`. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1. +- `RowSpan`, of type `int`, which is an attached property that indicates the total number of rows that a view spans within a parent `Grid`. The default value of this property is 1. A validation callback ensures that when the property is set, its value is greater than or equal to 1. These properties are backed by `BindableProperty` objects, which means that the properties can be targets of data bindings and styled. -> [!NOTE] -> In .NET MAUI, `Grid` is an alias for `GridLayout` and is used in the rest of this article. - ## Rows and columns By default, a `Grid` contains one row and one column: @@ -51,7 +48,7 @@ By default, a `Grid` contains one row and one column: In this example, the `Grid` contains a single child `Label` that's automatically positioned in a single location: -:::image type="content" source="media/gridlayout/default.png" alt-text="Default .NET MAUI Grid layout."::: +:::image type="content" source="media/grid/default.png" alt-text="Default .NET MAUI Grid layout."::: The layout behavior of a `Grid` can be defined with the `RowDefinitions` and `ColumnDefinitions` properties, which are collections of `RowDefinition` and `ColumnDefinition` objects, respectively. These collections define the row and column characteristics of a `Grid`, and should contain one `RowDefinition` object for each row in the `Grid`, and one `ColumnDefinition` object for each column in the `Grid`. @@ -155,7 +152,7 @@ The following XAML shows the same `Grid` definition, and also positions child vi In this example, all three `Grid` rows are occupied by `BoxView` and `Label` views. The third row is 100 device-independent units high, with the first two rows occupying the remaining space (the first row is twice as high as the second row). The two columns are equal in width and divide the `Grid` in half. The `BoxView` in the third row spans both columns: -:::image type="content" source="media/gridlayout/basic.png" alt-text="Basic .NET MAUI Grid layout."::: +:::image type="content" source="media/grid/basic.png" alt-text="Basic .NET MAUI Grid layout."::: In addition, child views in a `Grid` can share cells. The order that the children appear in the XAML is the order that the children are placed in the `Grid`. In the previous example, the `Label` objects are only visible because they are rendered on top of the `BoxView` objects. The `Label` objects would not be visible if the `BoxView` objects were rendered on top of them. @@ -294,7 +291,7 @@ By default, `Grid` rows and columns have no space between them. This can be chan This example creates a `Grid` whose rows and columns are separated by 6 device-independent units of space: -:::image type="content" source="media/gridlayout/spacing.png" alt-text=".NET MAUI Grid with spacing between cells."::: +:::image type="content" source="media/grid/spacing.png" alt-text=".NET MAUI Grid with spacing between cells."::: > [!TIP] > The `RowSpacing` and `ColumnSpacing` properties can be set to negative values to make cell contents overlap. @@ -413,7 +410,7 @@ The following XAML creates a `Grid` with nine equal-size cells, and places a `La In this example, the `Label` objects in each row are all identically aligned vertically, but use different horizontal alignments. Alternatively, this can be thought of as the `Label` objects in each column being identically aligned horizontally, but using different vertical alignments: -:::image type="content" source="media/gridlayout/alignment.png" alt-text="Cell alignment in a .NET MAUI Grid."::: +:::image type="content" source="media/grid/alignment.png" alt-text="Cell alignment in a .NET MAUI Grid."::: The equivalent C# code is: @@ -619,7 +616,7 @@ The following XAML shows an example of nesting `Grid` objects: In this example, the root `Grid` contains a `BoxView` in its first row, and a child `Grid` in its second row. The child `Grid` contains `Slider` objects that manipulate the color displayed by the `BoxView`, and `Label` objects that display the value of each `Slider`: -:::image type="content" source="media/gridlayout/nested.png" alt-text="Nested .NET MAUI Grid objects."::: +:::image type="content" source="media/grid/nested.png" alt-text="Nested .NET MAUI Grid objects."::: > [!IMPORTANT] > The deeper you nest `Grid` objects and other layouts, the more the nested layouts will impact performance. diff --git a/docs/user-interface/layouts/index.md b/docs/user-interface/layouts/index.md index fe26cd73..259850af 100644 --- a/docs/user-interface/layouts/index.md +++ b/docs/user-interface/layouts/index.md @@ -98,9 +98,9 @@ In a `VerticalStackLayout`, if an element's size is not explicitly set, it expan For more information, see [VerticalStackLayout](verticalstacklayout.md). -## GridLayout +## Grid -A `GridLayout`, or `Grid`, is used for displaying elements in rows and columns, which can have proportional or absolute sizes. A grid's rows and columns are specified with the `RowDefinitions` and `ColumnDefinitions` properties. +A `Grid` is used for displaying elements in rows and columns, which can have proportional or absolute sizes. A grid's rows and columns are specified with the `RowDefinitions` and `ColumnDefinitions` properties. To position elements in specific `Grid` cells, use the `Grid.Column` and `Grid.Row` attached properties. To make elements span across multiple rows and columns, use the `Grid.RowSpan` and `Grid.ColumnSpan` attached properties. @@ -141,7 +141,7 @@ Space can be distributed within a column or row by using auto sizing, which lets > [!CAUTION] > Try to ensure that as few rows and columns as possible are set to `Auto` size. Each auto-sized row or column will cause the layout engine to perform additional layout calculations. Instead, use fixed size rows and columns if possible. Alternatively, set rows and columns to occupy a proportional amount of space with the `GridUnitType.Star` enumeration value. -For more information, see [Grid](gridlayout.md). +For more information, see [Grid](grid.md). ## FlexLayout diff --git a/docs/user-interface/layouts/media/absolutelayout/layouts.png b/docs/user-interface/layouts/media/absolutelayout/layouts.png index 92ec1102..78a468ab 100644 Binary files a/docs/user-interface/layouts/media/absolutelayout/layouts.png and b/docs/user-interface/layouts/media/absolutelayout/layouts.png differ diff --git a/docs/user-interface/layouts/media/flexlayout/layouts.png b/docs/user-interface/layouts/media/flexlayout/layouts.png index 8ccef9f1..4423f2b1 100644 Binary files a/docs/user-interface/layouts/media/flexlayout/layouts.png and b/docs/user-interface/layouts/media/flexlayout/layouts.png differ diff --git a/docs/user-interface/layouts/media/gridlayout/alignment.png b/docs/user-interface/layouts/media/grid/alignment.png similarity index 100% rename from docs/user-interface/layouts/media/gridlayout/alignment.png rename to docs/user-interface/layouts/media/grid/alignment.png diff --git a/docs/user-interface/layouts/media/gridlayout/basic.png b/docs/user-interface/layouts/media/grid/basic.png similarity index 100% rename from docs/user-interface/layouts/media/gridlayout/basic.png rename to docs/user-interface/layouts/media/grid/basic.png diff --git a/docs/user-interface/layouts/media/gridlayout/default.png b/docs/user-interface/layouts/media/grid/default.png similarity index 100% rename from docs/user-interface/layouts/media/gridlayout/default.png rename to docs/user-interface/layouts/media/grid/default.png diff --git a/docs/user-interface/layouts/media/grid/layouts.png b/docs/user-interface/layouts/media/grid/layouts.png new file mode 100644 index 00000000..c8cfbe19 Binary files /dev/null and b/docs/user-interface/layouts/media/grid/layouts.png differ diff --git a/docs/user-interface/layouts/media/gridlayout/nested.png b/docs/user-interface/layouts/media/grid/nested.png similarity index 100% rename from docs/user-interface/layouts/media/gridlayout/nested.png rename to docs/user-interface/layouts/media/grid/nested.png diff --git a/docs/user-interface/layouts/media/gridlayout/spacing.png b/docs/user-interface/layouts/media/grid/spacing.png similarity index 100% rename from docs/user-interface/layouts/media/gridlayout/spacing.png rename to docs/user-interface/layouts/media/grid/spacing.png diff --git a/docs/user-interface/layouts/media/gridlayout/layouts.png b/docs/user-interface/layouts/media/gridlayout/layouts.png deleted file mode 100644 index 0436e7cb..00000000 Binary files a/docs/user-interface/layouts/media/gridlayout/layouts.png and /dev/null differ diff --git a/docs/user-interface/layouts/media/layouts.png b/docs/user-interface/layouts/media/layouts.png index db1aa1f9..c8987882 100644 Binary files a/docs/user-interface/layouts/media/layouts.png and b/docs/user-interface/layouts/media/layouts.png differ diff --git a/docs/user-interface/layouts/media/relativelayout/layouts.png b/docs/user-interface/layouts/media/relativelayout/layouts.png index b0067ad8..42811b41 100644 Binary files a/docs/user-interface/layouts/media/relativelayout/layouts.png and b/docs/user-interface/layouts/media/relativelayout/layouts.png differ diff --git a/docs/user-interface/layouts/media/stacklayout/layouts.png b/docs/user-interface/layouts/media/stacklayout/layouts.png index 977987fb..918370e8 100644 Binary files a/docs/user-interface/layouts/media/stacklayout/layouts.png and b/docs/user-interface/layouts/media/stacklayout/layouts.png differ