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其他相關教程或下載最新試用版，請點擊這裏。