xaml - Xamarin.Forms：当顶部有对象（如标签和另一个图像）时捕获单击按钮的最佳方式

Question

在我的应用程序中，我有以下布局：

它是一个 grapcic，ontop 是一个标签，ontop 是另一个图形（也带有另一个标签）。现在我仍然希望人们能够点击按钮。这已经导致标签贴在哪个标签上了。如果你点击标签而不是后面的按钮，什么都不会发生。我通过简单地添加两个点击处理程序来解决这个问题：一个在按钮上，一个在标签上。这至少是一种解决方法。但现在我面临一个更大的问题：

您可以看到这些布局相互重叠。到目前为止，无法单击按钮，因为每个网格上都装订了两个网格（一个包含按钮，一个包含通知）。

只有当我删除通知时，才能再次单击该按钮。但是这个ofc是没有选择的。即使顶部有东西，如何使背景中的按钮可点击？

这是xaml：

<!--Grid for Button-->
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="4*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <ImageButton
                     Aspect="AspectFit"
                     Grid.Column="1"
                     x:Name="btn_mymatches_mainmenu"
                     Source="btn_emptydummy.png" BackgroundColor="#00000000"/>
            <Label
                    Grid.Column="1"
                    FontFamily="arial"
                    TextColor="#272727"
                    Text="Meine Matches" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center"/>

        </Grid>

        <!--Top Level Grid for Notifybutton-->
        <Grid Grid.Row="1" >
            <Grid.RowDefinitions>
                <RowDefinition Height="0.5*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="2*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4.5*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>


            <Image
                Aspect="AspectFit"
                Grid.Column="1"
                Grid.Row="1"
                Source="img_notify.png" />
            <Label
                    x:Name="label_notify_nr"
                    Grid.Column="1"
                    Grid.Row="1"
                    FontSize="16"
                    FontFamily="arial"
                    TextColor="#ffff"
                    Text="1" 
                    HorizontalOptions="Center" 
                    VerticalOptions="Center"/>

        </Grid>

谢谢：）

标签： xamlxamarin.forms

Answer 1

因为你的两个按钮在同一个单元格中，所以通知按钮会覆盖 Grid 的所有空间。

在您的情况下，最好使用AbsoluteLayout

<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">

        <AbsoluteLayout  AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All"  Margin="10,10,10,10">
            <Frame Padding="0" Margin="20,20,20,20" BackgroundColor="Transparent" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
                <Grid Grid.Row="1" >

                    <Grid.RowDefinitions>
                        <RowDefinition Height="60" />
                    </Grid.RowDefinitions>

                    <Frame Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Padding="0" CornerRadius="30">

                        <Button Text="11111" Clicked="Button_Clicked"  BackgroundColor="LightBlue"/>

                    </Frame>


                </Grid>
            </Frame>

            <Frame   AbsoluteLayout.LayoutFlags="PositionProportional"  AbsoluteLayout.LayoutBounds=".8,-.2,50,50" Grid.Row="0" Grid.Column="2"   BackgroundColor="White" Padding="0" CornerRadius="30">

                <Button Text="1" Clicked="Button_Clicked_1"  BackgroundColor="Red" TextColor="White"/>

            </Frame>



        </AbsoluteLayout>



    </StackLayout>