Solved: Screen Layouts and Gallerys

legion1202 · ‎06-11-2020

First of this is my first time posting and I want to say hello to everyone in power app land!...

I couldn't find this answer searching the forums or you tube videos so here it goes. I am making a scheduling app for my company and I am throwing around a few designs. The big issue for me right playing around with screen layouts. This app will be used on different size screens and tablets. (I`m hoping anyways)...

I can get rectangles, buttons and other control items to scale with screen sizes but for the love of god I cant get galleries to scale with the screen size.

I ether have waste space on the right of the screen or its way to wide . The gallery that I am using is just a horizontal view of a work week. Monday thru Friday with dates of the current week.

Any help would be great!

Thanks,

Greg

mike528 · ‎06-12-2020

Greg,

Glad that worked. When I do these types of auto-size / auto-location exercists I like to draw it out on a piece of paper and then map my coordinates, helps me visualize but I was a draftsman back in the day (yes that dates me).

If you want to center something then take the width of the area that you have available, lets just say you have the full screen. so App.Width. Then subtract the width of the component (gallery in your case - Gallery.Width) and divide it by 2 (equal spacing on each side). So, what you end up with is an expression in the Gallery.X property of;

(App.Width - Self.Width )/2

You would apply the same for vertical centering using Height in the Gallery.Y property.

(App.Height - Self.Height )/2

To get a bit more complicated but you get the basis of the pattern. Let's say you have 3 objects you wanted evenly distributed across the a screen but the area was between and X of 500 and and X of 1000.

Your available area width is 500. and lets say you want the objects aligned with the left and right edges (no spacing).

The inter-control spacing is (500 - Control1.Width - Control2.Width - Control3.Width)/2

Since you will reuse this spacing in multiple expressions, in the screen Visible you can create a variable to hold the number;

UpdateContext({varControlSpacing: (500 - Control1.Width - Control2.Width - Control3.Width)/2})

Then the X property for each control would be

Control1.X set to 0

Control2.X set to Control1.X + Control1.Width + varControlSpacing

Control2.3 set to Control2.X + Control2.Width + varControlSpacing

Hope this helps you.

Mike

View solution in original post

mike528 · ‎06-11-2020

Hi and welcome to PowerApps 🙂

When I resize galleries I set the size of the gallery first then set the templatesize based on the width of the gallery divided by the number of items I want to be shown, and then size the controls based on the template width. So in your case you might have...

gallery.width = app.width - self.x * 2

which would allow you to center the gallery on the width of the app with equal padding, don't move the gallery, because as soon as you do, PA overwrites your formulas and replaces them with numbers. 😞

then set the gallery.templatesize = self.width / 7

so you have 7 equal sections, one for each day of the week and can turn off navigation and scrollbars.

Hope this helps, have fun with your scheduling app.

legion1202 · ‎06-11-2020

Mike528 thanks for the quick reply...

This makes sense from the documentation I have been reading..

However I am struggling on where to put the gallery.width = app.width - self.x * 2 piece of code?

Thanks,

GA

JayMagness · ‎06-11-2020

Hi,

I actually run all my apps out of teams it takes care of the screen sizes.

I can show examples if you send me an email jay@research-nest.com

mike528 · ‎06-12-2020

Sorry, to clarify

App.Width - Self.X * 2

would be the expression you use in the gallery's width property.

Hope this helps.

legion1202 · ‎06-12-2020

That worked perfectly..

Now if I wanted to center the gallery how could I keep it centered? Would I do something similar with the x and y cords?

I am reading over this https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/create-responsive-layout and its just confusing to me lol.

I`m slowly understand everything else (filters, searchboxes, etc).

I Understand the code... Just not sure where it goes... I would love to use the break point examples and hide or add certain buttons depending on screen limitations. I would suppose it would be a if statement if screen is small or large and that would go into the visible property. But not sure how to get the app to find that out.

Thanks,

Greg

legion1202 · ‎06-12-2020

Thanks JayMagness

May take you up on that offer. We are looking at teams

mike528 · ‎06-12-2020

Greg,

Glad that worked. When I do these types of auto-size / auto-location exercists I like to draw it out on a piece of paper and then map my coordinates, helps me visualize but I was a draftsman back in the day (yes that dates me).

If you want to center something then take the width of the area that you have available, lets just say you have the full screen. so App.Width. Then subtract the width of the component (gallery in your case - Gallery.Width) and divide it by 2 (equal spacing on each side). So, what you end up with is an expression in the Gallery.X property of;

(App.Width - Self.Width )/2

You would apply the same for vertical centering using Height in the Gallery.Y property.

(App.Height - Self.Height )/2

To get a bit more complicated but you get the basis of the pattern. Let's say you have 3 objects you wanted evenly distributed across the a screen but the area was between and X of 500 and and X of 1000.

Your available area width is 500. and lets say you want the objects aligned with the left and right edges (no spacing).

The inter-control spacing is (500 - Control1.Width - Control2.Width - Control3.Width)/2

Since you will reuse this spacing in multiple expressions, in the screen Visible you can create a variable to hold the number;

UpdateContext({varControlSpacing: (500 - Control1.Width - Control2.Width - Control3.Width)/2})

Then the X property for each control would be

Control1.X set to 0

Control2.X set to Control1.X + Control1.Width + varControlSpacing

Control2.3 set to Control2.X + Control2.Width + varControlSpacing

Hope this helps you.

Mike

JayMagness · ‎06-12-2020

Ok I am here so just send a note...

legion1202 · ‎06-12-2020

Makes sense! and worked...

I`ll try to keep this to be my last question and I`ll mark it Solved haha...

Speaking of Variables could I use this to collect screen size information... Then do a if statement depending on the Vars to display cretin screen setups? Or do I trying to use the break points?

Thanks,

GA