Windows Store App XAML Gridview 未呈现数据

Windows Store App XAML Gridview not rendering data

我有以下 GridView 绑定到我的 ViewModel

XAML代码:

<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>

型号:

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

视图模型:

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));
    }
}

GridView 绑定到 ObservableCollection。在初始加载或将新项目添加到集合后一切正常。

但是当我在对数据应用过滤器的情况下清除集合中的项目并将新项目添加到集合时,GridView 不会呈现数据。底层 Viewmodel(ProductList) 包含数据。我可以将它绑定到 ListView 并且它可以工作。仅适用于 Gridview,它不呈现

如果我将 gridview 的 ItemsPanel 从 ItemsWrapGrid 更改为 Stackpanel,那么它可以正常工作,但我不能使用 Stackpanel,因为我希望列表显示为像在 Amazon 应用程序中那样彼此相邻堆叠的一个项目。

奇怪的是,它在 Windows 8.1 Phone 应用程序中有效,但在 Windows 10 中无效。有帮助吗?

您需要在 ProductList 中添加 RaisePropertyChanged(需要 Mvvmlight)setter。

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

或者只使用 INotifyPropertyChanged,您需要实施 PropertyChangedEventHandler(如本教程中所示):

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();
            }
     }

而且您不需要 GridView 来显示图片块:

<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>

对此有一个临时修复,将 Itemspanel 更改为 wrapgrid,现在可以使用了

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