.NET MAUI 上的 TapGestureRecognizer

Question

我有一段非常简单的单页 .NET MAUI 代码。 XAML 包含 4 个标签和 1 个图像。第一个标签有一个

TapGestureRecognizer

和

Tapped

事件。点击时，第二个标签文本会发生变化。这很好用。

我的第三个标签类似地有一个

TapGestureRecognizer

，但这次使用了一个

Command

，它链接回后面的代码，当点击时，会更改第四个标签中的文本。

如果点击图像，第四个标签文本会发生变化。

这就是理论。现实情况是，只有带有

TapGestureRecognizer

事件的

Tapped

才会执行任何操作。

我的 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="TapGestureRecognizer.MainPage" >
    <VerticalStackLayout Padding="8" HorizontalOptions="Center">
        <Label Text="Please tap me" FontSize="16" Margin="0,8">
            <Label.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="LabelTapped" />
            </Label.GestureRecognizers>
        </Label>
        <Label Text="" Padding="8" TextColor="Red" x:Name="uiLabel" />
        <Label Text="Please tap me here" FontSize="16" Margin="0,8">
            <Label.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding LabelTappedCommand}" />   
            </Label.GestureRecognizers>
        </Label>
        <Label Text="" Padding="8" TextColor="Red" x:Name="uiLabel2" />
        <Image Source="dotnet_bot.png" WidthRequest="100" HeightRequest="100">
             <Image.GestureRecognizers>
                 <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding LabelTappedCommand}" />
             </Image.GestureRecognizers>
         </Image>
    </VerticalStackLayout>
</ContentPage>

背后的代码是这样的

using System.Windows.Input;

namespace TapGestureRecognizer;

public partial class MainPage : ContentPage
{
    bool _selected = false;
    bool _otherSelected = false;
    public ICommand LabelTappedCommand { get; set; }

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
        LabelTappedCommand = new Command(() =>
        {
            uiLabel2.Text = !_otherSelected ? "Wax on" : "Wax off";
            _otherSelected = !_otherSelected;
        });
    }

    void LabelTapped(object sender, TappedEventArgs e)
    {
        uiLabel.Text = !_selected ? "Hello" : "Goodbye";
        _selected = !_selected;
    }

    void OnTapped()
    {
        uiLabel2.Text = !_otherSelected ? "Wax on" : "Wax off";
        _otherSelected = !_otherSelected;
    }
}

OnTapped 方法就在那里，因为我更改了 lambda，以防出现问题 - lambda 之前调用了 OnTapped 方法。

有人知道为什么第三个标签或图像没有触发后面的代码吗？

Answer 1

它不起作用的原因是因为你的命令没有参考在哪里寻找绑定

试试这个

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Name="this"
         x:Class="TapGestureRecognizer.MainPage" >
    <VerticalStackLayout Padding="8" HorizontalOptions="Center">
        <Label Text="Please tap me" FontSize="16" Margin="0,8">
            <Label.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="LabelTapped" />
            </Label.GestureRecognizers>
        </Label>
        <Label Text="" Padding="8" TextColor="Red" x:Name="uiLabel" />
        <Label Text="Please tap me here" FontSize="16" Margin="0,8">
            <Label.GestureRecognizers>
                <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding LabelTappedCommand, Source={x:Reference this}}" />   
            </Label.GestureRecognizers>
        </Label>
        <Label Text="" Padding="8" TextColor="Red" x:Name="uiLabel2" />
        <Image Source="dotnet_bot.png" WidthRequest="100" HeightRequest="100">
             <Image.GestureRecognizers>
                 <TapGestureRecognizer NumberOfTapsRequired="1" Command="{Binding LabelTappedCommand, Source={x:Reference this}}" />
             </Image.GestureRecognizers>
         </Image>
    </VerticalStackLayout>
</ContentPage>