ScrollViewer 中带有画布的 Windows Phone 8.1 UserControl 不起作用答案

【问题标题】：Windows Phone 8.1 UserControl with canvas in a ScrollViewer doesn't workScrollViewer 中带有画布的 Windows Phone 8.1 UserControl 不起作用
【发布时间】：2015-04-08 19:33:32
【问题描述】：

我在用户控件中有以下内容：

<Grid Background="#FFEEEEEE" Margin="0,0,0,0">
    <TextBlock x:Name="TitleLabel" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Foreground="Black" FontSize="16" FontWeight="Bold"/>

    <Border BorderBrush="#FFE2E2E2" Margin="10,60,20,80" CornerRadius="4" BorderThickness="2">
        <Grid Background="#ffffffff">
            <Grid x:Name="SignatureGrid" Background="Transparent">
                <TextBlock TextWrapping="Wrap" Text="Sign here" Foreground="#FFEEEEEE" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="100"/>
                <Border BorderBrush="#FF333333" BorderThickness="1" Height="1" VerticalAlignment="Bottom" Margin="20,0,20,50" />
                <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Sign here" VerticalAlignment="Bottom" Foreground="#FF333333" FontSize="14" Margin="20,0,0,27"/>
            </Grid>

            <Canvas x:Name="inkCanvas" Background="Transparent" PointerPressed="inkCanvas_PointerPressed" PointerMoved="inkCanvas_PointerMoved" PointerReleased="inkCanvas_PointerReleased" />
        </Grid>
    </Border>

    <Button x:Name="ClearButton" Content="Clear" HorizontalAlignment="Right" Margin="0,0,20,20" VerticalAlignment="Bottom" Width="162" Background="#FF46B2D5" BorderThickness="0,0,2,0" Click="Button_Click"/>
</Grid>

然后我有一个页面，其中包含以下内容：

<ScrollViewer Grid.Row="2" x:Name="QuestionsScroller" HorizontalAlignment="Stretch" ZoomMode="Disabled" HorizontalScrollMode="Disabled" >
        <StackPanel x:Name="SectionContentPanel" />
    </ScrollViewer>

在后面的页面代码中，我将控件（和其他控件）动态添加到堆栈面板。在当前的形式下，画布无法正常工作，但如果我移除 ScrollViewer，画布可以正常工作，但我显然无法滚动到其下方的控件。

在我的 PointerMoved 事件中，我有：

Point currentPoint = e.GetCurrentPoint(inkCanvas).Position;
if (_startPoint != currentPoint)
{
    _line.Points.Add(currentPoint);
    mHasDrawing = true;
}

使用 ScrollViewer，起点和终点永远不会不同（我猜是因为当我在屏幕/模拟器上拖动时，画布会随着我的手指/鼠标移动。没有 ScrollView，正如我所说，它可以按预期工作。

所以问题是，如何在 scrollViewer 中实现 Canvas？

【问题讨论】：

标签： canvas windows-phone-8.1 scrollviewer

【解决方案1】：

在搞砸了一段时间后，我在 StackOverflow 上提出了这个问题，然后在 10 分钟内我想通了 - 这是任何想要做同样事情的人的答案：

在您的 PointerPressed 事件中，您需要禁用 scrollViewer 滚动模式：

private void inkCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
    {            
        //get to the scrollViewer
        StackPanel sp = (StackPanel)this.Parent;
        ScrollViewer sv = (ScrollViewer)sp.Parent;
        sv.VerticalScrollMode = ScrollMode.Disabled;

        //Rest of code.
    }

此时 Canvas 可以工作，但您仍然无法滚动，直到您再次启用 ScrollViewer。您可以在 PointerReleased 事件中执行此操作：

private void inkCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
    {
        //get to the scrollViewer
        StackPanel sp = (StackPanel)this.Parent;
        ScrollViewer sv = (ScrollViewer)sp.Parent;
        sv.VerticalScrollMode = ScrollMode.Auto;

        //Rest of code
    }

【讨论】：