VariableSizedWrapGrid VariableSizedWrapGrid VariableSizedWrapGrid VariableSizedWrapGrid Class

Definition

Provides a grid-style layout panel where each tile/cell can be variable size based on content.

public : sealed class VariableSizedWrapGrid : Panel, IVariableSizedWrapGridpublic sealed class VariableSizedWrapGrid : Panel, IVariableSizedWrapGridPublic NotInheritable Class VariableSizedWrapGrid Inherits Panel Implements IVariableSizedWrapGrid// This API is not available in Javascript.
<VariableSizedWrapGrid ...>
  oneOrMoreUIElements
</VariableSizedWrapGrid>
-or-
<VariableSizedWrapGrid .../>
Inheritance
Attributes
Windows 10 requirements
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

VariableSizedWrapGrid is layout panel that supports arranging child elements in rows and columns. Each child element can span multiple rows and columns.

Variable sized wrap grid layout panel

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 1Item 4Item 7
Item 2Item 5Item 8
Item 3Item 6Item 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 1Item 2Item 3
Item 4Item 5Item 6
Item 7Item 8Item 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.

VariableSizedWrapGrid XAML attached properties

VariableSizedWrapGrid is the host service class for several XAML attached properties. The purpose of these attached properties is to enable child elements to specify how they should be positioned within the VariableSizedWrapGrid.

VariableSizedWrapGrid provides the following attached properties for XAML usage:

You can set either or both of these 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>

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. For example, the GetRowSpan and SetRowSpan methods support and provide the equivalent code-only support for VariableSizedWrapGrid.RowSpan. Alternatively, you can use the dependency property system to get or set the value of the attached property. Call GetValue or SetValue, passing the arguments of the dependency property identifier to set, and a reference to the target object on which to get or set the value.

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.

Constructors

VariableSizedWrapGrid() VariableSizedWrapGrid() VariableSizedWrapGrid() VariableSizedWrapGrid()

Initializes a new instance of the VariableSizedWrapGrid class.

public : VariableSizedWrapGrid()public VariableSizedWrapGrid()Public Sub New()// This API is not available in Javascript.

Properties

ColumnSpanProperty ColumnSpanProperty ColumnSpanProperty ColumnSpanProperty

Identifies the VariableSizedWrapGrid.ColumnSpan XAML attached property.

public : static DependencyProperty ColumnSpanProperty { get; }public static DependencyProperty ColumnSpanProperty { get; }Public Static ReadOnly Property ColumnSpanProperty As DependencyProperty// This API is not available in Javascript.

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.
<VariableSizedWrapGrid HorizontalChildrenAlignment="horizontalAlignmentMemberName" />
Value
HorizontalAlignment HorizontalAlignment HorizontalAlignment HorizontalAlignment

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.

ItemHeight ItemHeight ItemHeight ItemHeight

Gets or sets the height of the layout area for each item that is contained in a VariableSizedWrapGrid.

public : double ItemHeight { get; set; }public double ItemHeight { get; set; }Public ReadWrite Property ItemHeight As double// This API is not available in Javascript.
<VariableSizedWrapGrid ItemHeight="double" />
-or-
<VariableSizedWrapGrid ItemHeight="Auto" />

Value
double double double double

The height of the layout area for each item that is contained in a VariableSizedWrapGrid. 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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 VariableSizedWrapGrid.

public : double ItemWidth { get; set; }public double ItemWidth { get; set; }Public ReadWrite Property ItemWidth As double// This API is not available in Javascript.
<VariableSizedWrapGrid ItemWidth="double" />
-or-
<VariableSizedWrapGrid ItemWidth="Auto" />
Value
double double double double

The width of the layout area for each item that is contained in a VariableSizedWrapGrid. 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

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.
<VariableSizedWrapGrid MaximumRowsOrColumns="int" />
Value
int int int int

The maximum rows or columns that this VariableSizedWrapGrid 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.

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.
<VariableSizedWrapGrid Orientation="orientationMemberName" />
Value
Orientation Orientation Orientation Orientation

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 1Item 4Item 7
Item 2Item 5Item 8
Item 3Item 6Item 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 1Item 2Item 3
Item 4Item 5Item 6
Item 7Item 8Item 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.
Value
DependencyProperty DependencyProperty DependencyProperty DependencyProperty

The identifier for the Orientation dependency property.

RowSpanProperty RowSpanProperty RowSpanProperty RowSpanProperty

Identifies the VariableSizedWrapGrid.RowSpan XAML attached property.

public : static DependencyProperty RowSpanProperty { get; }public static DependencyProperty RowSpanProperty { get; }Public Static ReadOnly Property RowSpanProperty As DependencyProperty// This API is not available in Javascript.

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.
<VariableSizedWrapGrid VerticalChildrenAlignment="verticalAlignmentMemberName" />
Value
VerticalAlignment VerticalAlignment VerticalAlignment VerticalAlignment

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.

Methods

GetColumnSpan(UIElement) GetColumnSpan(UIElement) GetColumnSpan(UIElement) GetColumnSpan(UIElement)

Gets the value of the VariableSizedWrapGrid.ColumnSpan XAML attached property from a target element.

public : static int GetColumnSpan(UIElement element)public static int GetColumnSpan(UIElement element)Public Static Function GetColumnSpan(element As UIElement) As int// This API is not available in Javascript.
Parameters
element
UIElement UIElement UIElement UIElement

The target element.

Returns
int int int int

The obtained value.

Remarks

For more info, see the VariableSizedWrapGrid.ColumnSpan attached property.

See Also

GetRowSpan(UIElement) GetRowSpan(UIElement) GetRowSpan(UIElement) GetRowSpan(UIElement)

Gets the value of the VariableSizedWrapGrid.RowSpan XAML attached property from a target element.

public : static int GetRowSpan(UIElement element)public static int GetRowSpan(UIElement element)Public Static Function GetRowSpan(element As UIElement) As int// This API is not available in Javascript.
Parameters
element
UIElement UIElement UIElement UIElement

The target element.

Returns
int int int int

The obtained value.

Remarks

For more info, see the VariableSizedWrapGrid.RowSpan attached property.

See Also

SetColumnSpan(UIElement, Int32) SetColumnSpan(UIElement, Int32) SetColumnSpan(UIElement, Int32) SetColumnSpan(UIElement, Int32)

Sets the value of the VariableSizedWrapGrid.ColumnSpan XAML attached property on a target element.

public : static void SetColumnSpan(UIElement element, int value)public static void SetColumnSpan(UIElement element, Int32 value)Public Static Function SetColumnSpan(element As UIElement, value As Int32) As void// This API is not available in Javascript.
Parameters
element
UIElement UIElement UIElement UIElement

The target element.

value
int Int32 Int32 Int32

The value to set.

Remarks

For more info, see the VariableSizedWrapGrid.ColumnSpan attached property.

See Also

SetRowSpan(UIElement, Int32) SetRowSpan(UIElement, Int32) SetRowSpan(UIElement, Int32) SetRowSpan(UIElement, Int32)

Sets the value of the VariableSizedWrapGrid.RowSpan XAML attached property on a target element.

public : static void SetRowSpan(UIElement element, int value)public static void SetRowSpan(UIElement element, Int32 value)Public Static Function SetRowSpan(element As UIElement, value As Int32) As void// This API is not available in Javascript.
Parameters
element
UIElement UIElement UIElement UIElement

The target element.

value
int Int32 Int32 Int32

The value to set.

Remarks

For more info, see the VariableSizedWrapGrid.RowSpan attached property.

See Also

See Also