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
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!