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资源（这是什么都没有），因为我将在另一个页面上使用此图像，该页面上的图像较少。我只是从这背后的代码更改图像源。 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，但问题仍然存在。

我在Grid中创建了6行（每个项目一行），并将每个项目添加到其单独的行中。然而，向下滚动仍然是一场战斗。滚动的唯一真正方式是“滚动”。是通过将手指放在屏幕上然后用另一个手指滚动，这类似于缩放。一旦您将手指从屏幕上移开，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

axf:word-break="break-all"

Answer 2

解决！

而不是对ScrollViewer中的所有图像使用StackPanel，我现在使用ListView，然后ListViewItem为每个显示的项目。 C＃代码背后＆amp; 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手机滚动

2 个答案: