Visual Studio是一款完備的工具和服務，可幫助您為Microsoft平臺和其他平臺創建各種各樣的應用程序，同時還可以將您所有的項目、團隊和利益干系人聯系在一起。

本教程將為你介紹在Visual Studio中如何使用XAML創建自適應布局，利用這一知識，我們可以創建外觀適用于任何設備的應用。在本教程中，我們將學習到如何創建新的DataTemplate、添加窗口吸附點，以及使用 VisualStateManager 和 AdaptiveTrigger 元素定制應用的布局。

第3部分：在單個設備上適應多個窗口大小

創建新定制布局可解決移動設備響應式設計的難題，但是臺式機和平板電腦的情況又是怎樣的呢？

該應用在全屏中可能看起來很美觀，但如果用戶收縮窗口，則最終可能會出現難看的界面。通過使用 VisualStateManager 在單個設備上適應多個窗口大小，我們可以確保最終用戶體驗始終感覺良好。

添加窗口吸附點

第一步是定義觸發不同 VisualStates 所在的“吸附點”。 從解決方案資源管理器中打開 App.xaml，并在 Application 標記之間添加以下代碼。

<Application.Resources> <!-- window width adaptive snap points --> <x:Double x:Key="MinWindowSnapPoint">0</x:Double> <x:Double x:Key="MediumWindowSnapPoint">641</x:Double> <x:Double x:Key="LargeWindowSnapPoint">1008</x:Double> </Application.Resources>

這會為我們提供三個吸附點，利用這些吸附點，我們可以為三個窗口大小范圍創建新的 VisualStates：

• 小（寬度為 0 - 640 像素）
• 中等（寬度為 641 - 1007 像素）
• 大（寬度大于 1007 像素）

創建新的 VisualStates 和 StateTriggers

接下來，我們將創建與每個吸附點相對應的 VisualStates 和 StateTriggers。 在 MainPage.xaml 中，將以下代碼添加到在第 2 部分創建的 VisualStateManager 中。

<VisualStateManager.VisualStateGroups> <VisualStateGroup> ... <!-- Large window VisualState --> <VisualState x:Key="LargeWindow"> <!-- Large window trigger --> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> <!-- Medium window VisualState --> <VisualState x:Key="MediumWindow"> <!-- Medium window trigger --> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> <!-- Small window VisualState --> <VisualState x:Key="SmallWindow"> <!-- Small window trigger --> <VisualState.StateTriggers > <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}"/> </VisualState.StateTriggers> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>

添加資源庫

最后，將這些資源庫添加至 SmallWindow 狀態。

<VisualState x:Key="SmallWindow"> ... <!-- Small window setters --> <VisualState.Setters> <!-- Apply mobile itemtemplate and styles --> <Setter Target="ImageGridView.ItemTemplate" Value="{StaticResource ImageGridView_MobileItemTemplate}" /> <Setter Target="ImageGridView.ItemContainerStyle" Value="{StaticResource ImageGridView_MobileItemContainerStyle}" /> <!-- Adjust the zoom slider to fit small windows--> <Setter Target="ZoomSlider.Minimum" Value="80" /> <Setter Target="ZoomSlider.Maximum" Value="180" /> <Setter Target="ZoomSlider.TickFrequency" Value="20" /> <Setter Target="ZoomSlider.Value" Value="100" /> </VisualState.Setters> </VisualState>

每當視區的寬度小于 641 像素時，這些資源庫就會將移動版 DataTemplate 和樣式應用于桌面應用。 它們還會調整縮放滑塊以更好地適應小屏幕。

運行應用

在 Visual Studio 工具欄中，將目標設備設置為本地計算機，并運行該應用。 加載該應用時，請嘗試更改窗口的大小。 當你將窗口縮小為小尺寸時，應該會看到應用切換為你在第 2 部分中創建的移動布局。

現在，你已完成本實驗，并且擁有足夠的自適應布局知識，可以自行進行進一步的實驗。可以嘗試向你之前添加的僅限于移動版的工具提示添加評級控件。 或者，作為一項較大的挑戰，嘗試一下為較大的屏幕大小優化布局（考慮電視屏幕或 Surface Studio）。

如果你想了解Visual Studio其他相關教程或下載最新試用版，請點擊這里。