Strange scrollbar behaviour

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!

score 3 · Accepted Answer · answered Oct 21 '12 at 15:21

3

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.

answered Oct 21 '12 at 15:21

ZombieSheep

29,603
12
67
114

Thanks for your message. What you describe sounds to fit my problem. The interesting thing is, that the scrollbar is longer when it is all at the left side and gets shorter as soon as you start scrolling right. Then it keeps it's size... How can I achieve what you suggested? Thanks. – casaout Oct 21 '12 at 17:32
Maybe just change your VirtualisingStackPanel out for a regular StackPanel? – ZombieSheep Oct 23 '12 at 08:31
This answer is bang on the money for me - I used a virtualizing panel thinking it was just best practise; but the scrollbar was behaving very odd. Replacing it with StackPanel did the trick. Just as well there aren't many items on this particular page. – Andras Zoltan Jan 21 '13 at 16:25

score 0 · Answer 2 · answered Oct 21 '12 at 14:47

I think you should put the Grid in ScrollViewer tag.

<ScrollViewer Height="200" Width="200" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<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>
 </ScrollViewer>

Try adjusting it according to your application. Refer ScrollViewer for properties and events here. Do something new here.

hi. Thanks for your post. Unfortunately, this is not possible within the 'SemanticZoom.ZoomedInView'. According to the error message, the 'ISemanticZoomInformation'-type was expected (a GridView and not a ScrollViewer). Do you have a suggestion how to handle that? Thanks! — casaout, Oct 21 '12 at 17:30

score 0 · Answer 3 · answered Apr 10 '13 at 04:50

What @ZombieSheep explained was actually quite correct but that scenario happens only when you utilize the incremental loading of the gridview/listview however in your particular case the scrollbar changes size because of the padding property of the gridview if you can set the right and left padding values (Padding="116,0,40,46") to zero or something less then you can see the difference, there might be no need to place the gridview inside the scrollviewer

Strange scrollbar behaviour

3 Answers3