如何在 WinRT 中進行動態網格布局？

Question

我希望頁面中的網格在縱向模式下只有一列，在橫向模式下有兩列。 當設備為橫向時，某些內容應移至第二列。 我試過這樣做，但不能。

我正在從代碼背后做所有事情。 生成網格，添加子項等。當方向改變時，我會破壞當前布局並創建一個新布局。 這種方法的問題是，任何輸入的數據都將消失。 這是一個巨大的代碼，不可能放在這里。 我希望這種布局更改自動發生。 因此，任何輸入的數據都會在方向更改后保留。

任何幫助，將不勝感激。

Answer 1

訣竅是讓一個網格同時容納兩種狀態。 您可以使用 VisualStates 將不同的 Grid.Row、Grid.Column、Grid.RowSpan 和 Grid.ColumnSpan 值分配給控件。 這是使用 Blend 完成的，並且在 XAML 中是聲明性的。 你給每個州一個名字。 在代碼中，您使用 VisualStateManager 檢測窗口大小的變化以觸發不同的狀態。

您也可以在沒有 VisualStates 的情況下執行此操作。 在這種情況下，在 SizeChanged 的​​事件處理程序中，您必須自己為所有控件設置適當的值。

在 Windows 10 UWP 中，使用 RelativePanel 變得更加簡單。 與網格相比，您可以以更靈活的方式定位控件。

馬丁