Scrollviewer non funziona su una griglia

Question

Ciao sto imparando UWP in Windows 10, ho bisogno di scorrere una griglia. Hanno due pezzi di codice sono molto simili, il mio intento è quello di scorrere Griglia2, il primo pezzo di codice:

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

nella seconda parte del codice:

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

il primo pezzo di il codice non funziona, il secondo funziona. Non riesco a capire cosa c'è che non va, non capisco perché non funzioni nel primo. grazie

Answer 1

Questo è un errore comune per i principianti e non dovresti sentirti male. La cosa da ricordare sul visualizzatore scroll è che DEVE avere un'altezza e una larghezza. A volte si imposta l'altezza e la larghezza. A volte si lascia che l'altezza e la larghezza siano impostate dalla dimensione del contenitore. Destra?

Guardate questa:

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

In quel campione, lo spettatore di scorrimento sarebbe agire come non è nemmeno lì. Perché? Perché non ha altezza e larghezza. In tal caso, avrebbe solo le stesse dimensioni del suo contenuto. Questo è fondamentalmente ciò che stai vedendo.

Guardate questa:

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

Ciò scorrere bene in verticale, ma non sarebbe mai scorrere orizzontalmente. Riesci a vedere perché? È perché non c'è larghezza. A volte questo è lo scenario perfetto. Ma è un'altra cosa che può prendere alla sprovvista uno sviluppatore.

Guardate questa:

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

Questo è un altro scenario che cattura un sacco di sviluppatori. Perché? Perché l'altezza di un pannello di stack è infinita. Poiché l'altezza e la larghezza sono fondamentalmente ereditate dal contenitore, il visualizzatore di pergamene non ha mai un motivo per scorrere poiché consente già di crescere a dimensioni infinite.

Guardate questa:

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

Perfetto. Ora il visualizzatore di scorrimento scorrerà esattamente come lo desideri perché l'altezza e la larghezza del visualizzatore di scorrimento sono ereditate dall'altezza e dalla larghezza del suo contenitore, la griglia. E poiché una griglia si limita alle dimensioni della finestra, sei in ottima forma.

È possibile rovinare il comportamento della griglia, ovviamente inserendolo in un pannello di stack! Non farlo a meno che tu non sappia cosa stai facendo e causando. Se sei nuovo di XAML potresti goderti lo this free course su Microsoft Virtual Academy.

Spero che questo aiuti.

Buona fortuna!