无法关闭 Xamarin Forms 中单击事件的弹出窗口

Question

我使用了 Rg.Plugins.Popup。 我已经对齐关闭按钮，该按钮从右侧和顶部对齐在窗口外 50% 的右上角，如下图所示。

现在它按照预期的设计显示，但问题是当我点击它时，只有关闭按钮的内部部分被点击，而外部部分不可点击。所以直到我们点击关闭按钮的内部部分时才能关闭弹出窗口。

我正在分享我的代码以获得更多想法。

<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>

当用户点击窗口外的关闭按钮部分时，我需要做哪些代码更改才能关闭弹出窗口？

Answer 1

问题是关闭按钮位于<AbsoluteLayout> 的范围之外。一种解决方案涉及几个步骤：

1. 使 AbsoluteLayout 大一些
2. 为视频播放器帧添加一个边距，该边距等于 AbsoluteLayout 的大小
3. 更新关闭按钮的位置，使其保持在视频播放器框架的右上角

现在关闭按钮包含在 AbsoluteLayout 中，整个关闭按钮区域将接收并引发点击/点击事件。

Answer 2

我猜你想实现这个：

在黄框外点击会关闭一切。

红色部分有一个 GestureRecognizer

您可以通过使用 Grid 或 Absolute 布局来实现这一点，这些视图允许您“堆叠”或向 UI 添加层。

代码示例：

<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>

在您后面的代码中打开/关闭元素的可见性