「粘性滾動」的問題

我有一個Windows Store應用頁面中定義一個非常基本的GridView控件，看起來像這樣：「粘性滾動」的問題

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

在運行時，勢必myItemsViewSource的數據出現在GridView控制，如我所料。

但是，當數據源中的項目多於可以在屏幕上顯示時，我遇到了一個奇怪的滾動問題。滾動條似乎「抵制」我努力以滾動的收集和只是略有移動視口，直到它「休息自由」，我也可以在項目的其餘部分滾動：

demonstration of problem scrolling right

demonstration of smooth scrolling beyond the sticking point

同樣的事情發生在回來的路上，由右至左：滾動情況順利，直到我得到足夠接近滾動區域，它會出現在「大棒」再次開始：

demonstration of problem scrolling left

認爲這個問題與虛擬化有關，我試着將GridView的ItemsPanel更改爲StackPanel而不是VirtualizingStackPanel，但是這樣做會阻止顯示任何項目。注意：GridView不在任何其他滾動區域或畫布中。

我會在下面發佈我的解決方法，但我希望有人有一個更令人滿意的答案。

來源

2012-11-11 camflint

我得到了同樣的問題。我認爲問題出在錯誤的內部項目模板上。實際上，滾動條不僅是粘性的，而且也是一寸一寸地調整自身。 – Youngjae

您應該刪除實際GridView上的左邊距和邊距，並將其添加到ItemsPanel聲明中。有點混亂，因爲默認的模板確實在gridview上設置了填充。

下面是默認模板附帶的GridView的開始，其中我編輯了GridView控件上的填充和VirtualizationStackPanel ItemsPanel聲明中設置的邊距。

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

來源

2013-01-17 14:27:07 Ant

謝謝，這完成了同樣的事情，而不影響滾動條的偏移量。 – camflint

如果您可以使用觸控設備（Win8平板電腦或像我這樣的聯想ThinkPad x230t）進行測試，則可滾動區域不同（使用鼠標滾動可啓用更多寬度...？）。而且，當用戶觸摸最右邊的'GridView'時，'GridView'有些震顫。 – Youngjae

卸下GridView.Padding財產，並與GridView.Margin替換它解決了「粘性滾動」的問題：

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

     ...

這是令人費解給我，但是，因爲在Visual Studio GridView的項目模板使用填充，而不是保證金。

有人知道更令人滿意的解決方案嗎？

編輯：刪除了一個誤導性陳述。

來源

2012-11-11 14:55:14 camflint

從填充更改爲邊距也會將滾動條的位置移動到底部。有沒有防止滾動條移動？ – Unknown1987

Ant的答案在下面爲我做了訣竅。 – camflint

問題是

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

更改爲：<StackPanel Margin="116,0,0,0" Orientation="Horizontal"/>

來源

2013-09-07 20:51:03 Evox

你會失去虛擬化:-)。是的，這是* a *解決方案，但如果要保留perf，則不是解決方案。核心問題實際上是在Windows 8.1中修復的場景中的已知問題 –

「粘性滾動」的問題

回答

相關問題