Windows 中 Metro 风格应用程序中磁贴的自动对齐答案

【问题标题】：Auto Alignment of tiles in metro style apps in windowsWindows 中 Metro 风格应用程序中磁贴的自动对齐
【发布时间】：2012-07-06 09:51:01
【问题描述】：

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

【问题讨论】：

您是否尝试过创建一个 updateLayout 函数来重新实例化您的 gridLayout ？
当然可以。您所说的 WinJS 或 WinRT 是指 WinJS 还是 XAML？你更喜欢哪一个？
我没试过。任何参考如何使用它。
@FilipSkakun：我更喜欢通过 WinJS 来做

标签： windows-8 windows-runtime winjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案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);

希望这会有所帮助。

【讨论】：

它会在屏幕上重新排列图块，而不会留下因移除特定图块而造成的任何空间。
@Mugu 在我的情况下，它不会留下任何空间，并且与其余的瓷砖正确对齐。