ScrollViewer not Scrolling with UWP Windows 10 Phone

Question

my apologies for my simple wording, but I am an apprentice and new to Windows 10 and UWP development.

I am currently creating a manuals page for our APP which can be called from many different pages and dependant upon which page calls it is called from it will display the relevant manual for that page.

I did try PDF's but found the handling for the PDF's extremely slow and quirky so I have saved all pages for the manuals as .PNG files.

I have a dictionary item in the XAML which contains the links for the files, in my C# code I decide on the page and for which manual to display.

Some pages may have only one page others may have 6 or more.

I plan for the time being to contain the pictures within a ScrollView with Zoom Enabled this works perfectly apart from one major problem.

I am trying to create a ScrollViewer with 6 Images (Vertically aligned). Because of the Images size you can only see 2 on the screen (hence needing a ScrollViewer). The only way which I can actually scroll down to see the rest of the images is by zooming in, and then scrolling. You need to do this multiple times to get to the bottom, but when you zoom back out to see the full image the ScrollViewer scrolls back up to the top.

Here is my Xaml Code:

<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>

All images are set to BlankPage Resource (which is nothing) as I will be using this on another page which will have less images on. I just Change the Image source from the code behind this. 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>

The Image Sources are kept in a Page resource at the top of this file, and are changed in the code behind like this:

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"];
    }
}

Any help would be greatly appreciated.

Thank you @LovetoCode for your suggestion. I have amended my Scrollviewer to have a Grid instead of a StackPanel, but the problem persists.

I have created 6 rows in the Grid (one for each item) and added each item to their separate row. However it is still a fight to scroll down. The only real way to 'scroll' is by placing a finger on the screen and then scrolling with another finger, which is similar to zooming. As soon as you take your finger off of the screen the ScrollViewer goes straight back up to the top again. When I removed the rows from the new grid, Only one image was shown and the rest were nowhere to be seen.

Here is my New 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

Solved!

Instead of Using a StackPanel for all of the images within the ScrollViewer, I am now using a ListView, which then has a ListViewItem for each Item which is being displayed. The C# code behind & the Page.Resources are still exactly as they were. The Scrollviewer is now different with a ListView instead of StackPanel. This also means that I do not use multiple rows, but only one for the ListView.

Thanks to @LovetoCode !

Here is the New Code with the amended 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>