cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ericonline
Community Champion
Community Champion

Gallery Overlay Question

Hi @mr-dang. I'm using a method you or Mehdi showed off a while ago, the "Ol' Gallery with TemplateSize=0" trick. I found something very interesting I was hoping someone could weigh in on.

Setup

  • Gallery (the "overlay")
    • Width: Screen.Width
    • Height: Screen.Height
    • TemplateSize: 0
    • Holds 2 controls, a Label and an Icon (map pin)
  • Image Control set to a map image
    • Underneath the overlay
  • ClearCollect Function when user clicks nav button to get to map screen
    • ClearCollect(colMapPins,
          {region: "System Wide-1", x: 140, y: 180},
          {region: "System Wide-2", x: 140, y: 310},
          {region: "West-1", x: 317, y: 145}, <---
          {region: "West-2", x: 527, y: 139}, <---
          {region: "West-3", x: 460, y: 399},
          {region: "West-4", x: 280, y: 335},
          {region: "East-1", x: 620, y: 240},
          {region: "East-2", x: 775, y: 115}, <---
          {region: "East-3", x: 923, y: 300},
          {region: "East-4", x: 636, y: 455}
      )

Issue:

  • See how "West-1", "West-2", and "East-2" are lined up horizontally in this image YET QUITE DIFFERENT in their Y value above?
  • It is more pronounced the further to the right of the screen the Control moves. 
    • image.png
  • To illustrate even more, I put an Icon control directory over "West-2". It's Y value is quite different than the Collection Y value for "West-2" (+~30px).
    • image.png 

Questions: 

  • My goal is to translate Lat/Longs to pixels based on the mapsize/screensize but this offset is affecting that translation.
  • How are two map pins set to the exact same X, Y in the Collection rendered in different places on the Screen?
  • How come the Collection X, Y values don't match the X, Y values of an Icon placed on the screen?

Thanks for your insights!

11 REPLIES 11

You won't always have a row number in your dataset (for example, I use this method a lot to put overlays on images using data returned as JSON from Cognitive Services Vision API) so here is a trick to generate a RowNum column for any collection. Given your data shown below:

ClearCollect(colMapPins,
    {region: "System Wide-1", x: 140, y: 180},
    {region: "System Wide-2", x: 140, y: 310},
    {region: "West-1", x: 317, y: 145}, 
    {region: "West-2", x: 527, y: 139}, 
    {region: "West-3", x: 460, y: 399},
    {region: "West-4", x: 280, y: 335},
    {region: "East-1", x: 620, y: 240},
    {region: "East-2", x: 775, y: 115}, 
    {region: "East-3", x: 923, y: 300},
    {region: "East-4", x: 636, y: 455}
)

You can do the following (needs be triggered by an action such as OnVisible or OnSelect):

Clear(colMapPinsWithRow);
ForAll(colMapPins,Collect(colMapPinsWithRow, {region: region, x: x, y: y, RowNum:CountRows(colMapPinsWithRow)})

This will give you a new collection adding the column RowNum which will start at 0 and increment 1 for each row.

Use the collection with RowNum for your Gallery's items property. When positioning your icons you can set the Y value (assuming a vertical gallery) to 

ThisItem.y - ThisItem.RowNum

Would be great to really be able to set the templatesize to 0 (if you try it actually reverts back to 1) or have a built-in ability to determine the row number of an item in a gallery, but this trick seems to work.

seadude
Memorable Member
Memorable Member

Awesome contribution Paul!
Thank you!

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (3,959)