I'm working on an app for Windows Phone (Silverlight WP 8.0) with a custom UserControl containing three LongListSelectors. This UserControl sits inside of a Panorama. When an item is selected from the first list, the user control changes visual states and animates the second list in, and the same for the third. The problem I'm encountering is the long load time between changing the ItemsSource of the list (either explicitly or through binding) and the actual rendering of the items. With a list of about 20 items, the time is at least 500ms, sometimes over 1 second. This seems unreasonable. Here's the XAML I'm working with:
MainPage.xaml:
<phone:Panorama Template="{StaticResource TunrPanorama}">
<!--Panorama item one-->
<phone:PanoramaItem Background="White" Style="{StaticResource MusicPanoramaItemStyle}">
<tunr:LibraryControl DataContext="{Binding}" TrackSelected="LibraryControl_TrackSelected" />
</phone:PanoramaItem>
LibraryControl.xaml:
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel x:Name="stackPanel" Grid.Row="0" Orientation="Vertical" Height="108">
<!-- Some headers here -->
</StackPanel>
<Grid Grid.Row="1" Margin="12,0,0,0">
<!-- List number 1 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_artists" VerticalAlignment="Stretch" ItemsSource="{Binding ArtistList}" SelectionChanged="music_artists_SelectionChanged" RenderTransformOrigin="0.5,0.5">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="0,6,0,6">
<StackPanel>
<TextBlock Text="{Binding}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="Black"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<!-- List number 2 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_albums" LayoutMode="Grid" GridCellSize="190,190" SelectionChanged="music_albums_SelectionChanged" RenderTransformOrigin="0.5,0.5">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="6,6,6,6">
<Grid>
<Border Width="178" Height="178" Background="#FF838383" />
</Grid>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
<!-- List number 3 -->
<phone:LongListSelector Grid.Row="0" Grid.Column="0" x:Name="music_tracks" SelectionChanged="music_tracks_SelectionChanged">
<phone:LongListSelector.RenderTransform>
<CompositeTransform/>
</phone:LongListSelector.RenderTransform>
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<ListBoxItem Margin="0,6,0,6">
<StackPanel>
<TextBlock Text="{Binding Title}" TextWrapping="NoWrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" Foreground="Black"/>
</StackPanel>
</ListBoxItem>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
</Grid>
Here's the code that populates the list:
(DataContext as LibraryViewModel).SelectAlbum(album).ContinueWith((songs) => {
Dispatcher.BeginInvoke(() =>
{
music_tracks.ItemsSource = songs.Result;
VisualStateManager.GoToState(this, "Tracks", true);
});
});
All the SelectAlbum method above does now is return a list of newly created Song instances - no other processing is done, so this should not be any sort of performance hog. But still there is a huge delay in rendering.
I've turned off transitions in my visual state changes to no avail; the list still takes too long to load. I've also experimented by creating a fresh new project with a LLS inside of a Panorama, populating it with a button press to see the delay. It's almost instant. The only difference between that and my project seems to be the UserControl I've nested these lists inside of - can that be the cause of this bad performance?
Any suggestions are very much appreciated!
For good measure, here's the class of the item I'm rendering:
public class SongModel
{
public Guid SongID { get; set; }
//public string SongFingerPrint { get; set; }
public Guid OwnerId { get; set; }
public string SongMD5 { get; set; }
public string Title { get; set; }
public string Artist { get; set; }
public string Album { get; set; }
public int TrackNumber { get; set; }
public int DiscNumber { get; set; }
public int Year { get; set; }
public string Genre { get; set; }
public double Length { get; set; }
}
