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

Posted 2023-04-12

【中文标题】将事件路由到当前元素下的元素

【英文标题】：Route event to element under the current element

【发布时间】：2016-06-06 13:42:48

【问题描述】：

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

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

这是我的 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），但网格捕获了事件并且不会中继到我的页面。

我能得到一些帮助吗？

谢谢！

【问题讨论】：

设置ScrollViewer Margin= "0, 0, 0, 25" 怎么样？您的图层是透明的，所以可以这样做

这不起作用。信息面板需要占据我的画布的整个宽度，它也应该响应手指滑动

那你需要在顶层handleManipulationDelta事件。如果用户向左/向右擦除，则相应地滚动底层

【参考方案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>

【讨论】：

感谢滚动模式。它帮助我解决了另一个错误（这就是我给你 +1 的原因）。然而它并没有解决最初的问题。

很高兴听到这个消息：D.. 所以我可能误解了你，请你更清楚你的问题吗？你想要一个带有透明背景的顶部标题，并且能够水平滚动它/一些项目吗？