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

Question

我用过Rg.Plugins.Popup。我已经对齐了关闭按钮，该按钮在右上角 window 之外的右上角对齐了 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>

我需要更改哪些代码才能在用户单击 window 之外的关闭按钮部分时关闭弹出窗口？

Answer 1

我猜你想实现这个：

在黄色框外单击将关闭所有内容。

红色部分有GestureRecognizer

您可以通过使用网格或绝对布局来实现此目的，这些视图允许您“堆叠”或向 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>

在后面的代码中，您将元素的可见性 on/off 设为

Answer 2

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

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

现在关闭按钮包含在 AbsoluteLayout 中，整个关闭按钮区域将接收和引发 taps/clicks 的事件。

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

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

xaml

popup

xamarin

xamarin.forms