Visual Studio是一款完備的工具和服務(wù)，可幫助您為Microsoft平臺(tái)和其他平臺(tái)創(chuàng)建各種各樣的應(yīng)用程序。在本系列教程中將介紹如何為圖像編輯創(chuàng)建基本的用戶(hù)界面，有任何建議或提示請(qǐng)?jiān)谙路皆u(píng)論區(qū)留言，我們會(huì)及時(shí)處理。

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

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

修改圖像的對(duì)齊方式

1. 在Gridview中，將 HorizontalAlignment 屬性設(shè)置為 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. 運(yùn)行應(yīng)用并調(diào)整窗口的大小。 向下滾動(dòng)以查看更多圖像。

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

3. 從上一個(gè)步驟中刪除 HorizontalAlignment 設(shè)置。

4. 在“文檔大綱”中，右鍵單擊 ImageGridView。 在上下文菜單中，選擇編輯其他模板 > 編輯項(xiàng)目布局 (ItemsPanel) > 編輯副本...。創(chuàng)建資源對(duì)話框?qū)?huì)打開(kāi)。

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

   默認(rèn) ItemsPanelTemplate 副本會(huì)添加到 XAML 的 Page.Resources 部分中。

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

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

6. 在 ItemsWrapGrid 中，將 HorizontalAlignment 屬性設(shè)置為 Center。

   之前

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

   之后

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

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