Windows Store App XAML Gridview not rendering data

Question

I have the following GridView which is bound to my ViewModel

XAML Code:

<GridView SelectionMode="None" ShowsScrollingPlaceholders="False" HorizontalAlignment="Stretch" Margin="2.5 3" 
            ItemsSource="{Binding ProductList}" Visibility="{Binding IsGridView, Converter={StaticResource BoolToVisibility}}"
                          SizeChanged="SetListItemsWidth" ScrollViewer.VerticalScrollMode="Disabled"
                          ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Stretch">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <local:ProductListControl Tag="{Binding id}" Margin="3 0 3 3" Tapped="GotoProduct"/>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

Model:

 public class ProductC1View : INotifyPropertyChanged
 { 
 public string ScreenTitle
    {
        get { return _ScreenTitle; }
        set
        {
            _ScreenTitle = value;
            OnPropertyChanged("ScreenTitle");
        }
    }
   public ObservableCollection<ProductDisplay> ProductList { get; set; }
   }

VIEWMODEL:

class ProductC1ViewModel : INotifyPropertyChanged
{
  public ProductC1ViewModel()
    {
        this.View = new ProductC1View();
    }
    private async void ApplyFilter(object obj)
    {
        View.ProductList.Clear();
        View.IsProductsAvailable = true;
   var lstData = await _objController.GetSubCategoryDetails(View);
        foreach (var product in lstData.catalogs)  
   View.ProductList.Add(_objHelper.FormatProductDisplayDetails(product));
    }
}

The GridView is bound to an ObservableCollection . Everything works fine on Intial load or after appending new items to the collection.

But when I clear the items in the collection in case of applying filter on the data and add new items to the collection the GridView doesn't render data. The Underlying Viewmodel(ProductList) contains the data. I can bind it to a ListView and it works. Only for Gridview it doesn't render

And if I change the ItemsPanel of the gridview from ItemsWrapGrid to Stackpanel then its working, but I can't use Stackpanel since I want the list to be displayed by one item stacked next to each other like in Amazon app.

The weird case is it works in Windows 8.1 Phone app but doesn't work in Windows 10. Any help?

Answer 1

You need to add RaisePropertyChanged (require Mvvmlight) in ProductList setter.

private ObservableCollection<ProductDisplay> _productList;
 public ObservableCollection<ProductDisplay> ProductList
 {
     get
        {
            return _productList;
        }
    set
        {
            _productList = value;
            RaisePropertyChanged(()=>ProductList);
        }
 }

Or staying with just INotifyPropertyChanged you need to implement the PropertyChangedEventHandler ( like in this tutorial):

private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

private ObservableCollection<ProductDisplay> _productList;
public ObservableCollection<ProductDisplay> ProductList
     {
         get
            {
                return _productList;
            }
        set
            {
                _productList = value;
               NotifyPropertyChanged();
            }
     }

And you don't necessary need a GridView to display tiles of pictures :

<ListBox  ItemsSource="{Binding AllDesignSheetsInDB}" SelectedItem="{Binding CurrentDesignSheet}"  BorderBrush="LightGray" BorderThickness="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled"  >
    <ItemsPanelTemplate>
        <WrapPanel />
    </ItemsPanelTemplate>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:ProductListControl Tag="{Binding id}" Margin="3 0 3 3" Tapped="GotoProduct"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

Kind of got a temporary fix for this, changed the Itemspanel to wrapgrid and it's working now

 <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid FlowDirection="LeftToRight" Orientation="Horizontal"></WrapGrid>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>