Did you ever come across the situation where you needed to make use of a rating bar, but the PowerApps provided star rating didn’t suffice? If that’s the case, I will guide you through the steps to create one without one single line of ‘nasty’ code.
Do you remember this blog post which outlined the steps to create a custom rating bar? So I thought, why not try the same approach but with a little twist.
One we’ve followed through al the steps, the end result should be like this:
First we need to create the Heart shapes. For this I didn’t have too look very far. I simply used PowerPoint Icons! PowerPoint offers a whole set of icons:
In PowerPoint I formatted the 2 icon shapes:
- One Heart with the red Solid Fill
- One Heart with the red Outline and No Fill
Once we have formatted the icon shapes in PowerPoint, we save them as PNG or JPEG images on a preferred location. I have to say that I try to use PNG images as much as possible, as these are very small in size. Import these into PowerApps:
Next we build the layout in PowerApps. The layout consists of:
- Top Layer: Gallery Control with Image Control
- Middle Layer: Rectangle Shape
- Bottom Layer: Gallery Control with Image Control
- Slider Control (Minimal Value 1, Maximum Value 10)
Once these are in place, you should have the following layout:
Once we move the slider, the Middle Layer (rectangle shape) should behave as follows:
The next step is moving the layers on top of one another. Once we move the slider, you should have the following effect:
The final step is setting the Middle Layer Fill equal to Screen Fill. This will result in the following effect:
So there you have it! You can use the same approach in other scenario’s.