UWP 网格操作叠加

Question

我在使用 UWP 应用程序中的 Grid 叠加时遇到问题。我有以下控件（没有 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 事件。现在我想更进一步，还包括一个 "swiping gesture".

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

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

现在我可以左右滑动了，但是我的点击没用了，只能滑动了。

如何让点击和滑动同时起作用？

Answer 1

我测试了一下，当你在其他格子后面放一个Grid use Grid.ColumnSpan = "7"时，你实际上是把一个Grid放在其他格子上面，所以你只能得到重点Grid。当你在其他格子前面放一个Grid use 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。希望对你有帮助。

UWP 网格操作叠加

UWP Grid Manipulation Overlay

grid

swipe-gesture

uwp