VariableSizedWrapGrid VariableSizedWrapGrid VariableSizedWrapGrid Class

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

Syntax

Declaration

public sealed class VariableSizedWrapGridpublic sealed class VariableSizedWrapGridPublic NotInheritable Class VariableSizedWrapGrid
<VariableSizedWrapGrid ...>
  oneOrMoreUIElements
</VariableSizedWrapGrid>
-or-
<VariableSizedWrapGrid .../>

Inheritance Hierarchy

Inherited Members

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

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 RowSpanProperty and ColumnSpanProperty 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(Windows.UI.Xaml.UIElement) and SetRowSpan(Windows.UI.Xaml.UIElement,System.Int32) 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(Windows.UI.Xaml.DependencyProperty) or SetValue(Windows.UI.Xaml.DependencyProperty,System.Object), 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 summary

Initializes a new instance of the VariableSizedWrapGrid class.

Properties summary

Identifies the ColumnSpanProperty XAML attached property.

Gets or sets the alignment rules by which child elements are arranged for the horizontal dimension.

Identifies the HorizontalChildrenAlignment dependency property.

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

Identifies the ItemHeight dependency property.

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

Identifies the ItemWidth dependency property.

Gets or sets a value that influences the wrap point, also accounting for Orientation.

Identifies the MaximumRowsOrColumns dependency property.

Gets or sets the direction in which child elements are arranged.

Identifies the Orientation dependency property.

Identifies the RowSpanProperty XAML attached property.

Gets or sets the alignment rules by which child elements are arranged for the vertical dimension.

Identifies the VerticalChildrenAlignment dependency property.

Methods summary

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

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

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

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

Constructors

  • VariableSizedWrapGrid()
    VariableSizedWrapGrid()
    VariableSizedWrapGrid()
    VariableSizedWrapGrid()

    Initializes a new instance of the VariableSizedWrapGrid class.

    public VariableSizedWrapGrid()public VariableSizedWrapGrid()Public Function VariableSizedWrapGrid() As

Properties

  • ColumnSpanProperty
    ColumnSpanProperty
    ColumnSpanProperty
    ColumnSpanProperty

    Identifies the ColumnSpanProperty XAML attached property.

    public static DependencyProperty ColumnSpanProperty { get; }public static DependencyProperty ColumnSpanProperty { get; }Public Static ReadOnly Property ColumnSpanProperty As DependencyProperty

    Property Value

  • 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
    <VariableSizedWrapGrid HorizontalChildrenAlignment="horizontalAlignmentMemberName" />
    

    Property Value

  • 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

    Property Value

  • 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
    <VariableSizedWrapGrid ItemHeight="double" />
    -or-
    <VariableSizedWrapGrid ItemHeight="Auto" />
    
    

    Property Value

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

  • 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

    Property Value

  • 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
    <VariableSizedWrapGrid ItemWidth="double" />
    -or-
    <VariableSizedWrapGrid ItemWidth="Auto" />
    

    Property Value

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

  • 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

    Property Value

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

    Property Value

    • 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

    Property Value

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

    Property Value

    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

    Property Value

  • RowSpanProperty
    RowSpanProperty
    RowSpanProperty
    RowSpanProperty

    Identifies the RowSpanProperty XAML attached property.

    public static DependencyProperty RowSpanProperty { get; }public static DependencyProperty RowSpanProperty { get; }Public Static ReadOnly Property RowSpanProperty As DependencyProperty

    Property Value

  • 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
    <VariableSizedWrapGrid VerticalChildrenAlignment="verticalAlignmentMemberName" />
    

    Property Value

  • 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

    Property Value

Methods

  • GetColumnSpan(Windows.UI.Xaml.UIElement)
    GetColumnSpan(Windows.UI.Xaml.UIElement)
    GetColumnSpan(Windows.UI.Xaml.UIElement)
    GetColumnSpan(Windows.UI.Xaml.UIElement)

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

    public static int GetColumnSpan(Windows.UI.Xaml.UIElement element)public static int GetColumnSpan(Windows.UI.Xaml.UIElement element)Public Static Function GetColumnSpan(element As Windows.UI.Xaml.UIElement) As int

    Parameters

    Returns

    • int
      int
      int

      The obtained value.

    Remarks

    For more info, see the ColumnSpanProperty attached property.

  • GetRowSpan(Windows.UI.Xaml.UIElement)
    GetRowSpan(Windows.UI.Xaml.UIElement)
    GetRowSpan(Windows.UI.Xaml.UIElement)
    GetRowSpan(Windows.UI.Xaml.UIElement)

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

    public static int GetRowSpan(Windows.UI.Xaml.UIElement element)public static int GetRowSpan(Windows.UI.Xaml.UIElement element)Public Static Function GetRowSpan(element As Windows.UI.Xaml.UIElement) As int

    Parameters

    Returns

    • int
      int
      int

      The obtained value.

    Remarks

    For more info, see the RowSpanProperty attached property.

  • SetColumnSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetColumnSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetColumnSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetColumnSpan(Windows.UI.Xaml.UIElement,System.Int32)

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

    public static void SetColumnSpan(Windows.UI.Xaml.UIElement element,System.Int32 value)public static void SetColumnSpan(Windows.UI.Xaml.UIElement element,System.Int32 value)Public Static Function SetColumnSpan(element As Windows.UI.Xaml.UIElement,value As System.Int32) As void

    Parameters

    Remarks

    For more info, see the ColumnSpanProperty attached property.

  • SetRowSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetRowSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetRowSpan(Windows.UI.Xaml.UIElement,System.Int32)
    SetRowSpan(Windows.UI.Xaml.UIElement,System.Int32)

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

    public static void SetRowSpan(Windows.UI.Xaml.UIElement element,System.Int32 value)public static void SetRowSpan(Windows.UI.Xaml.UIElement element,System.Int32 value)Public Static Function SetRowSpan(element As Windows.UI.Xaml.UIElement,value As System.Int32) As void

    Parameters

    Remarks

    For more info, see the RowSpanProperty attached property.

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.Foundation.Metadata.ActivatableAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute

Details

Assembly

Windows.UI.Xaml.Controls.dll