How to build a curved gallery in Power Apps

tl;dr

Galleries in Power Apps do not have to look boring. With a little creativity we can create a curve effect.

gallery

1. Upload a few images
2. Add a horizontal gallery gal
3. Set the ShowScrollbar property to false
4. Set its items property to

Table(
{
id: 1,
image: 'image1',
title: "image1"
},
{
id: 2,
image: 'image2',
title: "image2"
},
{
id: 3,
image: 'image3',
title: "image3"
},
{
id: 4,
image: 'image4',
title: "image4"
},
{
id: 5,
image: 'image5',
title: "image5"
},
{
id: 6,
image: 'image6',
title: "image6"
},
{
id: 7,
image: 'image7',
title: "image7"
},
{
id: 8,
image: 'image8',
title: "title8"
}
)

3. Add an image img to the gallery, set its Image property to ThisItem.image
4. Add a button to the gallery, (I liked it to be semi transparent) and set its X to img.X and its Width* to img.Width
5. Set its Text property to ThisItem.title

ovals

1. Add two ovals to your screen, set their Width to gal.Width, set their Y property that the ovals slightly overlap with the gallery (depending on how intense you want the curve effect to look like)
2. Set the Fill property to Screen1.Fill and their BorderColor to Transparent - voila, they seem to be invisible

slider

As we don’t show a scrollbar (I find the built-in scrollbar ugly), we will add a slider with which we can scroll through our gallery

1. Add a horizontal slider
2. Place it on top of the gallery, matching its size
3. Set the HandleSize to gal.TemplateHeight
4. Set its Min to (gal.TemplateWidth*CountRows(gal.AllItems)-gal.Width-gal.TemplateWidth)*-1, its Max to gal.Width-gal.TemplateWidth, and its Default to Self.Max
5. Now set all color values to Transparent - we want to make the slider disappear. Don’t set the visible property to false - users can’t interact then with the control anymore

One last thing: Set the X property of the image in the gallery to slider.Value

That’s it!

Feedback and what’s next?

I’d like to know what you would like to display in such a curved gallery? Preview of documents? Images of assets? Also: did you know that you could use a slider to scroll through a gallery? Let me know on twitter! If you found this blog post useful, please also subscribe to my newsletter - news coming about every 2 months, I promise to not spam you!