UWP 网格操作叠加

Question

我在使用 UWP 应用中的 网格 叠加时遇到问题。 我有以下控件（没有 ColumnDefinitions 以便更好地查看）：

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

效果很好。我可以点击三个区域之一，它会触发 Grid 中的 Tapped 事件。现在我想更进一步，还包括一个“滑动手势”。

所以我在上面放了一个网格：

<Grid Grid.ColumnSpan="7" Background="Transparent" ManipulationMode="TranslateX" ManipulationStarted="..." ManipulationCompleted="..." />

现在我可以左右滑动，但是我的点击不再起作用，只能滑动。

我怎样才能让点击和滑动都起作用？

Answer 1

我测试了一下，当你把Grid用Grid.ColumnSpan = "7"放在你的其他网格之后，你实际上把Grid放在了其他网格之上，所以你只能得到这个Grid的焦点。当您在其他网格之前放置Grid 使用Grid.ColumnSpan = "7" 时，它位于其他网格的较低级别，它可以在 gird3、grid5 和 grid7 之外进行操作，并且可以点击这 3 个网格，但是当您需要时从grid3、5、7开始操作，它不能工作。为了达到你的期望，你不需要添加任何Gird 使用Grid.ColumnSpan = "7"，你只需要像这样操作：

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

现在您可以点击它们或滑动Grid。 希望对您有所帮助。