Visual Studio系列教程：如何創(chuàng)建自適應(yīng)布局（一）

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)用的布局。

第0部分：從Github獲取起始代碼

從本站資源中下載Github頁(yè)面示例，解壓后訪問Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout目錄，單擊Photolab.sln打開項(xiàng)目。

第1部分：運(yùn)行移動(dòng)版仿真器

在 Visual Studio 工具欄中，確保將解決方案平臺(tái)設(shè)置為 x86 或 x64 而不是 ARM，然后將目標(biāo)設(shè)備從本地計(jì)算機(jī)更改為你已安裝的移動(dòng)版仿真器之一（例如，5 英寸的 1GB Mobile Emulator 10.0.15063 WVGA）。然后嘗試在你通過按 F5 選擇的移動(dòng)版仿真器中運(yùn)行“照片庫(kù)”應(yīng)用。

應(yīng)用啟動(dòng)后你會(huì)發(fā)現(xiàn)，雖然應(yīng)用能夠正常工作，但在這么小的視區(qū)中看起來不太好看。 動(dòng)態(tài)Grid元素通過減少所顯示的列數(shù)來嘗試適應(yīng)有限的屏幕空間，但是所產(chǎn)生的布局看起來很普通并且不適合這么小的視區(qū)。

第2部分：生成定制的移動(dòng)布局

為了使此應(yīng)用在較小的設(shè)備上看起來更加美觀，我們可以在XAML頁(yè)面中創(chuàng)建一組單獨(dú)的樣式，并且僅在檢測(cè)到移動(dòng)設(shè)備時(shí)才使用這組樣式。

• 創(chuàng)建新的DataTemplate

  我們將通過為圖像創(chuàng)建新的 DataTemplate 來定制應(yīng)用程序的庫(kù)視圖。 從解決方案資源管理器中打開MainPage.xaml，并在Page.Resources標(biāo)記內(nèi)添加以下代碼。此模板通過消除圖像周圍的邊框、除去每個(gè)縮略圖下方的圖像元數(shù)據(jù)，從而節(jié)省屏幕空間。

  <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>
• 將元數(shù)據(jù)添加到工具提示

  為了使用戶依然能夠訪問每個(gè)圖像的元數(shù)據(jù)，我們將會(huì)在每個(gè)圖像項(xiàng)目中添加一個(gè)工具提示，即當(dāng)你將鼠標(biāo)懸停在縮略圖上（或者長(zhǎng)按觸摸屏）時(shí)，將顯示圖像的標(biāo)題、文件類型和尺寸。接下來，在剛創(chuàng)建的DataTemplate的Image標(biāo)記中添加以下代碼。

  <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 資源庫(kù)

  使用 VisualState 資源庫(kù)告訴 VisualStateManager 在觸發(fā)狀態(tài)時(shí)要應(yīng)用哪些屬性。 每個(gè)資源庫(kù)都以特定 XAML 元素的一個(gè)屬性為目標(biāo)，并將其設(shè)置為給定值。 將以下代碼添加到你剛創(chuàng)建的移動(dòng)版 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>

  這些資源庫(kù)會(huì)將圖像庫(kù)的 ItemTemplate 設(shè)置為我們?cè)诘谝徊糠种袆?chuàng)建的新 DataTemplate，并將命令欄和縮放滑塊與屏幕底部對(duì)齊，以便拇指能夠在手機(jī)屏幕上更加輕松地觸及。

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

  現(xiàn)在我們可以嘗試使用移動(dòng)版仿真器運(yùn)行應(yīng)用，如果如下圖所示，那么恭喜，你的新布局顯示成功。

  

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