Visual Studio系列教程：使用XAML工具創(chuàng)建用戶界面（四）

Visual Studio是一款完備的工具和服務，可幫助您為Microsoft平臺和其他平臺創(chuàng)建各種各樣的應用程序。在本系列教程中將介紹如何為圖像編輯創(chuàng)建基本的用戶界面，有任何建議或提示請在下方評論區(qū)留言，我們會及時處理。

第5部分：對布局應用一些最后的調(diào)整

若要在頁面中居中放置圖像，你需要在頁面中調(diào)整 Grid 的對齊方式。 或者，你需要在 GridView 中調(diào)整 Images 的對齊方式嗎？  讓我們來看一看有關對齊的詳細信息。你可能會在這一步中嘗試將 GridView 的 Background 設置為你最喜愛的顏色。 這樣，你將可以更清楚地看到布局中發(fā)生的情況。

修改圖像的對齊方式

1. 在Gridview中，將 HorizontalAlignment 屬性設置為 Center。

   之前

   <GridView x:Name="ImageGridView"
                 Margin="0,0,0,8"
                 RelativePanel.AlignLeftWithPanel="True"
                 RelativePanel.AlignRightWithPanel="True"
                 RelativePanel.Below="TitleTextBlock"
                 ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                 ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}"/>
   

   之后

   <GridView x:Name="ImageGridView"
                 Margin="0,0,0,8"
                 RelativePanel.AlignLeftWithPanel="True"
                 RelativePanel.AlignRightWithPanel="True"
                 RelativePanel.Below="TitleTextBlock"
                 ItemTemplate="{StaticResource ImageGridView_DefaultItemTemplate}"
                 ItemContainerStyle="{StaticResource ImageGridView_DefaultItemContainerStyle}" 
                 HorizontalAlignment="Center"/>
   

2. 運行應用并調(diào)整窗口的大小。 向下滾動以查看更多圖像。

   圖像居中放置，看上去更美觀。 但是，滾動條與 GridView 的邊緣對齊，而不是與窗口邊緣對齊。 若要解決此問題，你可以在 GridView 中居中放置圖像，而不是在頁面中居中放置 GridView。 這雖然需要多做一些工作，但最后看起來更美觀。

3. 從上一個步驟中刪除 HorizontalAlignment 設置。

4. 在“文檔大綱”中，右鍵單擊 ImageGridView。 在上下文菜單中，選擇編輯其他模板 > 編輯項目布局 (ItemsPanel) > 編輯副本...。創(chuàng)建資源對話框將會打開。

5. 在此對話框中，將“名稱”（鍵）值更改為 ImageGridView_ItemsPanelTemplate，然后單擊確定。

   默認 ItemsPanelTemplate 副本會添加到 XAML 的 Page.Resources 部分中。

   <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
       <ItemsWrapGrid Orientation="Horizontal" />
   </ItemsPanelTemplate>
   

   正如你使用各種面板在應用中布局控件一樣，GridView 具有一個管理其項布局的內(nèi)部面板。 現(xiàn)在，你有權訪問此面板ItemsWrapGrid，可以修改其屬性以在 GridView 內(nèi)更改項布局。

6. 在 ItemsWrapGrid 中，將 HorizontalAlignment 屬性設置為 Center。

   之前

   <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
       <ItemsWrapGrid Orientation="Horizontal" />
   </ItemsPanelTemplate>
   

   之后

   <ItemsPanelTemplate x:Key="ImageGridView_ItemsPanelTemplate">
       <ItemsWrapGrid Orientation="Horizontal"
                      HorizontalAlignment="Center"/>
   </ItemsPanelTemplate>
   

7. 再次運行應用并調(diào)整窗口的大小。 向下滾動以查看更多圖像。