LongListSelector control strectching events are not firing - xaml

Question

I've been trying to attach code to the StretchingBottom event of a LongListSelector with no success. This is the definition in XAML
<toolkit:LongListSelector x:Name="NewList"
IsFlatList="True"
IsBouncy="True"
Background="Transparent"
ShowListFooter="False"
ShowListHeader="{Binding ProgressBar}"
Margin="0,0,12,0"
ListHeaderTemplate="{StaticResource progressbarListHeader}"
ItemsSource="{Binding Items}"
ItemTemplate="{StaticResource Item}"
SelectionChanged="List_SelectionChanged"
StretchingBottom="List_StretchingBottom"/>
This is the method List_SelectionChanged:
private void List_StretchingBottom(object sender, EventArgs e)
{
var listbox = (LongListSelector)sender;
var viewModel = (ItemsViewModel)listbox.DataContext;
viewModel.LoadDataAfter();
}
When I put a breakpoint on the first line of the method it never gets hit even if I stretch all the way or wait. I've tried StretchingTop and StretchingComplete with no success.
Anyone can help?

Answer 1

I just got this working with much help from a MSDN blog and Codeplex
The examples there are for the ScrollViewer but the LongListSelector is using the ScrollViewer...
1st: add a Template to App.XAML inside the 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"/>
<VisualState x:Name="StretchingTop"/>
<VisualState x:Name="StretchingBottom"/>
</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>
This enables the visual state groups for Compression, so you can detect the Compression that appeares if the list is scrolled to an end. You want CompressionBottom as this happenes when the List is scrolled to the bottom.
Now I attach a handler to the LongListSelector.Loaded event and inside attach a handler to the ScrollViewer.State
private void LongListSelector_Loaded(object sender, RoutedEventArgs e)
{
//get TemplatedListBox inside LongListSelector
FrameworkElement tlb = VisualTreeHelper.GetChild(EventsDisplayList, 0) as FrameworkElement;
//get ScrollViewer inside TemplatedListBox
FrameworkElement sv = VisualTreeHelper.GetChild(tlb, 0) as FrameworkElement;
//MS says VisualGroups are inside first Child of ScrollViewer
FrameworkElement here = VisualTreeHelper.GetChild(sv, 0) as FrameworkElement;
var groups = VisualStateManager.GetVisualStateGroups(here);
VisualStateGroup vc = null;
foreach (VisualStateGroup g in groups)
{
if (g.Name == "VerticalCompression")
{
vc = g;
break;
}
}
vc.CurrentStateChanged +=new EventHandler<VisualStateChangedEventArgs>(LongListSelector_Compression);
}
private void LongListSelector_Compression(object sender, VisualStateChangedEventArgs e)
{
if (e.NewState.Name == "CompressionBottom")
{
//put your code for loading new items here
}
}
As you can see I don't use the LongListSelector.StretchingBottom event at all.
But it works :)