title: Unable to get to "ScrollStates" in ScrollViewer Control
body: <p>I'm having a lot of trouble trying to get this working, and was hoping someone could help.</p>
  
  <p>I have a ScrollViewer in my WindowsPhone app, and I'm trying to emulate a similar control to the "Date/Time Chooser" that you'd see in the native Calendar app.  So my ScrollViewer contains a StackPanel with multiple square Canvases with rectangles and TextBlocks.  My intent is to watch the "ScrollStates", and when the VisualState changes to "NotScrolling", I'd then check the VerticalOffset of the ScrollViewer and animate a slide to the nearest "snap-to" position (ie. aligning the square to the correct/middle position).</p>
  
  <pre><code>&lt;ScrollViewer Name="sv" Width="100" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Disabled" Loaded="ScrollViewer_Loaded"&gt;
      &lt;StackPanel&gt;
          &lt;Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3"&gt;
              &lt;Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" /&gt;
              &lt;TextBlock Text="1" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" /&gt;
          &lt;/Canvas&gt;
          &lt;Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3"&gt;
              &lt;Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" /&gt;
              &lt;TextBlock Text="2" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" /&gt;
          &lt;/Canvas&gt;
          &lt;Canvas MaxWidth="77" MaxHeight="80" MinWidth="80" MinHeight="80" Margin="3"&gt;
              &lt;Rectangle Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Width="80" Height="80" /&gt;
              &lt;TextBlock Text="3" FontSize="36" FontWeight="Bold" TextAlignment="Center" HorizontalAlignment="Center" Width="70" Canvas.Left="6" Canvas.Top="14" LineHeight="48" /&gt;
          &lt;/Canvas&gt;
          ...
      &lt;/StackPanel&gt;
  &lt;/ScrollViewer&gt;
  </code></pre>
  
  <p>I've been looking at various examples that hook into the VisualStates, like <a href="http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx" rel="nofollow">http://blogs.msdn.com/b/ptorr/archive/2010/07/23/how-to-detect-when-a-list-is-scrolling-or-not.aspx</a> ; <a href="http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/" rel="nofollow">http://developingfor.net/2009/02/16/fun-with-the-wpf-scrollviewer/</a> ; <a href="http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx" rel="nofollow">http://blogs.msdn.com/b/slmperf/archive/2011/06/30/windows-phone-mango-change-listbox-how-to-detect-compression-end-of-scroll-states.aspx</a> ... all seem to have similar code to this:</p>
  
  <pre><code>// Visual States are always on the first child of the control template
  FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement; 
  </code></pre>
  
  <p>... which then goes on to seek out <code>VisualStateGroup group = FindVisualState(element, "ScrollStates");</code>, from which they can hook an Event to when it changes.</p>
  
  <p>However... whenever I try doing the <code>VisualTreeHelper.GetChild(sv,0) as FrameworkElement</code>, the app crashes with an exception of type 'System.ArgumentOutOfRangeException'.  If I output <code>VisualTreeHelper.GetChildrenCount(sv)</code>, it is always "0".  How is it seemingly working for everyone else? 8)</p>
  
  <p>Any help would be greatly appreciated.  Thanks!</p>
  
  <p>(As an alternative, has anyone made this kind of "Select Box" already in a reusable control I could use instead of trying to reinvent it?)</p>