Question

我正在尝试使用数据虚拟化和编译绑定使用图片库中的照片填充我的gridview。

我已经使用了Microsoft UWP（Data Virtualization Sample）并使用其FileSource作为我的基础，我修改它以使用我自己的Picture对象并尝试将其应用到我的UWP应用程序。我得到的只是一个空白页面，设计师正在抛出异常。

我想使用x：Bind绑定到我模型中的数据源对象，因为我正在使用MVVM而不想使用代码隐藏。

我无法让这个在我的应用程序中工作所以我写了一个小的测试应用程序甚至不是MVVM并尝试使用x：绑定我的数据源作为后面的代码中的对象，它失败了绑定到集合。

如果我在我的代码隐藏中直接设置gridview的源代码（这就是样本正在做的事情），我可以用我的Picture对象来完成这项工作。

 async void initdata()
 {
    StorageLibrary pictures = await StorageLibrary.GetLibraryAsync(KnownLibraryId.Pictures);
    string path = pictures.SaveFolder.Path;

    FileDataSource ds = await FileDataSource.GetDataSoure(path);
    if (ds.Count > 0)
    {
        PicturesGrid.ItemsSource = ds;
    }
    else
    {
        MainPage.Current.NotifyUser("Error: The pictures folder doesn't contain any files", NotifyType.ErrorMessage);
    }
}

FileDataSource的定义如下：

/// <summary>
/// A custom datasource over the file system that supports data virtualization
/// </summary>
public class FileDataSource : INotifyCollectionChanged, System.Collections.IList, IItemsRangeInfo
{
   ...
}

在我的代码中，我创建了PicturesCollection作为属性：

public sealed partial class MainPage : Page
{
    public FileDataSource _PicturesCollection;
    public FileDataSource PicturesCollection { get; private set; }
    public MainPage()
    {
        this.InitializeComponent();
        PicturesGrid.ContainerContentChanging += PicturesGrid_ContainerContentChanging;
        PicturesCollection = null;
        initdata();
    }

    private void PicturesGrid_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
    {
        if (!args.InRecycleQueue)
        {
            // Sets a textblock in each item indicating its index
            //FrameworkElement ctr = (FrameworkElement)args.ItemContainer.ContentTemplateRoot;
            //if (ctr != null)
            //{
            //    TextBlock t = (TextBlock)ctr.FindName("idx");
            //    t.Text = args.ItemIndex.ToString();
            //}
        }
    }

    async void initdata()
    {
        StorageLibrary pictures = await StorageLibrary.GetLibraryAsync(KnownLibraryId.Pictures);
        string path = pictures.SaveFolder.Path;

        _PicturesCollection = await FileDataSource.GetDataSoure(path);

        if (_PicturesCollection.Count > 0)
        {
            PicturesCollection = _PicturesCollection;
            //PicturesGrid.ItemsSource = ds;
        }

    }
}

并将其绑定到我的GridView：

<Grid Grid.Row="1">
    <GridView x:Name="PicturesGrid"
              SelectionMode="Single"
              ShowsScrollingPlaceholders="False"
              ItemsSource="{x:Bind PicturesCollection}">
        <GridView.ItemTemplate>
            <DataTemplate x:DataType="local:Picture" >
                <Grid Width="200" Height="80">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Border Grid.RowSpan="2" Background="DimGray" Opacity="0.8" />

                    <Image Width ="130"
                           HorizontalAlignment="Center"
                           Stretch="Uniform"
                           Source="{x:Bind ImageThumbNail, Converter ={StaticResource StorageItemThumbnailoImageSourceConverter}, Mode=OneWay}" />

                    <TextBlock Grid.Row="1"
                               MaxHeight="30"
                               Text="{x:Bind Name}"
                               Foreground="White"
                               HorizontalAlignment="Center"
                               TextTrimming="CharacterEllipsis"/>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

这给了我一个空白页面，但是如果我在代码隐藏中设置它，它就可以了。谁能告诉我为什么会这样呢？我错过了什么？

Answer 1

要使用x：在UWP中绑定，您应该在XAML中定义ViewModel的对象，如下所示：

<Page.DataContext>
    <local:MyViewModel x:Name="MyViewModel"/>
</Page.DataContext>

并且像这样说：

ItemsSource="{x:Bind MyViewModel.PicturesCollection}"

x：绑定只能绑定在XAML中预定义的ViewModel对象。

UWP问题使用x：Bind设置GridView项目源

1 个答案: