Partager via

How to detect when a list is scrolling (or not)

  • Article

One of the UI features of lists on Windows Phone 7 is that the "scroll bars" don't really act like traditional scroll bars; they are non-interactive and they only appear when the list is actually scrolling. To achieve this, the Silverlight team added a new visual state group that is used in the default control template for showing / hiding the scroll bars.

You can get programmatic access to the scroll state with the following approach. First, paste this XAML into the ContentGrid of a new WP7 application:

<ListBox FontSize="50" x:Name="theList">
<ListBoxItem Content="Item 00"/>
<ListBoxItem Content="Item 01"/>
<ListBoxItem Content="Item 02"/>
<ListBoxItem Content="Item 03"/>
<ListBoxItem Content="Item 04"/>
<ListBoxItem Content="Item 05"/>
<ListBoxItem Content="Item 06"/>
<ListBoxItem Content="Item 07"/>
<ListBoxItem Content="Item 08"/>
<ListBoxItem Content="Item 09"/>
<ListBoxItem Content="Item 10"/>
<ListBoxItem Content="Item 11"/>
<ListBoxItem Content="Item 12"/>
<ListBoxItem Content="Item 13"/>
<ListBoxItem Content="Item 14"/>
<ListBoxItem Content="Item 15"/>
<ListBoxItem Content="Item 16"/>
<ListBoxItem Content="Item 17"/>
<ListBoxItem Content="Item 18"/>
<ListBoxItem Content="Item 19"/>
<ListBoxItem Content="Item 20"/>
<ListBoxItem Content="Item 21"/>
<ListBoxItem Content="Item 22"/>
<ListBoxItem Content="Item 23"/>
<ListBoxItem Content="Item 24"/>
<ListBoxItem Content="Item 25"/>
<ListBoxItem Content="Item 26"/>
<ListBoxItem Content="Item 27"/>
<ListBoxItem Content="Item 28"/>
<ListBoxItem Content="Item 29"/>
</ListBox>

Now add the following to the code-behind file:

public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}

bool alreadyHookedScrollEvents = false;

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
if (alreadyHookedScrollEvents)
return;

  alreadyHookedScrollEvents = true;
  ScrollViewer viewer = FindSimpleVisualChild<ScrollViewer>(theList);
if (viewer != null)
{
// Visual States are always on the first child of the control template
FrameworkElement element = VisualTreeHelper.GetChild(viewer, 0) as FrameworkElement;
if (element != null)
{
VisualStateGroup group = FindVisualState(element, "ScrollStates");
if (group != null)
{
group.CurrentStateChanging += (s, args) => PageTitle.Text = args.NewState.Name;
}
}
}
}

VisualStateGroup FindVisualState(FrameworkElement element, string name)
{
if (element == null)
return null;

  IList groups = VisualStateManager.GetVisualStateGroups(element);
foreach (VisualStateGroup group in groups)
if (group.Name == name)
return group;

  return null;
}

T FindSimpleVisualChild<T>(DependencyObject element) where T : class
{
while (element != null)
{

    if (element is T)
return element as T;

    element = VisualTreeHelper.GetChild(element, 0);
}

  return null;
}

What this does is attach to the CurrentStateChanging event of the VisualStateGroup, which will be raised every time the scroll state changes from "Scrolling" to "NotScrolling" or vice-versa. There's a bunch of infrastructure code to walk the visual tree and pull out a state group, but the core code is very simple:

  1. First we attach a handler called MainPage_Loaded to the Page.Loaded event
  2. When the page loads, we call FindSimpleVisualChild to get the ScrollViewer child of the list (this is a pretty dumb function)
    1. We make sure to only do this once, because the page could get loaded more than once if it is navigated
  3. Then we call FindVisualState to get the named visual state from the first child of the ScrollViewer
  4. Then we add a handler to the CurrentStateChanging event

Comments

  • Anonymous
    July 30, 2010
    Peter, thanks! The sample code was truly helpful! I tested out the mechanism. The "Scrolling" and "NotScrolling" events are fired correctly when the list is allowed to a stop naturally. However, when you stop the scrolling by tapping on the screen, the "NotScrolling" event is not fired, and the visual state remains in "Scrolling" even though the scrolling has been stopped by the user. Is this as designed or possibly a bug? I don't know how this is implemented in Silverlight, but it seems that a MouseLeftButtonUp event (a tap) on the ScrollViewer should correspond to setting the visual state to "NotScrolling"? The build I tested this on was the Beta build.

  • Anonymous
    August 01, 2010
    Thanks - that does indeed look like a bug!

  • Anonymous
    September 09, 2010
    Hi Peter! Thanks for the sample. I tried it, but, unfortunately, it didn't work on my side. Because IList groups = VisualStateManager.GetVisualStateGroups(element); returns empty list. May be you know why? Thanks a lot for help.

  • Anonymous
    September 10, 2010
    Hi Gavrilaf, I just pasted the code from the post into the latest build of Windows Phone Developer Tools and it worked fine - have you customized your ListBox or something?

  • Anonymous
    October 11, 2010
    Introduction One of the things I've been working on for a while is a "smart" ListBox implementation that