How to make Xamarin bubble up gestures - xamarin

Question

I'm currently in the process of developing a SideDrawer for Xamarin.Forms, because at this point, the one from telerik is rather awful sideeffect-wise.
I know how to do this in WPF, since it's rather easy, but in Xamarin it's way different.
My code for the GestureFrame is pretty much the same as this.
I've used the sources at some github project/xamarin docs/XLabs to get started. At first it was going well, but as soon as i'm placing controls within the gestureframe i will not receive any events anymore, because the childcontrols appear to consume any touch/gesture events there are.
Does this ring a bell to anyone? Right now i'm not sure what i might be doing wrong for the control to behave this way

Answer 1

The Only Gestures that Xamarin Forms handles currently are Tap and DoubleTap these bubble up by default. For Android, Windows and presumably IOS each handle other gestures differently.
Quick Review of Event Handling in the Xamarin.Forms world:
On Android
Gestures are handled by the Renderer each renderer has a Touch event. Touch is raised in the renderer when a gesture occurs. By subscribing to the Touch event and intupreting the EventArgs you can determine what is happening on the screen. Now you could make all the determinations yourself of what the user is doing or use the Mono.Android.GestureDetector to make those decisions for you. GestureDetector requires a GestureListener which it notifies when it believes an event like a tap or double have occured. Your Gesture listener can then contain whatever code you want to respond to these events.
On Windows
Each native control determines for itself When an event has occurred and exposes a set of EventHandlers for those events. To respond to these events you create a custom renderer and subscribe to the events on the native controls that then execute your own code.
On IOS?
Don't know yet haven't got that far in my project https://github.com/Indiponics/IndiXam-Lib maybe someone else can give you that piece.
Bubbling up the Events
Lets look at a simple bubbling situation:
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new ContentPage
{
Content = new Frame
{
Content =
new Label {
Text = "Hold Me, Thrill Me, Kiss Me"
}
}
};
}
}
Lets put some Custom Renderers together and look at whats happening. To start with we'll need a renderer for every control in the stack so in our case a Label Renderer and a Frame Renderer.
We'll Start with Windows:
[assembly: ExportRenderer(typeof(Label), typeof(myLabelCustomRenderer))]
[assembly: ExportRenderer(typeof(Frame), typeof(myFrameCustomRenderer))]
namespace App4.WinPhone
{
public class myFrameCustomRenderer:FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e)
{
base.OnElementChanged(e);
if(e.NewElement!=null)
{
this.Control.Hold += Control_Hold;
}
}
void Control_Hold(object sender, System.Windows.Input.GestureEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Frame Held");
e.Handled = false;
}
}
public class myLabelCustomRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Label> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
this.Control.Hold += Control_Hold;
}
}
void Control_Hold(object sender, System.Windows.Input.GestureEventArgs e)
{
System.Diagnostics.Debug.WriteLine("Label Held");
e.Handled = false;
}
}
}
Running this we find that
Bubbling actually occurs by default in windows. If we wanted we could turn off bubbling by changing
e.Handled = true;
In our Label Renderer and the frame would never get notified of the Hold Event.
Now For Android
On Android things get a bit messier. Again we'll create two renderers.
[assembly: ExportRenderer(typeof(Label), typeof(myLabelCustomRenderer))]
[assembly: ExportRenderer(typeof(Frame), typeof(myFrameCustomRenderer))]
namespace App4.Droid
{
public class myFrameCustomRenderer : FrameRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
this.Touch += myFrameCustomRenderer_Touch;
}
}
void myFrameCustomRenderer_Touch(object sender, Android.Views.View.TouchEventArgs e)
{
System.Diagnostics.Debug.WriteLine("You Touched My Frame");
e.Handled = false;
}
}
public class myLabelCustomRenderer : LabelRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Label> e)
{
base.OnElementChanged(e);
if (e.NewElement != null)
{
this.Touch += myFrameCustomRenderer_Touch;
}
}
void myFrameCustomRenderer_Touch(object sender, Android.Views.View.TouchEventArgs e)
{
System.Diagnostics.Debug.WriteLine("You Touched My Label");
e.Handled = false;
}
}
}
If we run this it appears that everything works the same as windows we geta touch event in the label and a touch event in the Frame. The bubbling up appears to be automatic. It Gets messy when we attempt to disable bubbling. If we change
e.Handled=true;
in the Label Renderer and run the app again---
Touch fires twice IN THE LABEL RENDERER. Once for when we touch the screen and once for when we stop. If we set the labelrenderer's e.Handled=false; and set the Frame to true. Then the label touch fires followed by the Frame but only the Frame Fires the second time.
In addition if we remove e.Handled=false from both renderer and run the app we find that only the LabelRenderer's Touch event fires. Implying that the default for Handled appears to be true. If you do not set e.Handled=false in the renderer the event will fire in the LabelRenderer and not bubble up the stack to the FrameRenderer.
In Conclusion:
Bubbling works out of the box on Windows. On Android it doesn't work like you might expect. First you have to explicitly set the Handled=false in every child so the parent gets notification and even then only the Handler that Handled the event gets notified that the touch event ended the rest of the stack gets notified of the start but never knows its over.