Skip to content

Latest commit

 

History

History
56 lines (40 loc) · 2.24 KB

StaggeredLayout.md

File metadata and controls

56 lines (40 loc) · 2.24 KB
Raw
title author description keywords
StaggeredLayout
skendrot
Arranges child elements into a staggered grid pattern for ItemsRepeater.
windows 10, uwp, windows community toolkit, uwp community toolkit, uwp toolkit, StaggeredLayout, layout, itemsrepeater

StaggeredLayout

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.

[!div class="nextstepaction"] 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