ProgressBar behaves incorrectly when enclosed in LongListSelector

Question

In my WP8 app I use Background Transfer Sevice and LongListSelector with ProgressBar as it's DataTemplate to display items download progress to user. The problem is that ProgressBar does not show real progress but keeps jumping back and forth.

Here's my XAML. LongListSelector periodically recieves a list of BackgroundTransferRequest's and uses ProgressBar to display them:

<phone:LongListSelector IsGroupingEnabled="False" x:Name="Views">
    <phone:LongListSelector.ListHeader>
        <StackPanel Style="{StaticResource M20}">
            <controls:TextTile Txt="Cancel downloads" Sign="x" Tap="CancelDownloads" />
        </StackPanel>
    </phone:LongListSelector.ListHeader>
    <phone:LongListSelector.ItemTemplate>
        <DataTemplate>
            <ProgressBar Maximum="{Binding TotalBytesToReceive}" Value="{Binding BytesReceived}" Minimum="0" />
        </DataTemplate>
    </phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>

LongListSelector gets updated periodically from code behind class:

Views.ItemsSource = BackgroundTransferService.Requests.ToList()

This issue happens in LongListSelector only in case if more than one item is displayed. Everything works fine If I try to use ListBox for example. Why is this thing happening and what should I do to fix it?

I took your XAML and was unable to recreate an issue. It appeared to work fine. Does the ProgressBar look indeterminate? Try setting ProgressBar.IsIndeterminate = false. Maybe a screenshot of the issue you're seeing would help? — Gary Johnson, Mar 01 '13 at 01:33
Just had a thought -- could you post the class for whatever type of object the LongListSelector.ItemsSource is bound to? (The thing with BytesReceived and TotalBytesToReceive on it) — Gary Johnson, Mar 01 '13 at 01:34
@GaryJohnson, ProgressBar is not intermediate, it does show progress but does it incorrectly: at one moment it can show 60%, the next moment 30% and so on. Class it's bound to is BackgroundTransferRequest (http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh239291(v=vs.105).aspx) — src091, Mar 01 '13 at 07:18

Gary Johnson · Accepted Answer · 2013-03-01T14:21:26.550

I couldn't fit this in a comment -- try this:

public class BackgroundTransferRequestWrapper : INotifyPropertyChanged {

    private BackgroundTransferRequest _request;

    public BackgroundTransferRequestWrapper(BackgroundTransferRequest request) {
        _request = request;
        _request.TransferProgressChanged += OnTransferProgressChanged;
    }

    private void OnTransferProgressChanged(object sender, BackgroundTransferEventArgs e) {
        BytesReceived = _request.BytesReceived;
        TotalBytesToReceive = _request.TotalBytesToReceive;
    }

    private long bytesReceived = 0;
    public long BytesReceived {
        get { return bytesReceived; }
        set {
            bytesReceived = value;
            OnPropertyChanged();
        }
    }

    private long totalBytesToReceive = 0;
    public long TotalBytesToReceive {
        get { return totalBytesToReceive; }
        set { totalBytesToReceive = value;
        OnPropertyChanged();}
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Instead of resetting the ItemsSource on a timer, instead just do this:

    foreach (var request in BackgroundTransferService.Requests) {
        Requests.Add(new BackgroundTransferRequestWrapper(request));
    }

In this example, Requests is an ObservableCollection bound to your ItemsSource. With this you shouldn't need to update manually at all -- the BackgroundTransferRequest events will drive the wrapper to notify prop changes as they happen.

I didn't test your example fully, but I suspect your issue has something to do with LongListSelector's UI virtualization and the way you're constantly resetting ItemsSource. Another possibility is the order of the requests might change every time you get them from BackgroundTransferService.

Good luck!

ProgressBar behaves incorrectly when enclosed in LongListSelector

1 Answers1