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
- Upload a few images
- Add a horizontal gallery
gal
- Set the ShowScrollbar property to
false
- 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"
}
)
- Add an image
img
to the gallery, set its Image property toThisItem.image
- Add a button to the gallery, (I liked it to be semi transparent) and set its X to
img.X
and its Width* toimg.Width
- Set its Text property to
ThisItem.title
ovals
- 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) - Set the Fill property to
Screen1.Fill
and their BorderColor toTransparent
- 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
- Add a horizontal slider
- Place it on top of the gallery, matching its size
- Set the HandleSize to
gal.TemplateHeight
- Set its Min to
(gal.TemplateWidth*CountRows(gal.AllItems)-gal.Width-gal.TemplateWidth)*-1
, its Max togal.Width-gal.TemplateWidth
, and its Default toSelf.Max
- Now set all color values to
Transparent
- we want to make the slider disappear. Don’t set the visible property tofalse
- 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!
You May Also Like
How to organize your homeoffice with NFC tags and Apple
tl;dr With NFC tags and an iPhone you can quickly build a nice system …
How to use Azure OpenAI with data in your SharePoint libraries
tl;dr We can index documents from a SharePoint library with Azure …
How to add and remove owners from a Power Automate flow with CLI Microsoft 365
tl;dr Using CLI Microsoft 365 you can easily add and remove owners of …