{Quick Tip} How insert a vertical and horizontal line separator in Power Apps canvas apps?

As the name of the blog suggest, it’s going to be a quick tip and a really short one. But if you are new to Power Apps this might just turn out to be helpful.

We can achieve the requirement in couple of ways. The first way is to use the Rectangle control.

From the Controls gallery, select a Rectangle.

The next step is very simple. You just need to adjust the Height and Width properties of the rectangle control. For example – I want my vertical separator to run through the entire screen. So I set the Height to the following dynamic formula.

Parent.Height

If you need a horizontal separator, you just need to adjust the height and width accordingly. Below is a screenshot of my vertical rectangle in action.

The next way to accomplish this requirement is to use Power Apps icons. Power Apps has quite few icons under it’s belt including support for horizontal and vertical lines. Let’s start with the Vertical line on the screen.

I want the vertical line to run across the screen. So I set it’s height to the formula Parent.Height as shown in the screenshot below

As you do this, you will see the color distribution is not even in the Vertical line. The color is more concentrated in the middle while the without stretching the entire height of the vertical line.

So let’s fix it. The first thing we need to do here is to set the Color of the vertical icon to transparent.

The next step is to set the Fill property.

And after adjusting the width, below is my Vertical Icon in action.

Similarly you have horizontal icon which you can configure the same way.

Hope this helped! You will also like the below posts.

Debajit Dutta
Business Solutions MVP