| -api-id | -api-type |
|---|---|
T:Windows.UI.Xaml.Controls.VariableSizedWrapGrid |
winrt class |
Provides a grid-style layout panel where each tile/cell can be variable size based on content.
<VariableSizedWrapGrid ...>
oneOrMoreUIElements
</VariableSizedWrapGrid>
-or-
<VariableSizedWrapGrid .../>VariableSizedWrapGrid is layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.
In a VariableSizedWrapGrid, elements are arranged in rows or columns that automatically wrap to a new row or column when the MaximumRowsOrColumns value is reached. The Orientation property specifies whether the grid adds its items in rows or columns before wrapping.
When the value is Vertical, the grid adds items in columns from top to bottom, then wraps from left to right, like this:
| Item 1 | Item 4 | Item 7 |
| Item 2 | Item 5 | Item 8 |
| Item 3 | Item 6 | Item 9 |
When the value is Horizontal, the grid adds items in rows from left to right, then wraps from top to bottom, like this:
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 | Item 6 |
| Item 7 | Item 8 | Item 9 |
You can make items different sizes in the grid by making them span multiple rows and columns using the VariableSizedWrapGrid.RowSpan and VariableSizedWrapGrid.ColumnSpan attached properties.
You can set either or both of the RowSpan and ColumnSpan attached properties on any child elements in the VariableSizedWrapGrid in order to have particular child elements use a spanning logic for layout. This is useful if an element has a notably larger size than other elements. For example, if one child element has a desired size that is about twice as large in both dimensions, and you don't want this large element to produce a lot of white space in the nearby cells of peer elements, then you might use markup like this:
<VariableSizedWrapGrid>
<Image Name="MyBigImage"
VariableSizedWrapGrid.ColumnSpan="2"
VariableSizedWrapGrid.RowSpan="2"
...
/>
...
</VariableSizedWrapGrid>VariableSizedWrapGrid is the host service class for several XAML attached properties. These attached properties enable child elements to report how they should be positioned in their grid parent.
In order to support XAML processor access to the attached properties, and also to expose equivalent get and set operations to code, each XAML attached property has a pair of Get and Set accessor methods. Another way to get or set the value in code is to use the dependency property system, calling either GetValue or SetValue and passing the identifier field as the dependency property identifier.
| Attached property | Description |
|---|---|
| ColumnSpan | Gets or sets a value that indicates the total number of columns that the element content spans within a parent VariableSizedWrapGrid. |
| RowSpan | Gets or sets a value that indicates the total number of rows that the element content spans within a parent VariableSizedWrapGrid. |
Note
VariableSizedWrapGrid is not supported for use as the ItemsPanel of a ListView control. You can use it as the ItemsPanel in a GridView or ItemsControl, but the content of a VariableSizedWrapGrid is not virtualized. This can reduce performance when you work with large data sets. For more info about virtualization, see Optimize ListView and GridView.
Tip
For more info, design guidance, and code examples, see Layout panels.
If you have the WinUI 2 Gallery app installed, click here to open the app and see the VariableSizedWrapGrid in action.
Panel, Define layouts, Alignment, margin, and padding, Attached properties overview, Canvas, Grid, ItemsWrapGrid, StackPanel, WrapGrid, Controls list, Controls by function