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

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