GridLayout becomes Grid (#298)
* GridLayout > Grid * GridLayout > Grid * Redirect GridLayout to Grid.
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"redirections": [
|
||||
{
|
||||
"source_path": "docs/user-interface/layouts/gridlayout.md",
|
||||
"redirect_url": "/dotnet/maui/user-interface/layouts/grid"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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). |
|
||||
|
|
|
@ -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
|
||||
|
||||
<!-- Sample link goes here -->
|
||||
|
||||
:::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. <!-- For displaying tabular data, consider using a [ListView](~/xamarin-forms/user-interface/listview/index.md), [CollectionView](~/xamarin-forms/user-interface/collectionview/introduction.md), or [TableView](~/xamarin-forms/user-interface/tableview.md).-->
|
||||
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. <!-- For displaying tabular data, consider using a [ListView](~/xamarin-forms/user-interface/listview/index.md), [CollectionView](~/xamarin-forms/user-interface/collectionview/introduction.md), or [TableView](~/xamarin-forms/user-interface/tableview.md).-->
|
||||
|
||||
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.
|
||||
|
||||
<!-- > [!TIP]
|
||||
> To obtain the best possible layout performance, follow the guidelines at [Optimize layout performance](~/xamarin-forms/deploy-test/performance.md#optimize-layout-performance). -->
|
||||
|
||||
> [!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. <!--For more information, see [Choose the correct layout](~/xamarin-forms/deploy-test/performance.md#choose-the-correct-layout).-->
|
|
@ -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
|
||||
|
||||
|
|
Двоичные данные
docs/user-interface/layouts/media/absolutelayout/layouts.png
До Ширина: | Высота: | Размер: 35 KiB После Ширина: | Высота: | Размер: 34 KiB |
Двоичные данные
docs/user-interface/layouts/media/flexlayout/layouts.png
До Ширина: | Высота: | Размер: 33 KiB После Ширина: | Высота: | Размер: 34 KiB |
До Ширина: | Высота: | Размер: 18 KiB После Ширина: | Высота: | Размер: 18 KiB |
До Ширина: | Высота: | Размер: 12 KiB После Ширина: | Высота: | Размер: 12 KiB |
До Ширина: | Высота: | Размер: 5.6 KiB После Ширина: | Высота: | Размер: 5.6 KiB |
После Ширина: | Высота: | Размер: 34 KiB |
До Ширина: | Высота: | Размер: 11 KiB После Ширина: | Высота: | Размер: 11 KiB |
До Ширина: | Высота: | Размер: 12 KiB После Ширина: | Высота: | Размер: 12 KiB |
Двоичные данные
docs/user-interface/layouts/media/gridlayout/layouts.png
До Ширина: | Высота: | Размер: 34 KiB |
Двоичные данные
docs/user-interface/layouts/media/layouts.png
До Ширина: | Высота: | Размер: 38 KiB После Ширина: | Высота: | Размер: 37 KiB |
Двоичные данные
docs/user-interface/layouts/media/relativelayout/layouts.png
До Ширина: | Высота: | Размер: 35 KiB После Ширина: | Высота: | Размер: 34 KiB |
Двоичные данные
docs/user-interface/layouts/media/stacklayout/layouts.png
До Ширина: | Высота: | Размер: 33 KiB После Ширина: | Высота: | Размер: 34 KiB |