Scrollviewer funktioniert nicht auf einem Raster

Question

Hallo Ich lerne UWP in Windows 10, muss ich durch ein Raster scrollen. Sie haben zwei Teile des Codes sind sehr ähnlich, meine Absicht ist, in grid2, das erste Stück Code blättern:

<Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <CommandBar VerticalAlignment="Top" Grid.Row="0"> 
      <CommandBar.Content> 
       <TextBlock Name="CurrentDateText" Margin="10,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="22" FontStretch="ExtraExpanded"/> 
      </CommandBar.Content> 
      <CommandBar.PrimaryCommands> 
       <AppBarButton Name="button1" Icon="Forward" Label="button" Click="NextButton_Click_1"/> 
      </CommandBar.PrimaryCommands> 
     </CommandBar> 

      <Grid Grid.Row="1" Grid.ColumnSpan="3" Name="Grid1"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="60"/> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
     </Grid> 

       <ScrollViewer x:Name="Scroll" Grid.Row="2" VerticalAlignment="Top" VerticalScrollBarVisibility="Auto" VerticalScrollMode="Enabled"> 
      <Grid Grid.ColumnSpan="3" Name="Grid2"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="60"/> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
     </Grid> 
     </ScrollViewer> 
    </Grid> 

im zweiten Stück Code:

<Grid> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <!-- Header --> 
     <Rectangle Grid.Row="0" Grid.ColumnSpan="3"/> 
     <TextBlock Grid.Column="1" Name="CurrentDateText" /> 


      <Button Name="NextButton" Grid.Column="2" Content="&gt;" 
        HorizontalAlignment="Right" Margin="20" 
        Click="NextButton_Click_1"/> 

          <ScrollViewer x:Name="Scroll" VerticalAlignment="Top" Grid.Row="1" VerticalScrollBarVisibility="Hidden"> 
       <Grid Grid.ColumnSpan="3" Name="Grid2"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="auto"/> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
         <ColumnDefinition Width="*" /> 
        </Grid.ColumnDefinitions> 
       </Grid> 
      </ScrollViewer> 

     </Grid> 

das erste Stück Code funktioniert nicht, der zweite funktioniert. Ich kann nicht verstehen, was falsch ist, ich verstehe nicht, warum es nicht in der ersten funktioniert. danke

Answer 1

Dies ist ein häufiger Fehler für Anfänger und Sie sollten sich nicht schlecht darüber fühlen. Die Sache mit dem Scroll-Viewer ist, dass es eine Höhe und Breite haben muss. Manchmal stellen Sie die Höhe und Breite ein. Manchmal lässt sich die Höhe und Breite durch die Größe des Containers festlegen. Recht?

Blick auf diese:

<ScrollViewer> 
    <Grid Height="1000" /> 
</ScrollViewer> 

In diesem Beispiel würde die Scroll-Betrachter wirken wie es nicht einmal da ist. Warum? Weil es keine Höhe und Breite hat. Es wäre nur so groß wie sein Inhalt in diesem Fall. Das siehst du im Grunde.

Blick auf diese:

<ScrollViewer Height="100"> 
    <Grid Height="1000" /> 
</ScrollViewer> 

Dies würde ganz gut vertikal scrollen, aber es würde nie horizontal scrollen. Kannst du sehen warum? Weil es keine Breite gibt. Manchmal ist dies das perfekte Szenario. Aber es ist eine andere Sache, die einen Entwickler unvorbereitet treffen kann.

Blick auf diese:

<StackPanel> 
    <ScrollViewer> 
     <Grid Height="1000" /> 
    </ScrollViewer> 
<StackPanel> 

Dies ist ein weiteres Szenario, das viele Entwickler fängt. Warum? Weil die Höhe eines Stack-Panels unendlich ist. Da die Höhe und die Breite im Grunde vom Container übernommen werden, hat der Scroll-Viewer nie einen Grund zum Scrollen, da er bereits erlaubt ist, auf eine unendliche Größe zu wachsen.

Blick auf diese:

<Grid> 
    <ScrollViewer> 
     <Grid Height="1000" /> 
    </ScrollViewer> 
<Grid> 

Perfect. Jetzt scrollt der Scroll-Viewer genau so, wie Sie es möchten, weil die Höhe und die Breite des Scroll-Viewers von der Höhe und der Breite seines Containers, dem Raster, übernommen werden. Und weil sich ein Gitter an die Größe des Fensters anpasst, sind Sie gut in Form.

Sie können natürlich das Verhalten des Gitters verderben, indem Sie es in ein Stackpanel stecken! Tun Sie das nicht, wenn Sie nicht wissen, was Sie tun und verursachen. Wenn Sie XAML noch nicht kennen, können Sie unter this free course auf Microsoft Virtual Academy zugreifen.

Ich hoffe, das hilft.

Viel Glück!