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.
https://gist.github.com/ChrisFlannagan/ca79529e943350c093f33e13023a03c7
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.
I set the width to the parent element width, this way I know it will translate to different screen sizes. I get the parent width in my javascript file then set it using this variable parentWidth.
Each image can be turned on or off by setting the visibility to collapsed or visible. This is controlled in the javascript by the binding object along with the width. See below:
https://gist.github.com/ChrisFlannagan/c94006689d4783f6667169d53e4f7beb
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).
Gestures
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.