Question

I’m currently working on Windows Phone applications and I would like to use Reactive Extensions to create asynchronism to have a better UI experience.

I use the MVVM pattern: my View has a ListBox binded in my ViewModel to an ObservableCollection of Items. An Item has traditional properties like Name or IsSelected.

<ListBox SelectionMode="Multiple" ItemsSource="{Binding Checklist, Mode=TwoWay}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox Content="{Binding Name}" IsChecked="{Binding IsSelected, Mode=TwoWay}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

I instantiate my MainViewModel in App.xaml.cs:

public partial class App : Application
{
    private static MainViewModel _viewModel = null;

    public static MainViewModel ViewModel
    {
        get
        {
            if (_viewModel == null)
                _viewModel = new MainViewModel();

            return _viewModel;
        }
    }

    [...]
}

And I load my data in MainPage_Loaded.

public partial class MainPage : PhoneApplicationPage
{
   public MainPage()
    {
        InitializeComponent();
        this.DataContext = App.ViewModel;
        this.Loaded += new System.Windows.RoutedEventHandler(MainPage_Loaded);
    }

    private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        App.ViewModel.LoadData();
    }
}

I load my data from my ViewModel (I’m going to move that code to the Model later):

public class MainViewModel : ViewModelBase
{
    public ObservableCollection<Item> _checklist;

    public ObservableCollection<Item> Checklist
    {
        get
        {
            return this._checklist;
        }
        set
        {
            if (this._checklist != value)
            {
                this._checklist = value;
            }
        }
    }

    private const string _connectionString = @"isostore:/ItemDB.sdf";

    public void LoadData()
    {
        using (ItemDataContext context = new ItemDataContext(_connectionString))
        {
            if (!context.DatabaseExists())
            {
                // Create database if it doesn't exist
                context.CreateDatabase();
            }

            if (context.Items.Count() == 0)
            {
                [Read my data in a XML file for example]

                // Save changes to the database
                context.SubmitChanges();
            }

            var contextItems = from i in context.Items
                                select i;

            foreach (Item it in contextItems)
            {
                this.Checklist.Add(it);
            }
        }
    }

    [...]
}

And it works fine, items are updated in the View.

Now I want to create asynchronism. With a traditional BeginInvoke in a new method that I call from the View instead of LoadData it works fine.

public partial class MainPage : PhoneApplicationPage
{
    [...]

    private void MainPage_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        App.ViewModel.GetData();
    }
}

I use a property that I called CurrentDispatcher, it is filled in the App.xaml.cs with App.Current.RootVisual.Dispatcher.

public class MainViewModel : ViewModelBase
{
    [...]

    public Dispatcher CurrentDispatcher { get; set; }

    public void GetData()
    {
        this.CurrentDispatcher.BeginInvoke(new Action(LoadData));
    }

    [...]
}

But I would like to use Reactive Extentions. So I tried different elements of Rx like ToAsync or ToObservable for example but I had some “UnauthorizedAccessException was unhandled” with “Invalid cross-thread access” when I add an item to the Checklist.

I tried to ObserveOn other threads cause maybe the error comes from mix between the UI and the background threads but it doesn’t work. Maybe I don’t use Rx like I would be in that particular case?

Any help would be much appreciate.

EDIT after your answers:

Here is a code which works great!

public void GetData()
{
    Observable.Start(() => LoadData())
    .ObserveOnDispatcher()
    .Subscribe(list =>
    {
        foreach (Item it in list)
        {
            this.Checklist.Add(it);
        }
    });
}

public ObservableCollection<Item> LoadData()
{
    var results = new ObservableCollection<Item>();

    using (ItemDataContext context = new ItemDataContext(_connectionString))
    {
        //Loading

        var contextItems = from i in context.Items
                           select i;

        foreach (Item it in contextItems)
        {
            results.Add(it);
        }
    }

    return results;
}

As you see I didn’t use correctly before. Now I can use a ObservableCollection and use it in the Susbscribe. It’s perfect! Thanks a lot!

Answer 1

There appears to be no asynchronicity in your code (save the BeginInvoke, which I dont think is doing what you think it is doing).

I assume that you want to use Rx because your code is all blocking at the moment and the UI is unresponsive while the connection to the database is made and the data is loaded 🙁

What you want to do is perform the “heavy lifting” on a background thread and then once you have the values just add them to the ObservableCollection on the Dispatcher. You can do this one of three ways:

1. Return the entire collection in one go. You then loop through the list with a foreach loop adding to the ObservableCollection. This has the potential downside of blocking the UI (unresponsive app) if the list is too large
2. Return the collection one value at a time, adding each item to the ObservableCollection in an independent call to the dispatcher. This will keep the UI responsive but can take much longer to complete
3. Return the collection in buffered chunks and try to get the best of both worlds

The code you want may look like this

public IList<Item> FetchData()
{
  using (ItemDataContext context = new ItemDataContext(_connectionString))
  {
    //....
    var results = new List<Item>();
    foreach (Item it in contextItems)
    {
      results.Add(it);
    }
    return results;
  }
}
public void LoadData()
{
  Observable.Start(()=>FetchData())
            .ObserveOnDispatcher()
            .Subscribe(list=>
              {
                foreach (Item it in contextItems)
                {
                  this.Checklist.Add(it);
                }
              });
}

The code ain’t ideal for Unit testing, but it appears that this is not of interest to you any way (static members, VM with DB connectsions etc..) so this might just work?!