Visual Studio是一款完備的工具和服務，可幫助您為Microsoft平臺和其他平臺創建各種各樣的應用程序，同時還可以將您所有的項目、團隊和利益干係人聯繫在一起。
本教程將為你介紹在Visual Studio中如何使用XAML創建自適應佈局，利用這一知識，我們可以創建外觀適用於任何設備的應用。在本教程中，我們將學習到如何創建新的DataTemplate、添加窗口吸附點，以及使用 VisualStateManager 和 AdaptiveTrigger 元素定製應用的佈局。
Visual Studio最新版本免費下載試用
第0部分：從Github獲取起始代碼
從本站資源中下載Github頁面示例，解壓後訪問Windows-appsample-photo-lab-master\\xaml-basics-starting-points\adaptive-layout目錄，單擊Photolab.sln打開項目。
第1部分：運行移動版仿真器
在 Visual Studio 工具欄中，確保將解決方案平臺設置為 x86 或 x64 而不是 ARM，然後將目標設備從本地計算機更改為你已安裝的移動版仿真器之一（例如，5 英寸的 1GB Mobile Emulator 10.0.15063 WVGA）。然後嘗試在你通過按 F5 選擇的移動版仿真器中運行“照片庫”應用。
應用啟動後你會發現，雖然應用能夠正常工作，但在這麼小的視區中看起來不太好看。 動態Grid元素通過減少所顯示的列數來嘗試適應有限的屏幕空間，但是所產生的佈局看起來很普通並且不適合這麼小的視區。
第2部分：生成定製的移動佈局
為了使此應用在較小的設備上看起來更加美觀，我們可以在XAML頁面中創建一組單獨的樣式，並且僅在檢測到移動設備時才使用這組樣式。
- 創建新的DataTemplate我們將通過為圖像創建新的 DataTemplate 來定製應用程序的庫視圖。 從解決方案資源管理器中打開MainPage.xaml，並在Page.Resources標記內添加以下代碼。此模板通過消除圖像周圍的邊框、除去每個縮略圖下方的圖像元數據，從而節省屏幕空間。
<datatemplate> <grid> <image> /<image> /<grid> /<datatemplate>
- 將元數據添加到工具提示為了使用戶依然能夠訪問每個圖像的元數據，我們將會在每個圖像項目中添加一個工具提示，即當你將鼠標懸停在縮略圖上（或者長按觸摸屏）時，將顯示圖像的標題、文件類型和尺寸。接下來，在剛創建的DataTemplate的Image標記中添加以下代碼。
<image> <tooltipservice.tooltip> <tooltip> <stackpanel> <textblock> <stackpanel> <textblock> <textblock> /<stackpanel> /<stackpanel> /<tooltip> /<tooltipservice.tooltip> /<image>
- 添加 VisualState 資源庫使用 VisualState 資源庫告訴 VisualStateManager 在觸發狀態時要應用哪些屬性。 每個資源庫都以特定 XAML 元素的一個屬性為目標，並將其設置為給定值。 將以下代碼添加到你剛創建的移動版 VisualState 中 VisualState.StateTriggers 元素的下面。
<visualstatemanager.visualstategroups> <visualstategroup> <visualstate> <visualstate.statetriggers> <mobilescreentrigger> /<visualstate.statetriggers> /<visualstate> /<visualstategroup> /<visualstatemanager.visualstategroups>
- 這些資源庫會將圖像庫的 ItemTemplate 設置為我們在第一部分中創建的新 DataTemplate，並將命令欄和縮放滑塊與屏幕底部對齊，以便拇指能夠在手機屏幕上更加輕鬆地觸及。
- 運行應用現在我們可以嘗試使用移動版仿真器運行應用，如果如下圖所示，那麼恭喜，你的新佈局顯示成功。
如果你想了解Visual Studio其他相關教程或下載最新試用版，記得關注我們哦。
閱讀更多 慧都科技 的文章
