Windows应用商店应用XAML Gridview无法呈现数据

时间:2016-11-30 07:08:39

标签: c# xaml gridview uwp uwp-xaml

我有以下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不会呈现数据。底层视图模型(ProductList)包含数据。我可以将它绑定到ListView,它的工作原理。仅适用于Gridview,它不会呈现

如果我将gridview的ItemsPanel从ItemsWrapGrid更改为Stackpanel然后它的工作,但我不能使用Stackpanel,因为我希望列表由一个堆叠在一起的项目显示,就像在亚马逊应用程序中一样。

奇怪的情况是它适用于Windows 8.1 Phone应用程序,但在Windows 10中不起作用。任何帮助?

Expected

2 个答案:

答案 0 :(得分:0)

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

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>

答案 1 :(得分:0)

有点暂时修复此问题,将Itemspanel更改为wrapgrid并且现在正在使用

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