[WinRT] Binding ListView to CollectionViewSource in design time

By | January 16, 2013

Advertisement from Google

It would be really useful if you could see all binded data in design time in VisualStudio or Blend.

To do this you should set page DataContext in xaml:

        <viewModels:MainPageViewModel />

In this case you will use the same ViewModel for design and run time. If ViewModel require different data loading logic for design and run time you should use Windows.ApplicationModel.DesignMode.DesignModeEnabled in ViewModel constructor to determine in witch mode ViewModel is loading. For example:

if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
//Load data from run time
//Load data from design time

If you want you can set different ViewModel for design time. To do this set d:Page.DataContext in xaml:

Advertisement from Google

        <viewModels:DesignTimeMainPageViewModel />

All bindings work fine in design time, except binding to static CollectionViewSource:

            d:DesignSource="{Binding BalanceList}"
            Source="{Binding BalanceList}" />
<ListView ItemsSource="{Binding Source={StaticResource Balance}}" />

To display data in ListView that binded through CollectionViewSource in design time I’ve moved CollectionViewSource instance to ViewModel layer.

    private CollectionViewSource balance;
    public ICollectionView Balance
                if (balance == null)
                    balance = new CollectionViewSource();
                    balance.IsSourceGrouped = true;
                    balance.ItemsPath = new Windows.UI.Xaml.PropertyPath("Accounts");
                    Binding binding = new Binding();
                    binding.Source = BalanceList;

                    BindingOperations.SetBinding(balance, CollectionViewSource.SourceProperty, binding);

                return balance.View;


Every time when I reset BalanceList source collection, I call OnPropertyChanged("Balance"); to update binding.

4 thoughts on “[WinRT] Binding ListView to CollectionViewSource in design time

  1. arko

    I am trying to migrate my code from Windows Phone 8.0 to 8.1 (WinRT).
    Goodbye LongListSelector and welcome SemanticZoom and ListView.

    It is my understanding that to accomplish “groupedlist” functionality in 8.1 one must bind to a CollectionViewSource. And just like in your example here bindings work fine in run time but not in design time. I tried moving my CollectionViewSource from Page.Resources to code behind but the problem persists. Do you have any ideas how to get a “groupedlist” populated in design time in a WP8.1 app?

    1. druss Post author

      Try to set different ViewModel for design time View:
      <viewModels:DesignTimeMainPageViewModel />

  2. arko

    I made an app to better express what I am struggling with:

    The 8.0 app work both runtime and design time.
    The 8.1 port does not work neither runtime nor design time.

    How do I properly bind to my “groupedlist” in XAML and would I need to make changes to my code behind (i.e. ViewModel)?


Leave a Reply

Your email address will not be published. Required fields are marked *