我们的活动内容顶部有一个覆盖层,其中包含一个按钮。我们希望按钮处于活动状态,而覆盖层其余部分中发生的事件将传递到后面的活动内容。
层次结构看起来像
[App]
[Window]
[NavigationPage]
[OurPage]
[Grid]
ActiveContent[StackLayout]
[ContentView]
Overlay[ContentView]
[Grid]
OverlayButton[ImageButton]
我们尝试切换叠加层上的 InputTransparent 属性,但这意味着叠加层中的叠加按钮不会接收事件。 iOS 有一些针对视图的命中测试方法以及针对手势识别器的方法,可以使其发挥作用。 .NET MAUI 中有类似的东西吗?
您正在寻找的属性是 CascadeInputTransparent,它允许子视图以与其父视图不同的方式注册点击。 在父级上设置 CascadeInputTransparent = false 和 InputTransparent = true ,在子级上设置 InputTransparent = false
.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");
}