« scrolling Post-it » problème dans le contrôle WinRT XAML GridView

Question

J'ai un contrôle GridView très basique défini dans une application Windows Store page qui ressemble à ceci:

<GridView 
     x:Name="myGridView" 
     Grid.RowSpan="2" 
     Padding="30,137,40,46" 
     ItemsSource="{Binding Source={StaticResource myItemsViewSource}}" 
     ItemTemplate="{StaticResource My500x500ItemTemplate}" 
     SelectionMode="Multiple" 
     IsSwipeEnabled="True" 
     IsItemClickEnabled="True"> 

     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VirtualizingStackPanel Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
     <GridView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate> 
         <Grid Margin="1,0,0,6"> 
          <Button 
          Style="{StaticResource TextPrimaryButtonStyle}"> 
           <StackPanel Orientation="Horizontal"> 
            <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> 
            <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> 
           </StackPanel> 
          </Button> 
         </Grid> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
       <GroupStyle.Panel> 
        <ItemsPanelTemplate> 
         <VariableSizedWrapGrid/> 
        </ItemsPanelTemplate> 
       </GroupStyle.Panel> 
      </GroupStyle> 
     </GridView.GroupStyle> 
    </GridView> 

Lors de l'exécution, les données liées à myItemsViewSource apparaît dans la GridView contrôle comme je m'y attends.

Cependant, je rencontre un problème de défilement étrange quand il y a plus d'éléments dans la source de données que ce qui peut être affiché sur l'écran. La barre de défilement semble « résister » mon effort pour faire défiler la collection et ne se déplace légèrement la fenêtre, jusqu'à ce qu'il « pauses libres » et je peux faire défiler le reste des éléments:

la même chose se produit sur le chemin du retour, de droite à gauche: le défilement se déroule sans heurt jusqu'à ce que je assez proche du début de la zone défile, où il semble à nouveau « bâton »:

En pensant que le problème avait quelque chose à voir avec la virtualisation, j'ai essayé de changer le ItemsPanel pour le GridView en StackPanel au lieu d'un VirtualizingStackPanel, mais cela a eu l'effet encore pire d'empêcher l'affichage des éléments. Remarque: le GridView n'est hébergé dans aucune autre zone de défilement ou canevas.

Je vais poster ma solution de contournement ci-dessous, mais j'espère que quelqu'un a une réponse plus satisfaisante.

Answer 1

Vous devez supprimer la marge de gauche et le remplissage sur le GridView et l'ajouter à la déclaration ItemsPanel. Un peu déroutant car le template par défaut a un padding défini sur le gridview.

Voici le début de GridView fourni avec le modèle par défaut avec ma modification du remplissage sur le contrôle GridView et le jeu de marge de la déclaration ItemsPanel VirtualizingStackPanel.

<GridView 
     x:Name="itemGridView" 
     AutomationProperties.AutomationId="ItemGridView" 
     AutomationProperties.Name="Grouped Items" 
     Grid.RowSpan="2" 
     Padding="0,137,40,46" 
     ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" 
     ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick"> 

     <GridView.ItemsPanel> 
      <ItemsPanelTemplate>       
       <VirtualizingStackPanel Margin="116,0,0,0" Orientation="Horizontal"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 

Answer 2

Retrait de la propriété GridView.Padding et le remplacer par GridView.Margin résout le problème « de défilement collante »:

<GridView 
     x:Name="myGridView" 
     Grid.RowSpan="2" 
     Margin="30,137,40,46" <!-- replaced 'Padding' with 'Margin' --> 
     ItemsSource="{Binding Source={StaticResource myItemsViewSource}}" 
     ItemTemplate="{StaticResource My500x500ItemTemplate}" 

     ... 

Ceci est déconcertant pour moi, cependant, puisque le modèle de projet Visual Studio GridView utilise Rembourrage, pas de marge.

Quelqu'un est-il au courant d'une solution plus satisfaisante?

Modifier: a supprimé une déclaration trompeuse.

Answer 3

problème est le

<VirtualizingStackPanel Margin="116,0,0,0" Orientation="Horizontal"/> 

Modifier ceci: <StackPanel Margin="116,0,0,0" Orientation="Horizontal"/>