Auto Alignment of tiles in metro style apps in windows - windows-8

Question

I have an metro style app which has a few tiles in the home page in some random order. If I remove one of those tiles all the other tiles should rearrange themselves to fill the gap created by removing a single tile. You can observe the same phenomenon in Windows 8 desktop view. Is it possible to achieve it using either WinJS or WinRT.

Answer 1

If I correctly understood your needs, if you use a ListView or a GridView which is bound to an IObservableCollection, the items will automatically fit correctly when deleting / adding items.
Using IObservableCollection (or ObservableList) allow you to add a ChildrenTransitions (Choose the AddRemoveTransitions to automatically add the "correct" animation for adding / removing item.
I have not tested this in JS/Html, but in Xaml/C# it's working great.

Answer 2

You can do it by modifying the ListView data source directly.
For example,
// 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);
Hope this helps.