CODEWITHSUNDEEP
c#xamlxamarin.forms
Nick
Nick

Reputation: 155

Render an image and overlaid controls in exact pixels?

I have a background image that consists of an outline, with 10 rectangles placed specifically on the outline. I want to display that image on the screen, and overlay transparent buttons that match up to the rectangles on the image. When the button is pressed, the button's outline will turn to orange to indicate the rectangle has been selected.

I'm finding that simply setting the width and height of the buttons to match the pixel width and height of the rectangles in the image always renders a button much larger than the corresponding rectangle.

The image itself is 669 x 871px, and the rectangles are all 87 x 143px. Setting the Image's WidthRequest and HeightRequest in code or in XAML seems to render it at a different resolution than it actually is, thereby leading to the issue I described - if a button's size is set to 87 x 143 (again using HeightRequest and WidthRequest) it always renders larger than the rectangle.

Furthermore, if I contain the buttons in a StackLayout (as I often need to do) and specify a margin to push the layout downwards to align with the rectangles on the image, again the correct number of pixels never matches up with the distance the layout is moved.

I'm aware of how to overlay elements using a Grid with a single row and column and simply defining multiple layouts in the same space and triggering visibility in code. What I don't know how to do is display the elements in exactly the right pixel sizes that I need for the controls to always align with the image.

The diagram I'm working with: enter image description here

Desired behaviour:

enter image description here

Actual behaviour:

enter image description here

Upvotes: 0

Views: 165

Answers (1)

Nick
Nick

Reputation: 155

I've worked out how to do this by using Grids within a Grid. By setting the Grid's row and column height and width to "*" (use all available space), defining a ContentView containing the diagram, then several smaller grids to lay over the top with their row height and column width matching the dimensions of the diagram image (i.e. if the image is 600 pixels wide, the nested Grid's ColumnDefinition's Width="600"),

I was then able to define the buttons inside a StackLayout, inside the nested Grids. I've tried this out across a few different resolutions and it seems to work just fine for my purposes.

I had to set Padding to 0, and used the Margin to vertically align the StackLayout as needed (i.e. for the first row of buttons at the top of the diagram, their StackLayout's Margin was "19,89,19,0" - 19 pixels from either side, 89 pixels from the top).

Upvotes: 0

Related Questions