Question

In my app I have a very strange scrollbar behaviour: The bottom scrollbar changes its size randomly while scrolling. I use a GridView with a lot of items in there (shoretened code):

<GridView
  Margin="0,-3,0,0"
  Padding="116,0,40,46">

  <GridView.ItemsPanel>
     <ItemsPanelTemplate>
         <VirtualizingStackPanel Orientation="Horizontal"/>
     </ItemsPanelTemplate>
  </GridView.ItemsPanel>
  <GridView.GroupStyle>
     <GroupStyle>
         <GroupStyle.HeaderTemplate>
             <DataTemplate>
                <!-- Data Template here -->         
             </DataTemplate>
         </GroupStyle.HeaderTemplate>
         <GroupStyle.Panel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid ItemWidth="250" ItemHeight="250" Orientation="Vertical" Margin="0,0,80,0"  MaximumRowsOrColumns="4"/>
            </ItemsPanelTemplate>
         </GroupStyle.Panel>
     </GroupStyle>
  </GridView.GroupStyle>
</GridView>

I also found out that the behaviour vanishes if I remove the padding. I can set the paddings’ values as margins, but then the scrollbar also has the margin what looks really ugly…

How can I change that? – I remarked several other apps have this problem…

Thanks for your help!

Answer 1

What you are seeing (“random scroll bar size changes”) is a consequence of the virtualisation of the items within the grid (actually within the VirtualisingStackPanel). As the virtualised container within your grid view loads more items for display, the scroll viewer resizes according to its contents.

If the behaviour is causing you issues, try to override the items panel template and specify an non-virtualising container for your elements.