首页 > 系统相关> 文章详细

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

2019-10-27 04:06:42 阅读：254 来源： 互联网

标签：windows-10 win-universal-app windows-10-mobile xaml c

我为我的简单措辞道歉,但我是一名学徒,并且是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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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