UWP Grid Manipulation Overlay - grid

Question

I'm having trouble with Grid Overlays in UWP Apps.
I have the following Control (without ColumnDefinitions for better viewing):
<Grid>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Grid>
Which is working nice. I can tap one of the three areas and it triggers the Tapped event from the Grid. Now I want to go a step further and also include a "swiping gesture".
So I put a Grid on top of that:
<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="..." ManipulationCompleted="..." />
Now I can swipe left and right, but my Tapping does not work anymore, only swiping.
How can I make Tapping AND swiping both work?

Answer 1

I tested it, when you put a Grid use Grid.ColumnSpan = "7" after your other grids, you actually put a Grid on top of the others, so you can only get the focus of this Grid. When you put a Grid use Grid.ColumnSpan = "7" before your other grids, it is on the lower level of the others, it can be manipulate outside gird3, grid5, and grid7, and these 3 grids can be tapped, but when you want to start manipulate from grid3, 5, 7, it can't work. To achieve your expect, youdon't need to add any Gird use Grid.ColumnSpan = "7", you just need to manipulate that like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="Transparent" Tapped="doneGrid_Tapped">
<TextBlock Text="fertig" Foreground="Lime" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="3" Background="Transparent" Tapped="allGrid_Tapped">
<TextBlock Text="alle" Foreground="Gray" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<Grid Grid.Column="5" Background="Transparent" Tapped="undoneGrid_Tapped">
<TextBlock Text="ausstehend" Foreground="Red" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
<!--<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="manipulationStarted" ManipulationCompleted="manipulationCompeleted" />-->
</Grid>
</Grid>
Now you can tap them or swip the Grid.
Wish this helps you.