WPF ScatterView绑定到多个源

Question

我正在使用一个ScatterView，目前正在绑定到一个文件夹，这样当我的应用程序启动时，就会显示一些示例图像，这很好用。

<s:ScatterView x:Name="MainScatterView">
        <s:ScatterView.ItemTemplate>
            <DataTemplate>
                <Image Source="{Binding}"/>
            </DataTemplate>
        </s:ScatterView.ItemTemplate>
    </s:ScatterView>

然后，我使用以下命令设置绑定

 scatter.ItemsSource =
                System.IO.Directory.GetFiles(imagesPath, "*.jpg");

这很有效，但是当我尝试添加更多图像时：

Image img = new Image();
        img.Source =
            new BitmapImage(new Uri("\\Resources\\Koala.jpg", UriKind.Relative));
        scatter.Items.Add(img);

当使用ItemSource时，我得到一个InvalidOperationException:操作无效。

处理这个问题的最好方法是什么？是否在启动时手动删除绑定并添加图像？我假设既然ItemSource是相同的，那么进一步的添加不会造成任何问题？或者有没有更好的方法来处理这个问题，因为绑定方法工作得很好。

干杯

Answer 1

这需要一个ViewModel

这种类型的问题，绑定在简单的情况下工作得很好，但随着您添加场景而开始下降，这是一个很好的指示，表明是时候使用Model - View - ViewModel了。

粗略地说，这个想法是您有一个视图(您的XAML)和一个模型(您的数据，在本例中是一组文件)。但是，不是直接将视图绑定到数据，而是添加一个称为ViewModel的中间类。您的视图绑定到ViewModel，并且ViewModel从模型中加载自身。在加载要绑定的数据时，这为您提供了做更多简单事情的空间。

这在这里是什么意思？它看起来是这样的：

public class MainViewModel
{
    // ObservableCollection adds databinding goodness so when you add a new file,
    // the UI automatically refreshes
    public ObservableCollection<string> Images { get; private set; }

    public MainViewModel(string path)
    {
        Images = new ObservableCollection<string>();
        Images.AddRange(Directory.GetFiles(path, "*.jpg"));
    }

    public void AddImage(string path)
    {
        Images.Add(path);
    }
}

现在，在xaml中，将datacontext设置为新的MainViewModel。您可以在后台代码中或使用StaticResource来完成此操作，如果您使用StaticResource，则需要一个不带参数的ctor，因此您必须以其他方式设置初始目录。然后，您的绑定如下所示：

<Image Source={Binding Images} />

仔细看看M-V-VM模式。您会发现，它使类似这样的数据绑定问题变得更容易，还具有许多其他好处，如更少的事件处理程序(因此更少的引用泄漏)、更好的可测试性、更容易使用Blend，以及更容易添加新类型的UI技术。

Answer 2

我也是Surface开发的新手，无论如何，我所做的就是删除数据绑定，并通过for循环手动添加图像。