首页 > 解决方案 > 无法关闭 Xamarin Forms 中单击事件的弹出窗口

问题描述

我用过 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>

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

标签: xamlxamarinxamarin.formspopup

解决方案


问题是关闭按钮位于<AbsoluteLayout>. 一种解决方案涉及几个步骤:

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

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


推荐阅读