ItemsWrapGrid
ItemsWrapGrid
ItemsWrapGrid
ItemsWrapGrid
Class
Definition
Positions child elements sequentially from left to right or top to bottom in an ItemsControl that shows multiple items. When elements extend beyond the container edge, elements are positioned in the next row or column. Supports pixel-based UI virtualization and grouped layouts.
public : sealed class ItemsWrapGrid : Panel, IItemsWrapGrid, IItemsWrapGrid2public sealed class ItemsWrapGrid : Panel, IItemsWrapGrid, IItemsWrapGrid2Public NotInheritable Class ItemsWrapGrid Inherits Panel Implements IItemsWrapGrid, IItemsWrapGrid2// This API is not available in Javascript.
<ItemsWrapGrid .../>
- Inheritance
-
ItemsWrapGridItemsWrapGridItemsWrapGridItemsWrapGrid
- 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
Examples
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Remarks
ItemsWrapGrid can be used only as the ItemsPanel of an ItemsControl that displays more than one item at a time. It can't be used with an ItemsControl that displays only one item at a time, such as a ComboBox or FlipView. ItemsWrapGrid is the default ItemsPanel for GridView.
In an ItemsWrapGrid, elements are arranged in rows or columns that automatically wrap to a new row or column when the elements reach the container edge. If the MaximumRowsOrColumns property is set, items wrap when the specified number of rows or columns is reached instead.
Orientation
You set the Orientation property to specify whether the grid adds its items in rows or columns before wrapping. The default is Orientation.Vertical.
Note
For Universal Windows Platform (UWP) app on Windows 10, the default GridView template sets the Orientation to Horizontal.
When the value is Vertical, the grid adds items in columns from top to bottom, then wraps from left to right. Columns of items scroll or pan horizontally.
| 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. Rows of items scroll or pan vertically.
| Item 1 | Item 2 | Item 3 |
| Item 4 | Item 5 | Item 6 |
| Item 7 | Item 8 | Item 9 |
Constructors
ItemsWrapGrid() ItemsWrapGrid() ItemsWrapGrid() ItemsWrapGrid()
Initializes a new instance of the ItemsWrapGrid class.
public : ItemsWrapGrid()public ItemsWrapGrid()Public Sub New()// This API is not available in Javascript.
Properties
AreStickyGroupHeadersEnabled AreStickyGroupHeadersEnabled AreStickyGroupHeadersEnabled AreStickyGroupHeadersEnabled
Gets or sets a value that specifies whether a group header moves with the group when the group is panned vertically.
public : PlatForm::Boolean AreStickyGroupHeadersEnabled { get; set; }public bool AreStickyGroupHeadersEnabled { get; set; }Public ReadWrite Property AreStickyGroupHeadersEnabled As bool// This API is not available in Javascript.
- Value
- PlatForm::Boolean bool bool bool
true if the group header moves with the group when the group is panned vertically; otherwise, false. The default is true.
Examples
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid AreStickyGroupHeadersEnabled="False" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
Remarks
Group headers can be sticky only when the group is panned vertically and the GroupHeaderPlacement is Top. If the panel's Orientation is Horizontal or GroupHeaderPlacement is not Top, this property is ignored.
AreStickyGroupHeadersEnabledProperty AreStickyGroupHeadersEnabledProperty AreStickyGroupHeadersEnabledProperty AreStickyGroupHeadersEnabledProperty
Identifies the AreStickyGroupHeadersEnabled dependency property.
public : static DependencyProperty AreStickyGroupHeadersEnabledProperty { get; }public static DependencyProperty AreStickyGroupHeadersEnabledProperty { get; }Public Static ReadOnly Property AreStickyGroupHeadersEnabledProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the AreStickyGroupHeadersEnabled dependency property.
CacheLength CacheLength CacheLength CacheLength
Gets or sets the size of the buffers for items outside the viewport, in multiples of the viewport size.
public : double CacheLength { get; set; }public double CacheLength { get; set; }Public ReadWrite Property CacheLength As double// This API is not available in Javascript.
ItemsWrapGrid CacheLength="double" />
- Value
- double double double double
The size of the buffers for items outside the viewport, in multiples of the viewport size. The default is 4.0.
Remarks
To improve scrolling performance, ItemsWrapGrid creates and caches item containers for items that are off-screen on both sides of the viewport. The CacheLength property specifies the size of the buffers for the off-screen items. You specify CacheLength in multiples of the current viewport size. For example, if the CacheLength is 4.0, 2 viewports worth of items are buffered on each side of the viewport.
You can set a smaller cache length to optimize startup time, or set a larger cache size to optimize scrolling performance. Item containers that are off-screen are created at a lower priority than those in the viewport.
CacheLengthProperty CacheLengthProperty CacheLengthProperty CacheLengthProperty
Identifies the CacheLength dependency property.
public : static DependencyProperty CacheLengthProperty { get; }public static DependencyProperty CacheLengthProperty { get; }Public Static ReadOnly Property CacheLengthProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the CacheLength dependency property.
FirstCacheIndex FirstCacheIndex FirstCacheIndex FirstCacheIndex
Gets the index in the data collection of the first item in the cache.
public : int FirstCacheIndex { get; }public int FirstCacheIndex { get; }Public ReadOnly Property FirstCacheIndex As int// This API is not available in Javascript.
- Value
- int int int int
The index in the data collection of the first item in the cache. The default is -1.
Remarks
The index of the container for the very first item and the focused items are not reported if they are not in the cache.
FirstVisibleIndex FirstVisibleIndex FirstVisibleIndex FirstVisibleIndex
Gets the index in the data collection of the first item on the screen. Partially visible items are considered to be on screen.
public : int FirstVisibleIndex { get; }public int FirstVisibleIndex { get; }Public ReadOnly Property FirstVisibleIndex As int// This API is not available in Javascript.
- Value
- int int int int
The index in the data collection of the first item on the screen. The default is -1.
GroupHeaderPlacement GroupHeaderPlacement GroupHeaderPlacement GroupHeaderPlacement
Gets or sets a value that specifies where group headers are positioned in relation to the group.
public : GroupHeaderPlacement GroupHeaderPlacement { get; set; }public GroupHeaderPlacement GroupHeaderPlacement { get; set; }Public ReadWrite Property GroupHeaderPlacement As GroupHeaderPlacement// This API is not available in Javascript.
ItemsWrapGrid GroupHeaderPlacement="groupHeaderPlacementMemberName" />
An enumeration value that specifies where group headers are positioned in relation to the group. The default is Top.
Remarks
Valid values are Top and Left.
GroupHeaderPlacementProperty GroupHeaderPlacementProperty GroupHeaderPlacementProperty GroupHeaderPlacementProperty
Identifies the GroupHeaderPlacement dependency property.
public : static DependencyProperty GroupHeaderPlacementProperty { get; }public static DependencyProperty GroupHeaderPlacementProperty { get; }Public Static ReadOnly Property GroupHeaderPlacementProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the GroupHeaderPlacement dependency property.
GroupPadding GroupPadding GroupPadding GroupPadding
Gets or sets the amount of space around a group.
public : Thickness GroupPadding { get; set; }public Thickness GroupPadding { get; set; }Public ReadWrite Property GroupPadding As Thickness// This API is not available in Javascript.
GroupPaddingProperty GroupPaddingProperty GroupPaddingProperty GroupPaddingProperty
Identifies the GroupPadding dependency property.
public : static DependencyProperty GroupPaddingProperty { get; }public static DependencyProperty GroupPaddingProperty { get; }Public Static ReadOnly Property GroupPaddingProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the GroupPadding dependency property.
ItemHeight ItemHeight ItemHeight ItemHeight
Gets or sets the height of the layout area for each item that is contained in an ItemsWrapGrid.
public : double ItemHeight { get; set; }public double ItemHeight { get; set; }Public ReadWrite Property ItemHeight As double// This API is not available in Javascript.
<ItemsWrapGrid ItemHeight="double" />
- Value
- double double double double
The height of the layout area for each item that is contained in an ItemsWrapGrid. 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 an ItemsWrapGrid.
public : double ItemWidth { get; set; }public double ItemWidth { get; set; }Public ReadWrite Property ItemWidth As double// This API is not available in Javascript.
<ItemsWrapGrid ItemWidth="double" />
- Value
- double double double double
The width of the layout area for each item that is contained in an ItemsWrapGrid. 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.
LastCacheIndex LastCacheIndex LastCacheIndex LastCacheIndex
Gets the index in the data collection of the last item in the cache.
public : int LastCacheIndex { get; }public int LastCacheIndex { get; }Public ReadOnly Property LastCacheIndex As int// This API is not available in Javascript.
- Value
- int int int int
The index in the data collection of the last item in the cache. The default is -1.
LastVisibleIndex LastVisibleIndex LastVisibleIndex LastVisibleIndex
Gets the index in the data collection of the last item on the screen. Partially visible items are considered to be on screen.
public : int LastVisibleIndex { get; }public int LastVisibleIndex { get; }Public ReadOnly Property LastVisibleIndex As int// This API is not available in Javascript.
- Value
- int int int int
The index in the data collection of the last item on the screen. The default is -1.
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.
<ItemsWrapGrid MaximumRowsOrColumns="int" />
- Value
- int int int int
The maximum rows or columns that this ItemsWrapGrid 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 dimension by which child elements are stacked.
public : Orientation Orientation { get; set; }public Orientation Orientation { get; set; }Public ReadWrite Property Orientation As Orientation// This API is not available in Javascript.
ItemsWrapGrid Orientation="orientationMemberName" />
One of the enumeration values that specifies the orientation of child elements. The default is Vertical.
Remarks
Note
ItemsWrapGrid is the default ItemsPanel for GridView. For Universal Windows Platform (UWP) app on Windows 10, the default GridView template sets the Orientation to Horizontal.
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.
ScrollingDirection ScrollingDirection ScrollingDirection ScrollingDirection
Gets a value that indicates whether items are panning forward or backward, or aren't panning.
public : PanelScrollingDirection ScrollingDirection { get; }public PanelScrollingDirection ScrollingDirection { get; }Public ReadOnly Property ScrollingDirection As PanelScrollingDirection// This API is not available in Javascript.
- Value
- PanelScrollingDirection PanelScrollingDirection PanelScrollingDirection PanelScrollingDirection
An enumeration value that indicates whether the items are panning Forward or Backward, or None if the items are not panning.