Say you have an image of a face in your app. There are multiple quadrants you want a user to be able to select. When they select, it should highlight that area. You want the user to have the ability to select any combination of these quadrants.
Stacking Images In AbsoluteLayout
Let’s go over the xml layout first. I accomplished this task using an AbsoluteLayout with four Image views inside it like so.
Notice I set the width to 100% but not height. In my full code the height is set in a GridLayout for row 3, but you can set height to 100% or a pixel amount.
I placed a plain face photo as the background for the AbsoluteLayout. Then I have four images for different quadrants of the face. These have their absolute position set to 0px top and 0px left. My overlaying images are the exact same size as the background image of my AbsoluteLayout so I want them to fit exactly over top.
When the page is loaded I set my initial variables in pageData then turn that Observable into the binding data for the page. So initially all images will be collapsed (turned off).
Next I set gesture detection to my AbsoluteLayout that has been given the id “main-layout” and attached to the variable “quad.” I measure where the touch took place then if it’s in an images quadrant it toggles the collapsed/visible state. The images are all positioned absolutely so they layer on top of each other.