windows-8 - Windows 中 Metro 风格应用程序中磁贴的自动对齐

Question

我有一个地铁风格的应用程序，它在主页中有一些随机顺序的图块。如果我删除其中一个图块，所有其他图块应重新排列以填补因删除单个图块而产生的间隙。您可以在 Windows 8 桌面视图中观察到同样的现象。是否可以使用 WinJS 或 WinRT 来实现它。

Answer 1

如果我正确理解了您的需求，如果您使用绑定到 IObservableCollection 的 ListView 或 GridView，则在删除/添加项目时，这些项目将自动正确适配。

使用IObservableCollection（或ObservableList）允许您添加 ChildrenTransitions（选择AddRemoveTransitions以自动添加“正确”动画以添加/删除项目。

我没有在 JS/Html 中测试过这个，但是在 Xaml/C# 中它工作得很好。

Answer 2

您可以通过ListView直接修改数据源来做到这一点。

例如，

// create a reference of your data source so that it can be accessed
// when you need to modify it
var yourBindingList; 

...

// code where you bind your data to your list view
yourBindingList = WinJS.Binding.List([{id: 1, name: 'one'}, 
    {id: 2, name: 'two'}, {id: 3, name: 'three'}]);
var listViewControl = document.getElementById('yourListViewDiv').winControl;
WinJS.UI.setOptions(listViewControl, {
    selectionMode: 'single',
    itemDataSource: yourBindingList.dataSource,
    itemTemplate: yourItemTemplate, 
});

...

// code where you remove the first item in your list view
yourBindingList.splice(0, 1);

希望这可以帮助。