locked
How do you set the ItemsSource on a GridView? RRS feed

  • Question

  • I have a gridview, and but when I try to set the ItemsSource, I get an "ArgumentException:  Value does not fall within the expected range."

            protected async override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                await viewModel.LoadDataAsync();

                var collectionViewSource = new CollectionViewSource
                {
                    Source = viewModel.Carousels,
                    IsSourceGrouped = true,
                    ItemsPath = new PropertyPath("Products"),
                };

                gridView.ItemsSource = collectionViewSource;
            }

    Here are the relevant data models:

        public class HomeViewModel
        {
            public ObservableCollection<CarouselViewModel> Carousels { get; private set; }
        }

        public class CarouselViewModel
        {
            public string Label { get; set; }
            public ObservableCollection<ProductViewModel> Products { get; set; }
        }

        public class ProductViewModel
        {
            public string IsDefault { get; set; }
            public string Id { get; set; }
            public string Label { get; set; }
            public string KeyArtUrl { get; set; }
            public string ReleaseStart { get; set; }
            public string ReleaseEnd { get; set; }
            public string Rating { get; set; }
            public string Price { get; set; }
            public string InfoPageUrl { get; set; }
            public string FandangoId { get; set; }
            public string GalleryCount { get; set; }
        }


    This was so darn easy in Windows Phone using a LongListSelector.




    Thursday, May 31, 2012 5:26 AM

Answers

  • Hi,

    This is the sample I used as a base for my own app. It was relatively easy to understand how they implemented grouping and it worked fine for me:

     

    XAML GridView grouping and SemanticZoom sample

    http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

     

    And after making this work I agree that grouping items with LongListSelector was much easier (even if now I manage to do better and cooler things with GridView and SemanticZoom, and much faster than I ever was with LongListSelector on Windows Phone).


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

     

     

    Thursday, May 31, 2012 10:56 AM
    Moderator
  • I would try to declare the collectionviewsource in xaml

    <CollectionViewSource x:Name="groupCarouselsSource" IsSourceGrouped="true" /> 

    and do the binding to the gridView.

    Then after the page is dispatched, set the source:

    groupCarouselsSource.Source = viewModel.Carousels;
    groupCarouselsSource.ItemsPath = new PropertyPath("Products");


    Can Bilgin
    Blog CompuSight

    Thursday, May 31, 2012 2:17 PM

All replies

  • Hi,

    This is the sample I used as a base for my own app. It was relatively easy to understand how they implemented grouping and it worked fine for me:

     

    XAML GridView grouping and SemanticZoom sample

    http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e

     

    And after making this work I agree that grouping items with LongListSelector was much easier (even if now I manage to do better and cooler things with GridView and SemanticZoom, and much faster than I ever was with LongListSelector on Windows Phone).


    --------------------------------------------------------------------------------

    Alejandro Campos Magencio - Microsoft Escalation Engineer - Forum Moderator
     If my reply answers your question, please mark this post as answered.

     

     

    Thursday, May 31, 2012 10:56 AM
    Moderator
  • I would try to declare the collectionviewsource in xaml

    <CollectionViewSource x:Name="groupCarouselsSource" IsSourceGrouped="true" /> 

    and do the binding to the gridView.

    Then after the page is dispatched, set the source:

    groupCarouselsSource.Source = viewModel.Carousels;
    groupCarouselsSource.ItemsPath = new PropertyPath("Products");


    Can Bilgin
    Blog CompuSight

    Thursday, May 31, 2012 2:17 PM
  • Set the GridView.ItemsSource property to the View property of the CollectionViewSource:

    gridView.ItemsSource = collectionViewSource.View;

    Wednesday, September 25, 2013 8:20 PM