c#-ScrollViewer无法使用UWP Windows 10 Phone滚动

我为我的简单措辞道歉,但我是一名学徒,并且是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资源(什么都没有),因为我将在另一张图像较少的页面上使用它.我只是从背后的代码更改Image源.
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>

图像源保存在此文件顶部的Page资源中,并在后面的代码中进行如下更改：

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修改为具有网格而不是StackPanel,但是问题仍然存在.

我在网格中创建了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>

解决方法:

尝试使用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>

标签：windows-10,win-universal-app,windows-10-mobile,xaml,c
来源： https://codeday.me/bug/20191027/1941781.html