ScrollViewer nicht Scrollen mit UWP Windows 10 Telefon

Question

meine Entschuldigung für meine einfache Formulierung, aber ich bin ein Lehrling und neu in Windows 10 und UWP Entwicklung.

Ich erstelle gerade eine Manualseite für unsere APP, die von vielen verschiedenen Seiten aufgerufen werden kann und abhängig davon, von welchen Seitenaufrufen sie aufgerufen wird, wird das entsprechende Handbuch für diese Seite angezeigt.

Ich habe versucht, PDFs aber fand die Handhabung für die PDFs extrem langsam und eigenartig, so dass ich alle Seiten für die Handbücher als .PNG-Dateien gespeichert haben.

Ich habe ein Wörterbuch-Element im XAML, das die Links für die Dateien enthält, in meinem C# -Code entscheide ich mich für die Seite und für welches Handbuch angezeigt werden soll.

Einige Seiten haben möglicherweise nur eine Seite, andere 6 oder mehr.

Ich plane vorerst, die Bilder in einem ScrollView mit Zoom Enabled zu enthalten, das funktioniert perfekt abgesehen von einem großen Problem.

Ich versuche, einen ScrollViewer mit 6 Bildern (vertikal ausgerichtet) zu erstellen. Aufgrund der Bildgröße können Sie nur 2 auf dem Bildschirm sehen (daher benötigen Sie einen ScrollViewer). Die einzige Möglichkeit, nach der ich scrollen kann, um den Rest der Bilder zu sehen, ist das Einzoomen und das Scrollen. Sie müssen dies mehrmals tun, um an den unteren Rand zu gelangen, aber wenn Sie das ganze Bild vergrößern, scrollt der ScrollViewer zurück nach oben.

Hier ist mein 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> 

Alle Bilder zu Blankpage Ressource eingestellt sind (was nichts ist), wie ich dies auf einer anderen Seite verwenden werden, die weniger Bilder auf haben wird. Ich ändere nur die Bildquelle aus dem Code dahinter. 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> 

Die Bildquellen sind in einer Seite Ressource am Anfang der Datei gespeichert und werden in der Code-behind wie folgt geändert:

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

Jede Hilfe wäre sehr geschätzt.

Vielen Dank @LovetoCode für Ihren Vorschlag. Ich habe meinen Scrollviewer dahingehend geändert, dass anstelle eines StackPanels ein Grid vorhanden ist, aber das Problem bleibt bestehen.

Ich habe 6 Zeilen im Grid erstellt (eine für jedes Element) und fügte jedes Element zu seiner separaten Zeile hinzu. Es ist jedoch immer noch ein Kampf, um nach unten zu scrollen. Die einzige Möglichkeit zum Scrollen besteht darin, einen Finger auf den Bildschirm zu legen und dann mit einem anderen Finger zu scrollen, ähnlich wie beim Zoomen. Sobald Sie Ihren Finger vom Bildschirm nehmen, fährt der ScrollViewer gerade wieder nach oben. Als ich die Zeilen aus dem neuen Raster entfernte, wurde nur ein Bild angezeigt und der Rest war nirgends zu sehen.

Hier ist meine neue Scroll:

<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

gelöst!

Anstatt ein StackPanel für alle Bilder im ScrollViewer zu verwenden, verwende ich jetzt eine ListView, die dann ein ListViewItem für jedes angezeigte Item hat. Der C# -Code hinter & Die Page.Resources sind immer noch genau so wie sie waren. Der Scrollviewer unterscheidet sich nun mit einem ListView anstelle von StackPanel. Dies bedeutet auch, dass ich nicht mehrere Zeilen, sondern nur eine für die ListView verwenden.

Dank @LovetoCode!

Hier ist der neue Code mit dem geänderten Scroll:

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

Answer 2

Try Listview Statt

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