CODEWITHSUNDEEP
windows-8windows-runtimewinjs
Mugu
Mugu

Reputation: 133

Auto Alignment of tiles in metro style apps in windows

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.

Upvotes: 0

Views: 717

Answers (2)

SirLeamont
SirLeamont

Reputation: 105

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.

Upvotes: 1

louis.luo
louis.luo

Reputation: 2971

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.

Upvotes: 0

Related Questions