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

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

第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 x:Key="ImageGridView_MobileItemTemplate" x:DataType="local:ImageFileInfo"> <!-- Create image grid --> <Grid Height="{Binding ItemSize, ElementName=page}" Width="{Binding ItemSize, ElementName=page}"> <!-- Place image in grid, stretching it to fill the pane--> <Image x:Name="ItemImage" Source="{x:Bind ImagePreview}" Stretch="UniformToFill"> </Image> </Grid> </DataTemplate>
• 將元數據添加到工具提示

  為了使用戶依然能夠訪問每個圖像的元數據，我們將會在每個圖像項目中添加一個工具提示，即當你將鼠標懸停在縮略圖上（或者長按觸摸屏）時，將顯示圖像的標題、文件類型和尺寸。接下來，在剛創建的DataTemplate的Image標記中添加以下代碼。

  <Image ...> <!-- Add a tooltip to the image that displays metadata --> <ToolTipService.ToolTip> <ToolTip x:Name="tooltip"> <!-- Arrange tooltip elements vertically --> <StackPanel Orientation="Vertical" Grid.Row="1"> <!-- Image title --> <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}" HorizontalAlignment="Center" Style="{StaticResource SubtitleTextBlockStyle}" /> <!-- Arrange elements horizontally --> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <!-- Image file type --> <TextBlock Text="{x:Bind ImageFileType}" HorizontalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" /> <!-- Image dimensions --> <TextBlock Text="{x:Bind ImageDimensions}" HorizontalAlignment="Center" Style="{StaticResource CaptionTextBlockStyle}" Margin="8,0,0,0" /> </StackPanel> </StackPanel> </ToolTip> </ToolTipService.ToolTip> </Image>
• 添加 VisualState 資源庫

  使用 VisualState 資源庫告訴 VisualStateManager 在觸發狀態時要應用哪些屬性。 每個資源庫都以特定 XAML 元素的一個屬性為目標，并將其設置為給定值。 將以下代碼添加到你剛創建的移動版 VisualState 中 VisualState.StateTriggers 元素的下面。

  <VisualStateManager.VisualStateGroups> <VisualStateGroup> <!-- Add a new VisualState for mobile devices --> <VisualState x:Key="Mobile"> <!-- Trigger visualstate when a mobile device is detected --> <VisualState.StateTriggers> <local:MobileScreenTrigger InteractionMode="Touch" /> </VisualState.StateTriggers> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups>

  這些資源庫會將圖像庫的 ItemTemplate 設置為我們在第一部分中創建的新 DataTemplate，并將命令欄和縮放滑塊與屏幕底部對齊，以便拇指能夠在手機屏幕上更加輕松地觸及。

• 運行應用

  現在我們可以嘗試使用移動版仿真器運行應用，如果如下圖所示，那么恭喜，你的新布局顯示成功。

  

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