将事件路由到当前元素下的元素

Question

我一直在尝试制作一个有两层的画布。一层水平滚动，第二层在顶部并垂直滚动。 在第二层（垂直滚动的层）中，我堆叠了一个透明网格（或面板）和一个带有信息的面板，这样我们就可以看到该层下的第一层，如果我们向上滚动，我们就会得到信息出现在屏幕上。

这就像一个魅力，除了如果我水平滚动，第一层（下一层）根本不会滚动。如果我们滑动透明网格，垂直滚动不滚动，这不是问题。

这是我的 xaml

<Canvas x:Name="Canvas">
    <local:MyPage x:Name="PageContainer"/> <!--This one scrolls horizontally -->
    <ScrollViewer
                  HorizontalScrollBarVisibility="Disabled"
                  VerticalScrollBarVisibility="Hidden"
                  Height="{Binding ActualHeight, ElementName=UcRoot}">
<!--This one scrolls vertically and appears on top -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" ></Grid>
            <Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1">
            </Grid>
        </Grid>
    </ScrollViewer>

</Canvas>

我在透明网格上尝试了很多东西（例如，将宽度设置为 1，将其移除并将信息网格边距设置为 1200），但网格捕获了事件并且不会中继到我的页面。

我能得到一些帮助吗？

谢谢！

Answer 1

您必须将网格的背景设置为'Transparent'，以便能够点击它并滑动..您可能需要使用这些属性：

ScrollViewer.VerticalScrollMode
ScrollViewer.HorizontalScrollMode

虽然，这是我建议的解决方案：

        <ScrollViewer ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" >
            <Grid >
                <TextBlock Text="contnet" />
            </Grid>
        </ScrollViewer>

        <ScrollViewer  ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Enabled"  >
            <Grid Background="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid Height="600" Width="600" Grid.Row="0" x:Name="TransparentGrid" Background="Transparent" ></Grid>
                <Grid x:Name="Information" Background="Azure" Height="1200" Width="600" Grid.Row="1"/>


            </Grid>
        </ScrollViewer>

    </Canvas>