xamlmaui

MAUI ImageButton click event works in Android app but not in Windows app


I am developing a card game for Windows and Android using MAUI. The main page contains the card table. Clicking on one of your cards in your hand moves it to the discard area. Clicking on the card in the discard area moves it back to your hand. These actions work as expected in the android app. In the windows app, only clicking on the card in your hand works as expected. Clicking on the card in the discard area does not execute the code in the click event.

I am thinking it might have something to do with the xaml for page. The xaml includes grids and grids within grids.

I have created a sample app to demonstrate the problem. The app uses the card table xaml. I have removed all of the controls except 2 image buttons. Clicking on the image button moves the card to the other image button and then clicking the card moves it back to the original image button. The sample code is located here https://github.com/druchti1/TestApp


Solution

  • That's the Grid layout issue. In your code, the Card2 was defined in the

    <Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="4"...``` 
    

    That's great. But the question is that you reused this specific Row and Column later in your code, which means the Card2 is overlapped, so you cannot click it.

    Either adjust the Grid layout to prevent duplication or you may consider using ZIndex.

    From the doc,

    An element with a higher ZIndex value will be shown on top of an element with a lower ZIndex value.

    Set the ZIndex to a higher value to the Grid which contains the Card2 should work,

    <Grid Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="4"  ZIndex="9">
    

    Please let me know if you have any questions!