I have a Grid which will hold four images. The images themselves will be the same size, but the visual part of the image can/will be different (so part of the images will be transparent).
I want the transparent parts of the images to overflow into other cells of the grid.
I also have hit tests on the grid. One for pointer-hover and one for pressed.
How can I get these images in the grid and maintain the overflow and also the hit tests?
So far my solution is to have something like 9 columns, then:
- the first image takes columns 0 to 2,
- the 2nd image takes 2 to 4,
- the 3rd images 4 to 6,
- the 4th images takes 6 to 8.
This way the images overflow. The problem though is that when each subsequent image is added, it goes on top of the shared column, so any mouse hover goes with that.
In WPF you could derive from Image to override HitTestCore; with Metro you can’t do that. My plan was to hit test only non-transparent pixels.
If I can get the hit tests sorted, I can get this method working. Though if there’s another/better solution, I’m all ears?
The solution I went for was to overlay the grid that contained all the images with another grid containing rectangles with the sizes I desired. I could then use the rectangles as hit tests, rather than the underlying images.