Approved
Last Updated: 17 Jul 2018 12:50 by ADMIN
ADMIN
Lance | Technical Support Engineer, Principal
Created on: 28 Jun 2018 20:56
Category: SideDrawer
Type: Bug Report
2
SideDrawer: [UWP] Gesture overhang prevents UI interaction when gestures disabled
Use the following code deployed to UWP to reproduce. Observe the following:

- Inability to interact with the Button (unless you move the button outside the invisible gesture detection area)
- Gestures are still active even though they're disabled

<telerikPrimitives:RadSideDrawer DrawerLength="400"
                                     AreGesturesEnabled="false"
                                     DrawerLocation="Bottom"
                                     DrawerTransitionType="SlideInOnTop"  
                                     DrawerTransitionDuration="0.2"
                                     IsOpen="False">
        <telerikPrimitives:RadSideDrawer.DrawerContent>
            <StackLayout VerticalOptions="FillAndExpand"
                         BackgroundColor="GreenYellow">
                <Label Text="DrawerContent"
                       VerticalOptions="FillAndExpand"/>
            </StackLayout>
        </telerikPrimitives:RadSideDrawer.DrawerContent>
        <telerikPrimitives:RadSideDrawer.MainContent>
            <Grid BackgroundColor="LightBlue">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                
                <Label Text="Demo"
                       VerticalOptions="Fill"/>
                
                <Button VerticalOptions="End"
                        HorizontalOptions="Fill"
                        Text="Click Me!"
                        Clicked="Button_OnClicked"
                        BackgroundColor="LightGray"
                        FontSize="12"
                        HeightRequest="20" 
                        Grid.Row="1"/>
            </Grid>
        </telerikPrimitives:RadSideDrawer.MainContent>
    </telerikPrimitives:RadSideDrawer>
5 comments
ADMIN
Yana
Posted on: 17 Jul 2018 12:50
I am glad I could help.
Daniel
Posted on: 16 Jul 2018 11:56
That does work. Many thanks, Yana!
ADMIN
Yana
Posted on: 13 Jul 2018 10:13
Hi Daniel,

Please try it like this:

public class MySideDrawerRender : SideDrawerRenderer
{        
    protected override void OnElementChanged(ElementChangedEventArgs<RadSideDrawer> e)
    {
        base.OnElementChanged(e);

            if (this.Control != null)
            {
                this.Control.TouchTargetThreshold = 5;
                this.Control.Loaded += OnNativeSideDrawerLoaded;
            }
    }
    private void OnNativeSideDrawerLoaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
    {
        var nativeSideDrawer = (Telerik.UI.Xaml.Controls.Primitives.RadSideDrawer)sender;
        Border swipeBorder = ElementTreeHelper.FindVisualDescendant<Border>(nativeSideDrawer);
        if (swipeBorder != null)
        {
            swipeBorder.IsHitTestVisible = false;
        }

        nativeSideDrawer.Loaded -= this.OnNativeSideDrawerLoaded;
    }
}

Let me know how it goes.

Regards,
Yana
Daniel
Posted on: 13 Jul 2018 06:03
Hi Yana,

many thanks for taking the time and providing a workaround. Unfortunately, it does not solve the problem. I added a custom renderer to my sample project and i still can not click the button at the bottom.

The breakpoint inside the custom renderer is triggered but even if i set the threshold to 0, i can not click the button.

Best regards,

Daniel
ADMIN
Yana
Posted on: 12 Jul 2018 15:05
Hello,

Thank you for reporting this issue. 

As a workaround you could create a custom renderer on UWP and inside it update the TouchTargetThreshold property of the native control to a smaller value.  This property sets the pixels from the screen edge that define the touchable area. Here is a sample renderer:

public class MySideDrawerRender : SideDrawerRenderer
{        
    protected override void OnElementChanged(ElementChangedEventArgs<RadSideDrawer> e)
    {
        base.OnElementChanged(e);

        if (this.Control != null)
            this.Control.TouchTargetThreshold = 5;
    }
}

Additionally, I have logged a feature request for exposing the TouchTargetThreshold property of the Xamarin.Forms implementation of SideDrawer, you could vote for it here: https://feedback.telerik.com/Project/168/Feedback/Details/252094-sidedrawer-expose-touchtargetthreshold-property

Regards,
Yana