MAUI中ImageButton添加双Label后Click事件失效（Windows平台）

问题现象 #

在Windows平台运行MAUI拼字游戏项目时出现控件交互异常：

• 单行列Grid中放置ImageButton作为背景，添加第一个Label（显示字母）覆盖在上方时，ImageButton的Click事件可正常触发；
• 添加第二个Label（显示字母分值）后，ImageButton的Click事件完全失效；
• 后续调整控件结构，改用Image作为背景层、透明Button置于顶层，但只要添加TileValueLabel，Button的Click事件仍无法触发，移除该Label则事件恢复正常。

相关实现代码 #

BoardCell.cs（字母Tile控件类） #

// BoardCell.cs Class for the Scrabble Letter Tile
public class BoardCell : StackLayout
{
    public ImageButton TileImageButton { get; private set; }
    public Label TileLetterLabel { get; private set; }
    public Label TileValueLabel { get; private set; }

    public BoardCell(Enums.BoardCellTypes boardCellType)
    {
        // Setup the TileImageButton
        TileImageButton = new ImageButton();
        TileImageButton.WidthRequest = 80;
        TileImageButton.HeightRequest = 80;
        TileImageButton.BorderColor = Colors.DarkGray;
        TileImageButton.BorderWidth = 2;

        // Setup the Tile Grid
        var tileGrid = new Grid();
        tileGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
        tileGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });

        // Add the Tile Image Button
        tileGrid.Children.Add(TileImageButton);
        Grid.SetRow(TileImageButton, 0);
        Grid.SetColumn(TileImageButton, 0);

        // Setup and add the Tile Letter Label
        TileLetterLabel = new Label();
        TileLetterLabel.TextColor = Colors.Black;
        TileLetterLabel.FontSize = 48;
        TileLetterLabel.FontAttributes = FontAttributes.Bold;
        TileLetterLabel.HorizontalTextAlignment = TextAlignment.Center;
        TileLetterLabel.VerticalTextAlignment = TextAlignment.Center;
        TileLetterLabel.IsVisible = false; // Important this is initially false, otherwise it blocks clicks on the TileImageButton behind it

        tileGrid.Children.Add(TileLetterLabel);
        Grid.SetRow(TileLetterLabel, 0);
        Grid.SetColumn(TileLetterLabel, 0);

        // Setup and add the Tile Value Label
        TileValueLabel = new Label();
        TileValueLabel.TextColor = Colors.Black;
        TileValueLabel.FontSize = 12;
        TileValueLabel.FontAttributes = FontAttributes.Bold;
        TileValueLabel.HorizontalTextAlignment = TextAlignment.Center;
        TileValueLabel.VerticalTextAlignment = TextAlignment.End;

        tileGrid.Children.Add(TileValueLabel);
        Grid.SetRow(TileValueLabel, 0);
        Grid.SetColumn(TileValueLabel, 0);

        // Add the tileGrid to the StackLayout of this control
        this.Children.Add(tileGrid);

        if (boardCellType == Enums.BoardCellTypes.TileLetter)
        {
            SetTileValueLabel();
            TileLetterLabel.IsVisible = true;
        }
        else
        {
            TileLetterLabel.IsVisible = false;
        }
    }

    public void SetTileValueLabel()
    {
        this.TileValueLabel.Text = this.TileValue.ToString();
    }
}

MainPage.xaml.cs（主页面逻辑） #

// MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    BoardCell SelectedTile { get; set; }

    public MainPage()
    {
        BoardTileTapGestureRecognizer = new TapGestureRecognizer();
        BoardTileTapGestureRecognizer.Tapped += BoardTileTapGestureRecognizer_Tapped;

        InitializeBoard();

        MyTileTapGestureRecognizer = new TapGestureRecognizer();
        MyTileTapGestureRecognizer.Tapped += MyTileTapGestureRecognizer_Tapped;
    }

    private void BoardTileTapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
      // 执行相关操作，但该事件在出现Bug时不会触发
    }

    private void MyTileTapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        // 该事件可正常触发
        SelectedTile = GetBoardCellParent(sender); // 将SelectedTile设置为被点击的BoardCell对象
    }
}

private void InitializeBoard()
{
    for (int row = 0; row <= 14; row++)
    {
        // 为游戏板设置新的行和列（15x15网格，各需设置15次）
        var tileRowDefinition = new RowDefinition() { Height = 80 };
        var tileColumnDefinition = new ColumnDefinition() { Width = 80 };

        grid_GameBoard.RowDefinitions.Add(tileRowDefinition);
        grid_GameBoard.ColumnDefinitions.Add(tileColumnDefinition);

        for (int column = 0; column <= 14; column++)
        {
            // 创建新的BoardCell并绑定点击事件
            BoardCell boardCell = GetNewBoardCell(row, column);
            boardCell.TileImageButton.Clicked += OnBoardCellClicked;
            boardCell.TileLetterLabel.GestureRecognizers.Add(BoardTileTapGestureRecognizer);

            // 将新的BoardCell添加到网格中                
            grid_GameBoard.Children.Add(boardCell);
            Grid.SetRow(boardCell, row);
            Grid.SetColumn(boardCell, column);
        }
    }
}

private void OnBoardCellClicked(object sender, EventArgs e)
{
  // 执行相关操作，但出现Bug时永远不会触发
}

MainPage.xaml（主页面布局） #

// MainPage.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="ScrabbleMaui2.MainPage">

    <ScrollView>
        <!--<Grid RowSpacing="25" RowDefinitions="Auto,Auto,Auto,Auto,*"
              Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">-->

        <Grid x:Name="grid_Game" RowDefinitions="50,*,100" ColumnDefinitions="*" MaximumHeightRequest="1500">
            <Grid x:Name="grid_TitleBar" Grid.Row="0" ColumnDefinitions="*,*,*">
                <Grid x:Name="grid_Score" ColumnDefinitions="*,*">
                    <Label Grid.Column="0" Text="My Score: " />
                    <Label x:Name="lbl_MyScore" Grid.Column="1" Text="0" />
                </Grid>

                <Button x:Name="btn_SubmitPlay" Grid.Column="2" Text="Play Word" WidthRequest="100" Clicked="btn_SubmitPlay_Clicked" />
            </Grid>

            <Grid x:Name="grid_GameBoard" Grid.Row="1" Margin="10" HorizontalOptions="Center" BackgroundColor="Green" />

            <Grid x:Name="grid_MyTiles" Grid.Row="2" RowDefinitions="Auto" ColumnDefinitions="*,*,*,*,*,*,*" MaximumWidthRequest="620"
                  BackgroundColor="Blue" />
        </Grid>
    </ScrollView>

</ContentPage>

调整后的BoardCell构造函数（改用Image背景+透明Button） #

public BoardCell(Enums.BoardCellTypes boardCellType, bool isCenterCell)
{
    this.IsLocked = false;
    this.BoardCellType = boardCellType;
    this.IsCenterCell = isCenterCell;

    var tileGrid = new Grid();
    tileGrid.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Star });
    tileGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = GridLength.Star });

    TileBackground = new Image();
    TileLetterLabel = GetLetterLabel();
    TileValueLabel = GetValueLabel();

    SetTileBackground();
    SetTileValueLabel();

    TileButton = new Button();
    TileButton.WidthRequest = 80;
    TileButton.HeightRequest = 80;
    TileButton.IsVisible = false;

    tileGrid.Children.Add(TileBackground);
    tileGrid.Children.Add(TileLetterLabel);
    tileGrid.Children.Add(TileValueLabel);
    tileGrid.Children.Add(TileButton);

    Grid.SetRow(TileBackground, 0);
    Grid.SetRow(TileLetterLabel, 0);
    Grid.SetRow(TileValueLabel, 0);
    Grid.SetRow(TileButton, 0);

    Grid.SetColumn(TileBackground, 0);
    Grid.SetColumn(TileLetterLabel, 0);
    Grid.SetColumn(TileValueLabel, 0);
    Grid.SetColumn(TileButton, 0);

    this.Children.Add(tileGrid);
}

内容的提问来源于stack exchange，提问作者J.D.