Question

如果我们有一个带有可滚动内容的ScrollViewer，以及一个不在其中的控件（如按钮），我们可以移动ScrollViewer只触摸按钮。

Explanatory example

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>

我尝试以不同方式避免此行为，但没有成功，例如使用Canvas Layout。

修改

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

enter image description here

你有什么建议吗？

Answer 1

您可以使用Grid.Columns分隔两个控件。现在ScrollViewer和Button位于同一列中，因此每当您尝试访问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>

您可以摆脱行为您可以单独访问这两个控件。

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

1 个答案: