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

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

第3部分：在單個設(shè)備上適應(yīng)多個窗口大小

創(chuàng)建新定制布局可解決移動設(shè)備響應(yīng)式設(shè)計的難題，但是臺式機(jī)和平板電腦的情況又是怎樣的呢？

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

添加窗口吸附點

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

<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>

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

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

創(chuàng)建新的 VisualStates 和 StateTriggers

接下來，我們將創(chuàng)建與每個吸附點相對應(yīng)的 VisualStates 和 StateTriggers。 在 MainPage.xaml 中，將以下代碼添加到在第 2 部分創(chuàng)建的 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 狀態(tài)。

<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>

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

運行應(yīng)用

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

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

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