Not able to close the popup on click event in Xamarin Forms-CodePudding

I have used Rg.Plugins.Popup. I have aligned close button which is aligned at top right corner 50% outside the window from right and top side as shown in below image.

Now it is showing as per expected design but issue is when I tap on it, only inward part of close button get clicked and outward part is not clickable. So not able to close popup till the time we click that inward part of Close button.

I am sharing my code for more idea.

<ScrollView Orientation="Horizontal">
    <AbsoluteLayout HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Padding="0,0,0,0"
                    Margin="0,0,0,0"
                    Opacity="1">
        <Frame AbsoluteLayout.LayoutBounds="0,0,1,1"
               IsClippedToBounds="True"
               AbsoluteLayout.LayoutFlags="All"
               HasShadow="False"
               x:Name="outframe"
               Margin="0"
               CornerRadius="15"
               Padding="0"
               OutlineColor="#ffffff"
               HorizontalOptions="FillAndExpand"
               VerticalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal"
                         x:Name="stkVideo"
                         Padding="0">
                <Image x:Name="ximage"
                       Aspect="AspectFill"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       BackgroundColor="#4A4541" />
                <video:VideoPlayer x:Name="trainingPlayer"
                                   DisplayControls="True"
                                   FillMode="ResizeAspectFill"
                                   FlowDirection="LeftToRight"
                                   Volume="100"
                                   Grid.Row="0"
                                   IsVisible="false">
                </video:VideoPlayer>
            </StackLayout>
        </Frame>
        <ContentView AbsoluteLayout.LayoutBounds="0.50, 0.50, -1, -1"
                     AbsoluteLayout.LayoutFlags="PositionProportional">
            <Image Source="Play.png"
                   HeightRequest="{OnIdiom Phone=70,Tablet=85}"
                   WidthRequest="{OnIdiom Phone=70,Tablet=85}"
                   Aspect="AspectFit"
                   VerticalOptions="Center"
                   HorizontalOptions="Center"
                   x:Name="icnplay" />
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped_1" />
            </ContentView.GestureRecognizers>
        </ContentView>
        <ContentView AbsoluteLayout.LayoutBounds="1.04, -0.09, -1, -1"
                     AbsoluteLayout.LayoutFlags="PositionProportional" >
            <Image Source="close.png" 
                   HeightRequest="{OnIdiom Phone=35,Tablet=45}"
                   WidthRequest="{OnIdiom Phone=35,Tablet=45}"
                   Aspect="AspectFit">
                    <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </Image.GestureRecognizers>
                </Image>
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </ContentView.GestureRecognizers>
        </ContentView>
    </AbsoluteLayout>
</ScrollView>

What code changes do I need to do so that popup get close when user will click on Close button part which is outside the window as well?

CodePudding user response：

I guess that you want to achieve this:

Clicking outside the yellow frame will close the everything.

The red part has a GestureRecognizer

You can achieve this by using a Grid or a Absolute layout, these views allow you to "stack" or add layers to the UI.

Code example:

<AbsoluteLayout
        BackgroundColor="Green"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand">
        <StackLayout AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
            <Button Clicked="Button_Clicked" Text="Coso" />
            <Button Clicked="Button_Clicked_1" Text="Show popup" />
        </StackLayout>
        <Frame
            x:Name="closeFrame"
            AbsoluteLayout.LayoutBounds="1,1,1,1"
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="Red"
            IsVisible="false">
            <Frame.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped" />
            </Frame.GestureRecognizers>
        </Grid>
        <Frame
            x:Name="popupGrid"
            AbsoluteLayout.LayoutBounds="0.5,0.5,0.5,0.5"
            AbsoluteLayout.LayoutFlags="All"
            BackgroundColor="Yellow"
            IsVisible="false">
            <Label Text="Close ouside this" TextColor="Black" />
        </Frame>
    </AbsoluteLayout>

In code behind you turn the visibile on/off of the element

CodePudding user response：

The issue is the close button lies outside the bounds of the <AbsoluteLayout>. One solution involves a few steps:

Make the AbsoluteLayout larger by some amount
Add a margin to the video player Frame equal to how much larger the AbsoluteLayout was made
Update the position of the close button to remain in the top right corner of the video player Frame

Now the close button is contained within the AbsoluteLayout and the entire close button area will receive and raise events for taps/clicks.