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

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

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

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

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

添加窗口吸附點(diǎn)

第一步是定義觸發(fā)不同 VisualStates 所在的“吸附點(diǎn)”。 從解決方案資源管理器中打開(kāi) 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>

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

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

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

接下來(lái)，我們將創(chuàng)建與每個(gè)吸附點(diǎn)相對(duì)應(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>

添加資源庫(kù)

最后，將這些資源庫(kù)添加至 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 像素時(shí)，這些資源庫(kù)就會(huì)將移動(dòng)版 DataTemplate 和樣式應(yīng)用于桌面應(yīng)用。 它們還會(huì)調(diào)整縮放滑塊以更好地適應(yīng)小屏幕。

運(yùn)行應(yīng)用

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

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

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