.NET MAUI 可以有一个忽略事件的透明覆盖层，但有一个接受事件的子按钮吗？

Question

我们的活动内容顶部有一个覆盖层，其中包含一个按钮。我们希望按钮处于活动状态，而覆盖层其余部分中发生的事件将传递到后面的活动内容。

层次结构看起来像

[App]
  [Window]
    [NavigationPage]
      [OurPage]
        [Grid]
          ActiveContent[StackLayout]
            [ContentView]
          Overlay[ContentView]
            [Grid]
              OverlayButton[ImageButton]

我们尝试切换叠加层上的 InputTransparent 属性，但这意味着叠加层中的叠加按钮不会接收事件。 iOS 有一些针对视图的命中测试方法以及针对手势识别器的方法，可以使其发挥作用。 .NET MAUI 中有类似的东西吗？

Answer 1

您正在寻找的属性是 CascadeInputTransparent，它允许子视图以与其父视图不同的方式注册点击。 在父级上设置 CascadeInputTransparent = false 和 InputTransparent = true ，在子级上设置 InputTransparent = false

Answer 2

.NET MAUI 中有类似的东西吗？

在毛伊岛，您可以尝试将

TapGestureRecognizer

添加到覆盖 ContentView 。

    <!--the overlay  -->
    <ContentView 
             Grid.ColumnSpan="2"
             Grid.RowSpan="3"
             BackgroundColor="Transparent"
             HorizontalOptions="FillAndExpand"
             VerticalOptions="FillAndExpand">
        <ContentView.GestureRecognizers>
            <TapGestureRecognizer Tapped ="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"
            />
        </ContentView.GestureRecognizers>

        <Button  Clicked="Button_Clicked"
                HeightRequest="60"  WidthRequest="100" />
    </ContentView>

我制作了一个demo，实现了类似的功能，可以参考以下代码：

主页.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiTapApp411.MainPage">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <BoxView Color="Green" />
        <Label Text="Row 0, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
        <BoxView Grid.Column="1"
                 Color="Blue" />
        <Label Grid.Column="1"
               Text="Row 0, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <BoxView Grid.Row="1"
                 Color="Teal" />
        <Label Grid.Row="1"
               Text="Row 1, Column 0"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <BoxView Grid.Row="1"
                 Grid.Column="1"
                 Color="Purple" />
        <Button Grid.Row="1"
               Grid.Column="1"
               Text="Row1, Column 1"
               HorizontalOptions="Center"
               VerticalOptions="Center" />

        <!--the overlay  -->
        <ContentView 
                 Grid.ColumnSpan="2"
                 Grid.RowSpan="3"
                 BackgroundColor="Transparent"
                 HorizontalOptions="FillAndExpand"
                 VerticalOptions="FillAndExpand">
            <ContentView.GestureRecognizers>
                <TapGestureRecognizer Tapped ="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"
                />
            </ContentView.GestureRecognizers>

            <Button  Clicked="Button_Clicked"
                    HeightRequest="60"  WidthRequest="100" />
        </ContentView>

    </Grid>
</ContentPage>

MainPage.xaml.cs

public partial class MainPage : ContentPage 
{
      int count = 0;

      public MainPage()
      {
            InitializeComponent();
      }

    private  void Button_Clicked(object sender, EventArgs e)
    {
        doSomething();
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        doSomething();
    }
    private async void doSomething() {
        await DisplayAlert("Alert", "You have been alerted", "OK");
    }
}

注：

从上面的代码中，您可以尝试监听覆盖内容视图的点击事件（例如

TapGestureRecognizer_Tapped

），并将必要的代码添加到函数

TapGestureRecognizer_Tapped

中，这与添加到内容视图的点击事件中的代码相同内按钮。

private  void Button_Clicked(object sender, EventArgs e)
    {
        doSomething();
    }

    private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        doSomething();
    }
    private async void doSomething() {
        await DisplayAlert("Alert", "You have been alerted", "OK");
    }