Rendering ListBox takes too long on Windows Phone

Question

I am working on a Windows Phone 7 Application using Local SQLite Database and I'm having an issue with the rendering time of pages that use DataBinding.

Currently it takes 60-70ms to retrieve the data from the database. Then it takes about 3100ms to render the data retrieved using a ListBox with DataBinding.

Here you can see the DataTemplate of the ListBox:

<DataTemplate x:Key="ListBoxItemTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="68" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="TimeColumn"
                        Text="{Binding TimeSpan}" Grid.Column="0" Grid.Row="0"
                        Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <TextBlock Text="{Binding Stop.StopName}" Grid.Column="1" Grid.Row="0" 
                                Margin="15,0,0,0" TextWrapping="NoWrap" Foreground="Black"
                                HorizontalAlignment="Left" VerticalAlignment="Center" />
    </Grid>
 </DataTemplate>

Comment: I have tried it using Canvas instead of Grid too, same result.

Then, the database loads data into a CSList (using ViciCoolStorage) and that gets Binded to the ListBox:

StationList.ItemsSource = App.RouteViewModel.RouteStops;

Comment: I have tried to add the elements of the CSList to an ObservableCollection and bind that to the interface but didn't seem to change anything.

Question: Am I doing something wrong that results in a huge load time - even if just loading 10 elements -, or this is normal? Do you have any recommendations to get a better performance with DataBinding?

Thank you for your answers in advance!

Corresponding Code Parts:

RouteViewModel.cs

private Route rRoute;
public Route Route
{
    get
    {
        if (rRoute != null)
        {
            return rRoute;
        }
        else
        {
            return new Route();
        }
    }
}

public void LoadRoute(string index)
{
    try
    {
        if (rRoute.RouteId != index)
        {
            RouteLoaded = false;
            StationsLoaded = false;
            TimetableLoaded = false;
        }
    }
    catch (Exception) { }

    this.index = index;

    if (!RouteLoaded)
    {
        NotifyPropertyChanging("Route");
        rRoute = Route.ReadSafe(index);
        RouteLoaded = true;
        NotifyPropertyChanged("Route");
    }
}

private CSList<RouteTime> rtLine;
public CSList<RouteTime> RouteStops
{
    get
    {
        if (rtLine != null)
        {
            return rtLine;
        }
        else
        {
            return new CSList<RouteTime>();
        }
    }
}

public void LoadRouteStops()
{
    LoadRoute(index);

    if (!this.StationsLoaded)
    {
        NotifyPropertyChanging("RouteStops");
        rtLine = rRoute.RouteTimes.FilteredBy("DirectionId = @DirectionId", "@DirectionId", this.direction).OrderedBy("TimeSpan");
        NotifyPropertyChanged("RouteStops");

        StationsLoaded = true;
    }
}

RouteView.xaml.cs

private string index;
private bool visszaut = false;

public RouteView()
{
    InitializeComponent();
    Loaded += new System.Windows.RoutedEventHandler(RouteView_Loaded);
}

void RouteView_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
    DataContext = App.RouteViewModel;
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    NavigationContext.QueryString.TryGetValue("index", out index);

    App.RouteViewModel.LoadRoute(index);
    App.RouteViewModel.Direction = Convert.ToInt32(visszaut);
    App.RouteViewModel.LoadRouteStops();
    StationList.ItemsSource = App.RouteViewModel.RouteStops;
}

RouteTime.cs - Class Implementation

[MapTo("RouteTimes")]
public class RouteTime : CSObject<RouteTime, int>
{
    public int RouteTimeId
    {
        get
        {
            return (int)GetField("RouteTimeId");
        }
        set
        {
            SetField("RouteTimeId", value);
        }
    }

    public int RouteId
    {
        get
        {
            return (int)GetField("RouteId");
        }
        set
        {
            SetField("RouteId", value);
        }
    }

    public int StopId
    {
        get
        {
            return (int)GetField("StopId");
        }
        set
        {
            SetField("StopId", value);
        }
    }

    public int TimeSpan
    {
        get
        {
            return (int)GetField("TimeSpan");
        }
        set
        {
            SetField("TimeSpan", value);
        }
    }

    public Direction DirectionId
    {
        get
        {
            return (Direction)GetField("DirectionId");
        }
        set
        {
            SetField("DirectionId", value);
        }
    }

    [OneToOne(LocalKey = "StopId", ForeignKey = "StopId")]
    public Stop Stop
    {
        get
        {
            return (Stop)GetField("Stop");
        }
        set
        {
            SetField("Stop", value);
        }
    }

    [ManyToOne(LocalKey = "RouteId", ForeignKey = "RouteId")]
    public Route Route
    {
        get
        {
            return (Route)GetField("Route");
        }
        set
        {
            SetField("Route", value);
        }
    }
}

score 1 · Accepted Answer · answered Nov 13 '12 at 14:37

Okay so, in this scenario it seems the source of the slow rendering was the [OneToOne] connection between the RouteTime and Stop classes. If I bind to any of the variables that is stored in the linked class, the rendering takes a long time.

Fixed by

I have added a new partial class in the code where I need to show the results.

public partial class StopTimes
{
    public int TimeSpan
    {
        get;
        set;
    }

    public string StopName
    {
        get;
        set;
    }
}

Using an ad-hoc query in Vici CoolStorage, I've made my own query to request the data needed and viola, everything is there and rendering didn't take more then 1 second. Perhaps, during the rendering it requests the StopName field with an SQLQuery one by one?

Don't know, but thank you for your help anyway :)

score 0 · Answer 2 · answered Nov 10 '12 at 04:57

0

DataBinding should not be the problem in this scenario - I never had any problems with it. It has something to do with your SQL DB for sure. I had lists of around 200 items, and it rendered fine under a reasonable time-slot of 100ms.

It either is your SQL implementation or you are using ViciCoolStorage wrong. Post your code.

answered Nov 10 '12 at 04:57

I have added the corresponding code parts to the post. It contains the class implementation of the objects rendered on the page, the ViewModel which loads the data from the database and the view itself. In the meantime, I'll try to search for another SQLite Library and test the code with it. – Bhawk1990 Nov 10 '12 at 11:56

score 0 · Answer 3 · answered Nov 12 '12 at 23:06

0

Have you tried doing the filtering of your list outside of the LoadRouteStops() method? Maybe in the code behind instead of the viewModel? It seems like a lot of work to be done in between propertyChanging and propertyChanged notifications.

answered Nov 12 '12 at 23:06

Lance McCarthy

1,884
1
20
40

It seems like I have found the source of the problem, I have added an answer to the question. Thank you for your help! – Bhawk1990 Nov 13 '12 at 14:40

score 0 · Answer 4 · answered Nov 13 '12 at 00:56

0

I'm confused: How do you do local SQLite on Windows Phone 7? Did you mean WP8 where this is supported? In any case, consider using LongListSelector (built into WP8 - Toolkit in WP7), since it does a better job with virtualization when you have a lot of items to render.

answered Nov 13 '12 at 00:56

dotMorten

1,953
1
14
10

I am a Windows Phone 7 developer, and I am using Vici CoolStorage to connect to the database. [link](http://viciproject.com/coolstorage) – Bhawk1990 Nov 13 '12 at 14:05

score 0 · Answer 5 · edited May 23 '17 at 12:11

The problem is mostly because of setting a lot of binding. Try to keep bindings minimal and try to do the hard work on the code behind. Such as;

"binding a list of string to xaml one by one"
versus
"by string.join method with just one binding to a text block"

I had

<TextBlock Text="{Binding Times[0]}"/>
<TextBlock Text="{Binding Times[1]}"/>
...
<TextBlock Text="{Binding Times[9]}"/>

And changed to

<TextBlock Text="{Binding TimesToLongString}"/>

This fixed the delay.
Used to load in 9 sec with 3 items.
Now it loads within 110ms with 10 items.

To check the time it takes to load the list, you can check out this post

Rendering ListBox takes too long on Windows Phone

5 Answers5