Example: Scrolling Item Grid

Contributed by focustense

• Bindings
• Repeaters
• Grid
• Scrolling

Simple grid showing a large number of items inside a scrollable container. This is the same example as the one on the home page.

DemoEdiblesViewModel.csScrollableItemGrid.sml

internal record EdiblesViewModel(string HeaderText, ParsedItemData[] Items)
{
    public static EdiblesViewModel LoadFromGameData()
    {
        int[] edibleCategories = [
            StardewValley.Object.CookingCategory,
            StardewValley.Object.EggCategory,
            StardewValley.Object.FishCategory,
            StardewValley.Object.FruitsCategory,
            StardewValley.Object.meatCategory,
            StardewValley.Object.MilkCategory,
            StardewValley.Object.VegetableCategory,
        ];
        var items = ItemRegistry.ItemTypes
            .Single(type => type.Identifier == ItemRegistry.type_object)
            .GetAllIds()
            .Select(id => ItemRegistry.GetDataOrErrorItem(id))
            .Where(data => edibleCategories.Contains(data.Category))
            .ToArray();
        return new("All Edibles", items);
    }
}

<lane orientation="vertical" horizontal-content-alignment="middle">
    <banner background={@Mods/StardewUI/Sprites/BannerBackground}
            background-border-thickness="48,0"
            padding="12"
            text={HeaderText} />
    <frame layout="880px 640px"
           margin="0,16,0,0"
           padding="32,24"
           background={@Mods/StardewUI/Sprites/ControlBorder}>
        <scrollable peeking="128">
            <grid layout="stretch content"
                  item-layout="length: 64"
                  item-spacing="16,16"
                  horizontal-item-alignment="middle">
                <image *repeat={Items}
                       layout="stretch content"
                       sprite={this}
                       tooltip={DisplayName}
                       focusable="true" />
            </grid>
        </scrollable>
    </frame>
</lane>