Edit

Share via

StaggeredLayout

  • Article

The StaggeredLayout virtualizes layout of items in a column approach where an item will be added to whichever column has used the least amount of space.

Try it in the sample app

Syntax

<winui:ItemsRepeater>
    <winui:ItemsRepeater.Layout>
        <controls:StaggeredLayout />
    </winui:ItemsRepeater.Layout>
    <winui:ItemsRepeater.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Thumbnail}"/>
        </DataTemplate>
    </winui:ItemsRepeater.ItemTemplate>
</winui:ItemsRepeater>

Sample Output

StaggeredLayout

Properties

Property Type Description
DesiredColumnWidth double The desired width of each column. The width of columns can exceed the DesiredColumnWidth if the HorizontalAlignment is set to Stretch.
ColumnSpacing double Gets or sets the distance between columns
RowSpacing double Gets or sets the vertical distance between items

Sample Project

StaggeredLayout Sample Page. You can see this in action in the Windows Community Toolkit Sample App.

Requirements

Device family Universal, 10.0.17134.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls
NuGet package Microsoft.Toolkit.Uwp.UI.Controls.Layout

API