Loading...

How to create your own scrollbar for galleries in Power Apps

How to create your own scrollbar for galleries in Power Apps

tl;dr

Did you know that two buttons and a slider make a sweet scrollbar? Let me show you how to do it!

curved gallery

In my last blog post about How to build a curved gallery in Power Apps I already showed how you can use a slider to scroll through a horizontal gallery, and we hid that slider. This post shall show you how you can create your own scrollbar to navigate a vertical gallery.

To make this as flexible and reuasable as possible, we will componentize this.

create a component

  1. Create a new component cmp_scrollGallery and add the following custom properties to it:

galleryStyles (Record): {X:0,Y:0,Width:cmp_scrollGallery.Width,Height:cmp_scrollGallery.Height}

galleryContent (Table):

Table({id:1,image:'image1',title:"Lake Tahoe",description:"d1"},{id:2,image:'image2',title:"Trees",description:"d2"},{id:3,image:'image3',title:"Waterfall",description:"d3"},{id:4,image:'image4',title:"Lake Louise",description:"d4"},{id:5,image:'image5',title:"Santa Barbara",description:"d5"},{id:6,image:'image6',title:"Ocean",description:"d6"},{id:7,image:'image7',title:"Beaver Dam",description:"d7"},{id:8,image:'image8',title:"Green",description:"d8."})

sizeWidth (Number): App.DesignWidth

sizeHeight (Number): App.DesignHeight

sliderStyles (Record): {X:cmp_scrollGallery.Width,Y:0,Width:50,Height:cmp_scrollGallery.Height}

backgroundBarColor (Color): ColorValue("#168aad")

scrollBarColor (Color): ColorValue("#1e6091")

scrollbarStyles (Record): {X:cmp_scrollGallery.galleryStyles.Width-20,Y:0,Width:20,Height:cmp_scrollGallery.Height}

titleStyles (Record): {Font: Font.'Open Sans', FontSize: 16, FontWeight: Bold, Color: White, Width: cmp_scrollGallery.galleryStyles.Width*0.5, Height:40, X: cmp_scrollGallery.imageStyles.X+cmp_scrollGallery.imageStyles.Width +40 } |

imageStyles (Record): {Width:128, Height: 128, BorderTopLeft: 0, BorderTopRight: Self.Width, BorderBottomLeft: 0, BorderBottomRight:0,X: 16}

bodyStyles (Record):{Font: Font.'Open Sans', FontSize: 12, FontWeight: Lighter, Color: White, Width: cmp_scrollGallery.galleryStyles.Width*0.7, Height:40, X: cmp_scrollGallery.imageStyles.X+cmp_scrollGallery.imageStyles.Width +40 }

  1. Set the Width of the component to cmp_scrollGallery.sizeWidth and the Height to cmp_scrollGallery.sizeHeight

We will now add a gallery and refer to our custom properties.

  1. Upload a few images
  2. Add a horizontal gallery gal_1
  3. Set the ShowScrollbar property to false
  4. Set its items property to cmp_scrollGallery.galleryContent
  5. X: cmp_scrollGallery.galleryStyles.X, Y: cmp_scrollGallery.galleryStyles.Y, Height: cmp_scrollGallery.galleryStyles.Height, Width: cmp_scrollGallery.galleryStyles.Width
  1. Add an image img to the gallery, set its Image property to ThisItem.image
  2. X: 16, Width: cmp_scrollGallery.imageStyles.Width, Height: cmp_scrollGallery.imageStyles.Height
  3. 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`
  4. RadiusTopRight: cmp_scrollGallery.imageStyles.BorderTopRight, all other Radius… properties shall be 0 - this creates this quarter circle effect
  5. TemplatePadding: 20, TemplateSize: 140
  1. Add a text label lbl_title
  2. X: cmp_scrollGallery.TitleStyles.X, Y: img.Y, Width: cmp_scrollGallery.TitleStyles.Width, Height: 40
  3. Color: cmp_scrollGallery.TitleStyles.Color, Font: cmp_scrollGallery.TitleStyles.Font, FontWeight: cmp_scrollGallery.TitleStyles.FontWeight, Size: cmp_scrollGallery.TitleStyles.FontSize
  4. Set its Text property to ThisItem.title
  1. Add a text label lbl_description
  2. X: cmp_scrollGallery.bodyStyles.X, Y: img.Y, Width: cmp_scrollGallery.bodyStyles.Width, Height: 40
  3. Color: cmp_scrollGallery.bodyStyles.Color, Font: cmp_scrollGallery.bodyStyles.Font, FontWeight: cmp_scrollGallery.bodyStyles.FontWeight, Size: cmp_scrollGallery.bodyStyles.FontSize
  4. Set its Text property to ThisItem.description

Now that we have the gallery, lets make it scrollable. We will add a slider control and hook this the Y property of the image. 💡 The Y property of all other controls in the gallery depends on img.Y

slider

  1. Add a vertical slider sli_gal
  2. X: cmp_scrollGallery.sliderStyles.X-Self.Width, Y: cmp_scrollGallery.sliderStyles.Y, Height: cmp_scrollGallery.sliderStyles.Height, Width: cmp_scrollGallery.sliderStyles.Width
  3. Set its Min to gal_1.TemplatePadding+btn_ScrollBar.Height/2, its Max to gal_1.Height+gal_1.TemplatePadding-btn_ScrollBar.Height/2 and its Default to 50
  4. Set the HandleSize to 50
  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

Now the most important step: Go back to img.Y and set it to sli_gal.Value-gal_1.Height+gal_1.TemplatePadding. You can now move the hidden handle and see that the items in the gallery in fact scroll :-)

Now we want to add the scroll bar:

2 buttons

Yes, for real. Our scrollbar only consists of two buttons, one for the background bar and one for the actual scroll bar

background bar

  1. Add a button btn_backgroundBar, set its DisplayMode to View, we don’t want users to interact with it.
  2. X: cmp_scrollGallery.scrollbarStyles.X, Y: 0, Height: cmp_scrollGallery.Height, Width: 20
  3. Fill: cmp_scrollGallery.backgroundBarColor

scroll bar

  1. Add a button btn_scrollBar, set its DisplayMode to View
  2. X: cmp_scrollGallery.scrollbarStyles.X, Y: sli_gal.Height-sli_gal.Value+Self.Height/2-gal_1.TemplatePadding, Height: 40, Width: 20
  3. Fill: cmp_scrollGallery.scrollBarColor

As a last step, rearrange the controls so that the slider is on top

scrollbar and gallery

Feedback and what’s next?

Who would have thought that its that easy to create your own custom scrollbar? Adjust sizes and colors as you please, and let me know on twitter how you like it! 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!

Published on:

Learn more
Luise Freese: Consultant & MVP
Luise Freese: Consultant & MVP

Recent content on Luise Freese: Consultant & MVP

Share post:

Related posts

🔓 Understanding the “Access app scope” Feature in Canvas App Components (Power Apps)

💡 Introduction In Power Apps Canvas Apps, components play a crucial role in building reusable UI and logic blocks. However, traditionally, co...

4 days ago

Using Form fill Assist Toolbar to streamline data entry in Power Apps

We tried the AI Form Filling Assistance feature in model-driven Power Apps and found it very helpful. One part that we liked the most was the ...

11 days ago

Improving the UI of Canvas Power Apps with AI

Copilot is not (yet) capable of making Canvas Power Apps for us (Yes, I have tested the new Plan designer as well as the current Power Apps co...

20 days ago

What’s new in Power Apps: May 2025 Feature Update

Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...

27 days ago

What’s new in Power Apps: May 2025 Feature Update

Build 2025 Sessions We had a great set of sessions at Microsoft Build, you can watch the recordings on demand to catch up! AI-powered Developm...

27 days ago
Stay up to date with latest Microsoft Dynamics 365 and Power Platform news!
* Yes, I agree to the privacy policy