WrapGrid
WrapGrid
WrapGrid
WrapGrid
Class
Definition
Positions child elements sequentially from left to right or top to bottom. When elements extend beyond the container edge, elements are positioned in the next row or column. Can only be used to display items in an ItemsControl. See Remarks.
public : sealed class WrapGrid : OrientedVirtualizingPanel, IWrapGridpublic sealed class WrapGrid : OrientedVirtualizingPanel, IWrapGridPublic NotInheritable Class WrapGrid Inherits OrientedVirtualizingPanel Implements IWrapGrid// This API is not available in Javascript.
<WrapGrid ...>
oneOrMoreUIElements
</WrapGrid>
- Inheritance
-
OrientedVirtualizingPanelOrientedVirtualizingPanelOrientedVirtualizingPanelOrientedVirtualizingPanelWrapGridWrapGridWrapGridWrapGrid
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Remarks
Important
Starting in Windows 8.1, ItemsWrapGrid is used as the default ItemsPanel for GridView. If you modify the ItemsPanel, we recommend you use ItemsStackPanel or ItemsWrapGrid instead of VirtualizingStackPanel or WrapGrid.
WrapGrid can only be used to display items in an ItemsControl.
The content of a WrapGrid is virtualized. This can improve performance when you work with large data sets. For more info, see Optimize ListView and GridView.
In a WrapGrid, 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 |
Windows 8 behavior
For Windows 8, items added to the items lists programmatically at run-time sometimes would start a new row in the internal grid representation, even if the item could have been added to an existing row based on the MaximumRowsOrColumns setting.
Starting with Windows 8.1, items added to items lists programmatically at run-time will fill rows in expected ways, starting a new row only when row-column limits are exceeded.
This behavior difference usually has no effect on the layout the user sees, because the items control that contains the WrapGrid is ultimately controlling the layout. But the difference can be detected if you are using coordinate-relative techniques to check the layout within the WrapGrid. For instance, you might see coordinate differences if you are calling TransformToVisual or VisualTreeHelper API, with the WrapGrid as the "relative-to" element.
If you migrate your app code from Windows 8 to Windows 8.1, and you're doing advanced layout verification with TransformToVisual or VisualTreeHelper within a WrapGrid you may want to account for this behavior change.
Apps that were compiled for Windows 8 but running on Windows 8.1 continue to use the Windows 8 behavior.
Constructors
Properties
HorizontalChildrenAlignment HorizontalChildrenAlignment HorizontalChildrenAlignment HorizontalChildrenAlignment
Gets or sets the alignment rules by which child elements are arranged for the horizontal dimension.
public : HorizontalAlignment HorizontalChildrenAlignment { get; set; }public HorizontalAlignment HorizontalChildrenAlignment { get; set; }Public ReadWrite Property HorizontalChildrenAlignment As HorizontalAlignment// This API is not available in Javascript.
<WrapGrid HorizontalChildrenAlignment="horizontalAlignmentMemberName" />
A value of the enumeration. The default is Left.
HorizontalChildrenAlignmentProperty HorizontalChildrenAlignmentProperty HorizontalChildrenAlignmentProperty HorizontalChildrenAlignmentProperty
Identifies the HorizontalChildrenAlignment dependency property.
public : static DependencyProperty HorizontalChildrenAlignmentProperty { get; }public static DependencyProperty HorizontalChildrenAlignmentProperty { get; }Public Static ReadOnly Property HorizontalChildrenAlignmentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the HorizontalChildrenAlignment dependency property.
ItemHeight ItemHeight ItemHeight ItemHeight
Gets or sets the height of the layout area for each item that is contained in a WrapGrid.
public : double ItemHeight { get; set; }public double ItemHeight { get; set; }Public ReadWrite Property ItemHeight As double// This API is not available in Javascript.
<WrapGrid ItemHeight="double" />
- Value
- double double double double
The height of the layout area for each item that is contained in a WrapGrid. The default is Double.NaN, which results in the "Auto" layout behavior.
Remarks
"Auto" layout and Double.NaN
The default value of ItemHeight and ItemWidth is not 0, it is Double.NaN. ItemHeight and ItemWidth support the ability to be an unset "Auto" value. Because ItemHeight and ItemWidth are Double values, Double.NaN is used as a special value to represent this "Auto" behavior. The layout system interprets the "Auto" value to generally mean that the object should be sized to the available size in layout, instead of to a specific pixel value. If you want the "Auto" behavior for an object when it is used in layout, leave ItemHeight and ItemWidth unset at their Double.NaN default value. If you have previously set values and want to reenable the "Auto" behavior with run-time code, set to Double.NaN. In XAML such as templates, you can set attribute values using the string "Auto".
Note
Visual C++ component extensions (C++/CX) doesn't have a constant for NaN, it uses a value, which appears as "-1.#IND" followed by zeros.
- See Also
ItemHeightProperty ItemHeightProperty ItemHeightProperty ItemHeightProperty
Identifies the ItemHeight dependency property.
public : static DependencyProperty ItemHeightProperty { get; }public static DependencyProperty ItemHeightProperty { get; }Public Static ReadOnly Property ItemHeightProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ItemHeight dependency property.
ItemWidth ItemWidth ItemWidth ItemWidth
Gets or sets the width of the layout area for each item that is contained in a WrapGrid.
public : double ItemWidth { get; set; }public double ItemWidth { get; set; }Public ReadWrite Property ItemWidth As double// This API is not available in Javascript.
<WrapGrid ItemWidth="double" />
- Value
- double double double double
The width of the layout area for each item that is contained in a WrapGrid. The default is Double.NaN, which results in the "Auto" layout behavior.
Remarks
"Auto" layout and Double.NaN
The default value of ItemHeight and ItemWidth is not 0, it is Double.NaN. ItemHeight and ItemWidth support the ability to be an unset "Auto" value. Because ItemHeight and ItemWidth are Double values, Double.NaN is used as a special value to represent this "Auto" behavior. The layout system interprets the "Auto" value to generally mean that the object should be sized to the available size in layout, instead of to a specific pixel value. If you want the "Auto" behavior for an object when it is used in layout, leave ItemHeight and ItemWidth unset at their Double.NaN default value. If you have previously set values and want to reenable the "Auto" behavior with run-time code, set to Double.NaN. In XAML such as templates, you can set attribute values using the string "Auto".
Note
Visual C++ component extensions (C++/CX) doesn't have a constant for NaN, it uses a value, which appears as "-1.#IND" followed by zeros.
- See Also
ItemWidthProperty ItemWidthProperty ItemWidthProperty ItemWidthProperty
Identifies the ItemWidth dependency property.
public : static DependencyProperty ItemWidthProperty { get; }public static DependencyProperty ItemWidthProperty { get; }Public Static ReadOnly Property ItemWidthProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the ItemWidth dependency property.
MaximumRowsOrColumns MaximumRowsOrColumns MaximumRowsOrColumns MaximumRowsOrColumns
Gets or sets a value that influences the wrap point, also accounting for Orientation.
public : int MaximumRowsOrColumns { get; set; }public int MaximumRowsOrColumns { get; set; }Public ReadWrite Property MaximumRowsOrColumns As int// This API is not available in Javascript.
<WrapGrid MaximumRowsOrColumns="int" />
- Value
- int int int int
The maximum rows or columns that this WrapGrid should present before it introduces wrapping to the layout. The default is -1, which is a special value that indicates no maximum.
MaximumRowsOrColumnsProperty MaximumRowsOrColumnsProperty MaximumRowsOrColumnsProperty MaximumRowsOrColumnsProperty
Identifies the MaximumRowsOrColumns dependency property.
public : static DependencyProperty MaximumRowsOrColumnsProperty { get; }public static DependencyProperty MaximumRowsOrColumnsProperty { get; }Public Static ReadOnly Property MaximumRowsOrColumnsProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the MaximumRowsOrColumns dependency property.
Orientation Orientation Orientation Orientation
Gets or sets the direction in which child elements are arranged.
public : Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation// This API is not available in Javascript.
WrapGrid Orientation="orientationMemberName" />
A value of the enumeration. The default is Vertical.
Remarks
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 |
OrientationProperty OrientationProperty OrientationProperty OrientationProperty
Identifies the Orientation dependency property.
public : static DependencyProperty OrientationProperty { get; }public static DependencyProperty OrientationProperty { get; }Public Static ReadOnly Property OrientationProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Orientation dependency property.
VerticalChildrenAlignment VerticalChildrenAlignment VerticalChildrenAlignment VerticalChildrenAlignment
Gets or sets the alignment rules by which child elements are arranged for the vertical dimension.
public : VerticalAlignment VerticalChildrenAlignment { get; set; }public VerticalAlignment VerticalChildrenAlignment { get; set; }Public ReadWrite Property VerticalChildrenAlignment As VerticalAlignment// This API is not available in Javascript.
<WrapGrid VerticalChildrenAlignment="verticalAlignmentMemberName" />
A value of the enumeration. The default is Top.
VerticalChildrenAlignmentProperty VerticalChildrenAlignmentProperty VerticalChildrenAlignmentProperty VerticalChildrenAlignmentProperty
Identifies the VerticalChildrenAlignment dependency property.
public : static DependencyProperty VerticalChildrenAlignmentProperty { get; }public static DependencyProperty VerticalChildrenAlignmentProperty { get; }Public Static ReadOnly Property VerticalChildrenAlignmentProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the VerticalChildrenAlignment dependency property.