ScrollViewer 不使用 UWP 滚动 Windows 10 Phone

Question

对于我简单的措辞，我深表歉意，但我是 Windows 10 和 UWP 开发的新手。

我目前正在为我们的 APP 创建一个手册页面，可以从许多不同的页面调用它，并且根据调用它的页面调用它会显示该页面的相关手册。

我确实尝试过 PDF，但发现 PDF 的处理极其缓慢且古怪，因此我将手册的所有页面保存为 .PNG 文件。

我在 XAML 中有一个字典项，其中包含文件的链接，在我的 C# 代码中，我决定在页面上显示哪个手册。

有些页面可能只有一页，其他页面可能有 6 页或更多。

我计划暂时将图片包含在启用缩放的 ScrollView 中，除了一个主要问题外，这非常有效。

我正在尝试创建一个包含 6 个图像（垂直对齐）的 ScrollViewer。由于图像大小，您只能在屏幕上看到 2 个（因此需要 ScrollViewer）。我实际上可以向下滚动以查看其余图像的唯一方法是放大，然后滚动。您需要多次执行此操作才能到达底部，但是当您缩小以查看完整图像时，ScrollViewer 会向上滚动回到顶部。

这是我的 Xaml 代码：

<ScrollViewer x:Name="MyScrollViewer" ZoomMode="Enabled" MaxZoomFactor="5" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible"  VerticalScrollMode="Enabled">
    <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
        <Image Name="HelpManual" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual2" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual3" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual4" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual5" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual6" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
    </StackPanel>
</ScrollViewer>

所有图像都设置为 BlankPage Resource（没什么），因为我将在另一个页面上使用它，该页面上的图像较少。我只是从这背后的代码更改图像源。 Page.Resource:

<Page.Resources>
    <BitmapImage x:Key="BlankPage" UriSource="" />
    <BitmapImage x:Key="LightingPage" UriSource="Assets\AppPages\HelpManuals\LightingPageManual.png" />
    <BitmapImage x:Key="PowerPage" UriSource="Assets\AppPages\HelpManuals\PowerPageManual.png" />
    <BitmapImage x:Key="WaterPage" UriSource="Assets\AppPages\HelpManuals\WaterPageManual.png" />
    <BitmapImage x:Key="HeatingPage" UriSource="Assets\AppPages\HelpManuals\HeatingPageManual.png" />
    <BitmapImage x:Key="RemotePage" UriSource="Assets\AppPages\HelpManuals\RemotePageManual.png" />
    <BitmapImage x:Key="BluetoothPage" UriSource="Assets\AppPages\HelpManuals\BluetoothPageManual.png" />
</Page.Resources>

图像源保存在该文件顶部的页面资源中，并在后面的代码中更改如下：

void Page_LoadComplete(object sender, RoutedEventArgs e)
{
    var lastPage = Frame.BackStack.Last().SourcePageType;

    if (lastPage.Name == "PowerPage")
    {
        HelpManual.Source = (ImageSource)Resources["PowerPage"];
    }
    else if (lastPage.Name == "MainPage")
    {
        HelpManual.Source = (ImageSource) Resources["LightingPage"];
        HelpManual2.Source = (ImageSource) Resources["PowerPage"];
        HelpManual3.Source = (ImageSource)Resources["WaterPage"];
        HelpManual4.Source = (ImageSource)Resources["HeatingPage"];
        HelpManual5.Source = (ImageSource)Resources["RemotePage"];
        HelpManual6.Source = (ImageSource)Resources["BluetoothPage"];
    }
}

如有任何帮助，我们将不胜感激。

感谢@LovetoCode 的建议。我修改了我的 Scrollviewer 以使用 Grid 而不是 StackPanel，但问题仍然存在。

我在网格中创建了 6 行（每个项目一行）并将每个项目添加到它们单独的行中。然而，向下滚动仍然是一场斗争。 'scroll' 唯一真正的方法是将一根手指放在屏幕上，然后用另一根手指滚动，这类似于缩放。一旦您将手指从屏幕上移开，ScrollViewer 就会再次直接回到顶部。当我从新网格中删除行时，只显示了一张图像，其余的都看不到了。

这是我的新 ScrollViewer：

<ScrollViewer x:Name="MyScrollViewer" ZoomMode="Enabled" MaxZoomFactor="5" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible"  VerticalScrollMode="Enabled" >
    <Grid Name="MyScrollViewGrid" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Image Name="HelpManual" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual2" Grid.Row="1" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual3" Grid.Row="2" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual4" Grid.Row="3" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual5" Grid.Row="4" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
        <Image Name="HelpManual6" Grid.Row="5" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
    </Grid>                   
</ScrollViewer>

Answer 1

改用 ListView

<ListView ScrollViewer.ZoomMode="Enabled" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible">
            <ListViewItem>
                <Image Name="HelpManual" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual1" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual2" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual3" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
        </ListView>

Answer 2

已解决！

我现在使用的是 ListView，而不是对 ScrollViewer 中的所有图像使用 StackPanel，然后它为每个正在显示的项目都有一个 ListViewItem。后面的 C# 代码和 Page.Resources 仍然完全一样。 Scrollviewer 现在与 ListView 而不是 StackPanel 不同。这也意味着我不使用多行，而是只为 ListView 使用一个行。

感谢@LovetoCode！

这是带有修改后的 ScrollViewer 的新代码：

      <ScrollViewer x:Name="MyScrollViewer" ZoomMode="Enabled" MaxZoomFactor="5" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible"  VerticalScrollMode="Enabled" >
        <ListView>
            <ListViewItem>
                <Image Name="HelpManual" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual2" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual3" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual4" Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual5"  Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
            <ListViewItem>
                <Image Name="HelpManual6"  Source="{StaticResource BlankPage}" Width="{Binding Path=ViewportWidth, ElementName=MyScrollViewer}"/>
            </ListViewItem>
        </ListView>
    </ScrollViewer>

ScrollViewer 不使用 UWP 滚动 Windows 10 Phone

ScrollViewer not Scrolling with UWP Windows 10 Phone

c#

xaml

win-universal-app

windows-10

windows-10-mobile