Using the Xamarin Forms InputTransparent Property

The Xamarin.Forms.VisualElement class has a property called InputTransparent, that:

Gets or sets a value indicating whether this element should be involved in the user interaction cycle.

The documentation states:

When set to true, the element will be able to receive input.  false if element should not receive input and should pass inputs to the element below. Default is true.

I am not totally sure this is how it is currently working, at least in my experiences. There was a thread on the Xamarin Forms Forum recently and Adam Kemp stated that:

More precisely, I think what it does is cause that view to ignore touches, which allows the parent to handle it instead.

This is a more correct statement, based on my experiences as well.  Assuming we are just dealing with a documentation issue, let’s jump into a real-world example.

An Example:

One of my current apps has a voting icon that contains a counter, which you can see below:

image

There are three views involved here:

InputTransparent

The image actually has a TapGestureRecognizer associated with it whose purpose is to increment the counter.

You run into an issue because the ContentView hosting the counter is actually sitting on top of the image, as you can see from the code below:

         grid.Children.Add(imageVote, 2, 0);
         grid.Children.Add(contentVote, 2, 0);

In this configuration, I found that the image was not receiving the tap from the user. To correct this issue, I had to add:

 InputTransparent = true,

to both the counter Label  and to the ContentView itself. This allow the tap gesture to flow through to the image and the counter increments each time the images is tapped.

Note:  This project is using Xamarin Forms 1.4.2 and I can confirm that the code works the same on iOS and Android but there were bug reports in prior versions of Xamarin Forms that seem to indicate the InputTransparent property had issues on Android.

If anyone has any additional of differing information, then please leave a comment on this post.