Gallery
Usage
Gallery displays a collection of items in grid, list, or carousel layouts. Perfect for image galleries, product catalogs, or any repeating content.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Items property to your data source (collection, SharePoint, Dataverse, etc.).
4. Map fields in the template (Title, Subtitle, Image, etc.).
Binding Items
Gallery1:
As: gallery
Items: YourDataSource
TemplateSize: 1
Layout: Vertical
Mapping Fields
In the Gallery template, map your data source fields:
- Title: ThisItem.Title or ThisItem.Name
- Subtitle: ThisItem.Description or ThisItem.Category
- Image: ThisItem.Image or ThisItem.Picture
Adding Navigation
To navigate on item click:
Gallery1:
OnSelect: Navigate(DetailScreen, ScreenTransition.Fade, {SelectedItem: ThisItem})
Layout Types
- Grid: Best for image galleries, product grids
- List: Best for text-heavy content, search results
- Carousel: Best for featured items, hero sections
Export Modes
- Safe: Basic gallery scaffold with item template.
- Advanced: Includes layout variants, button in item, overlay caption styles (Pro feature).
Best Practices
- Use grid layout for visual content (images, cards).
- Use list layout for text-heavy content.
- Carousel works best with 3-5 featured items.
- Overlay captions save space but reduce image visibility.