windows-8 - Windows のメトロ スタイル アプリでのタイルの自動配置

Question

ホームページにランダムな順序でいくつかのタイルがあるメトロ スタイル アプリがあります。これらのタイルの 1 つを削除すると、他のすべてのタイルが再配置され、単一のタイルを削除することによって作成されたギャップを埋める必要があります。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);

お役に立てれば。