Question

I’m trying to implement the “infinite scrolling” within a Windows Phone 7.1 project.

Most other posts point to this MSDN Blog link.

I’m struggling to implement this though, because it doesn’t really give much away as to how it works or where to put the code. Also, when I paste the code, it appears to have spaces missing, so I have been through the code and added missing spaces and editing it to the best of my knowledge.

I have added the XAML code to the <Application.Resources> of the App.xaml is this correct, here is the contents of my App.xaml file:

<Application 
    x:Class="ScrollWindowBottom.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">

    <!--Application Resources-->
    <Application.Resources>

        <Style TargetType="ScrollViewer">
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" 
Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="VerticalScrollBar" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                            <DoubleAnimation Storyboard.TargetName="HorizontalScrollBar" 
Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling">
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="VerticalCompression">
                                    <VisualState x:Name="NoVerticalCompression"/>
                                    <VisualState x:Name="CompressionTop"/>
                                    <VisualState x:Name="CompressionBottom"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HorizontalCompression">
                                    <VisualState x:Name="NoHorizontalCompression"/>
                                    <VisualState x:Name="CompressionLeft"/>
                                    <VisualState x:Name="CompressionRight"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" Content="{TemplateBinding Content}" 
ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                <ScrollBar x:Name="VerticalScrollBar" IsHitTestVisible="False" Height="Auto" Width="5" 
HorizontalAlignment="Right" VerticalAlignment="Stretch" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Value="{TemplateBinding VerticalOffset}" 
Orientation="Vertical" ViewportSize="{TemplateBinding ViewportHeight}" />
                                <ScrollBar x:Name="HorizontalScrollBar" IsHitTestVisible="False" Width="Auto" Height="5" 
HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" 
IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{TemplateBinding HorizontalOffset}" 
Orientation="Horizontal" ViewportSize="{TemplateBinding ViewportWidth}" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Application.Resources>

    <Application.ApplicationLifetimeObjects>
        <!--Required object that handles lifetime events for the application-->
        <shell:PhoneApplicationService 
            Launching="Application_Launching" Closing="Application_Closing" 
            Activated="Application_Activated" Deactivated="Application_Deactivated"/>
    </Application.ApplicationLifetimeObjects>

</Application>

Here’s my MainPage.xaml.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace ScrollWindowBottom
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void MainPage_Loaded(object sender, RoutedEventArgs e) 
     { 
         if(!App.ViewModel.IsDataLoaded) 
         { 
             App.ViewModel.LoadData(); 
         } 

         if(alreadyHookedScrollEvents) 
             return; 

         alreadyHookedScrollEvents = true; 
         MainListBox.AddHandler(ListBox.ManipulationCompletedEvent, (EventHandler<ManipulationCompletedEventArgs>)LB_ManipulationCompleted, true); 
         sb = (ScrollBar)FindElementRecursive(MainListBox, typeof(ScrollBar)); 
         sv = (ScrollViewer)FindElementRecursive(MainListBox, typeof(ScrollViewer)); 

         if(sv != null) 
         { 
             // Visual States are always on the first child of the control template 
            FrameworkElement element = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement; 
             if(element != null) 
             { 
                 VisualStateGroup group = FindVisualState(element, "ScrollStates"); 
                 if(group != null) 
                 { 
                     group.CurrentStateChanging += newEventHandler<VisualStateChangedEventArgs>(group_CurrentStateChanging); 
                 } 
                 VisualStateGroup vgroup = FindVisualState(element, "VerticalCompression"); 
                 VisualStateGroup hgroup = FindVisualState(element, "HorizontalCompression"); 
                 if(vgroup != null) 
                 { 
                     vgroup.CurrentStateChanging += newEventHandler<VisualStateChangedEventArgs>(vgroup_CurrentStateChanging); 
                 } 
                 if(hgroup != null) 
                 { 
                     hgroup.CurrentStateChanging += newEventHandler<VisualStateChangedEventArgs>(hgroup_CurrentStateChanging); 
                 } 
             } 
         }           

     }

  private UIElement FindElementRecursive(FrameworkElement parent, Type targetType) 
       { 
           int childCount = VisualTreeHelper.GetChildrenCount(parent); 
           UIElement returnElement = null; 
           if (childCount > 0) 
           { 
               for (int i = 0; i < childCount; i++) 
               { 
                   Object element = VisualTreeHelper.GetChild(parent, i); 
                   if (element.GetType() == targetType) 
                   { 
                       return element as UIElement; 
                   } 
                   else 
                   { 
                       returnElement = FindElementRecursive(VisualTreeHelper.GetChild(parent, i) as FrameworkElement, targetType); 
                   } 
               } 
           } 
           return returnElement; 
       }


       private 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; 
       }
    }
}

With these two pieces of code in place, when I try to run my application to the Emulator I just get a load of errors:

Answer 1

It appears that you’re missing the main XAML required, ie. the MainListBox element on MainPage.xaml. You have added code that references it from the article, but not actually got a ListBox on the page you’re trying to use it on.

I would recommend downloading the ZIP file from your linked MSDN Blog Article and taking a look at the full example to see what code you’ll need from there.

Note also that this solution is the older method of doing it, and a new way using LongListSelector is now recommended. For more reference see this blog post from Microsoft on LongListSelector and also the Windows Phone Toolkit to get hold of LongListSelector for your own projects (note that it is included natively in Windows Phone 8).