自動對齊窗口中的Metro風格應用中的瓷磚

我有一個metro風格的應用程序，它有一些隨機順序在主頁中的幾個瓷磚。如果我移除其中一塊瓷磚，則所有其他瓷磚應重新排列以填補通過移除單個瓷磚而產生的縫隙。您可以在Windows 8桌面視圖中觀察到相同的現象。是否可以使用WinJS或WinRT來實現它。自動對齊窗口中的Metro風格應用中的瓷磚

來源

2012-07-06 Mugu

您是否嘗試過創建一個updateLayout函數來重新實例化您的gridLayout？ – Aymeric 2012-07-06 12:26:32

當然是可以的，WinJS或WinRT是指WinJS還是XAML？你願意嗎？ – 2012-07-06 12:34:04

我還沒有嘗試過。任何參考如何使用它。 – Mugu 2012-07-06 12:57:16

您可以通過直接修改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);

希望這有助於。

來源

2012-07-07 05:11:45

來做，它會再次在屏幕上排列瓷磚而不會留下任何由於移除特定瓷磚而產生的空間。 – Mugu 2012-07-09 05:29:40

@Mugu在我的情況下，它不會留下任何空間，並與其餘的瓷磚正確對齊。 – 2012-07-09 14:54:45

如果我正確理解您的需求，如果您使用綁定到IObservableCollection的ListView或GridView，這些項目在刪除/添加項目時將自動適合。

使用IObservableCollection（或ObservableList）允許您添加一個ChildrenTransitions（選擇AddRemoveTransitions自動添加「正確」的動畫添加/刪除項目。

我沒有測試過這個JS/Html，但是在Xaml/C＃中它工作的很好

來源

2012-07-09 15:31:04 SirLeamont

自動對齊窗口中的Metro風格應用中的瓷磚

回答

相關問題