Xaml ScrollViewer捕获属于重叠控件的事件

如果我们有一个具有可滚动内容的ScrollViewer，以及一个位于其上方但不包含在其内的控件（如按钮），那么我们可以仅通过触摸按钮来移动ScrollViewer

XAML根目录内容：

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="GRID" Grid.Row="1" Margin="12,0,12,0">

        <ScrollViewer x:Name="SCROLLVIEWER">
            <StackPanel x:Name="STACKPANEL">
                <TextBlock TextWrapping="Wrap" Text="1" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="2" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="3" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="4" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="5" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="6" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="7" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="8" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="9" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="0" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
        </ScrollViewer>

        <Button x:Name="BUTTON" Content="Button" HorizontalAlignment="Left" Margin="134,221,0,0" VerticalAlignment="Top" Height="364" Width="278"/>

    </Grid>
</Grid>

我试图以不同的方式避免这种行为，但没有成功，比如使用画布布局

编辑

不能在不同的列中分开，ScrollViewer的内容可以更广泛

---

您有什么建议？

您可以使用

Grid.Columns

来分隔这两个控件。现在

ScrollViewer

和按钮位于同一列中，因此每当您尝试访问

ScrollViewer

时，也可以访问按钮。所以试着这样做

   <Grid x:Name="LayoutRoot" Background="Transparent">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="GRID" Grid.Row="1" Margin="12,0,12,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <ScrollViewer x:Name="SCROLLVIEWER">
            <StackPanel x:Name="STACKPANEL">
                <TextBlock TextWrapping="Wrap" Text="1" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="2" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="3" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="4" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="5" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="6" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="7" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="8" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="9" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
                <TextBlock TextWrapping="Wrap" Text="0" Height="130" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
        </ScrollViewer>

        <Button x:Name="BUTTON" Content="Button" HorizontalAlignment="Left" Margin="134,221,0,0" VerticalAlignment="Top" Height="100" Width="200" Grid.Column="1"/>

    </Grid>
</Grid>

---

您可以摆脱这种行为—您可以分别访问这两个控件

是否为按钮应用隐式默认样式，该样式可能会将

HitTestVisible

设置为false？尝试将x:Name=“BUTTON”元素的值显式设置为true，看看是否有不同。感谢@Martin我尝试了你的建议，但对我无效，我仍然只能滚动触摸按钮。你能验证在实际手机上运行应用程序时，该行为是否仍然存在吗？也许这只是模拟器中的一个小故障，将滑动事件传递到错误的元素（完全基于x/y坐标并忽略z顺序）这里有另一个测试：更改xaml中的显示顺序：首先是按钮，然后是scrollviewer，并在按钮上设置Canvas.ZIndex=“42”（是的，它在网格中工作）在调试中使用WP8.0和WP8.1模拟器以及WP8.0和WP8.1设备进行测试。1次使用设备WP8.1发布。谢谢@Dinesh balan，但不能分为两列，我编辑了这篇文章。