半岛权威十大直营(官方)网站

Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序。在本系列教程中将介绍如何为图像编辑创建基本的用户界面，有任何建议或提示请在下方评论区留言，我们会及时处理。

第5部分：对布局应用一些最后的调整

若要在页面中居中放置图像，你需要在页面中调整 Grid 的对齐方式。 或者，你需要在 GridView 中调整 Images 的对齐方式吗？  让我们来看一看有关对齐的详细信息。你可能会在这一步中尝试将 GridView 的 Background 设置为你最喜爱的颜色。 这样，你将可以更清楚地看到布局中发生的情况。

修改图像的对齐方式

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. 运行应用并调整窗口的大小。 向下滚动以查看更多图像。

   图像居中放置，看上去更美观。 但是，滚动条与 GridView 的边缘对齐，而不是与窗口边缘对齐。 若要解决此问题，你可以在 GridView 中居中放置图像，而不是在页面中居中放置 GridView。 这虽然需要多做一些工作，但最后看起来更美观。

3. 从上一个步骤中删除 HorizontalAlignment 设置。

4. 在“文档大纲”中，右键单击 ImageGridView。 在上下文菜单中，选择编辑其他模板 > 编辑项目布局 (ItemsPanel) > 编辑副本...。创建资源对话框将会打开。

5. 在此对话框中，将“名称”（键）值更改为 ImageGridView_ItemsPanelTemplate，然后单击确定。

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

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

   正如你使用各种面板在应用中布局控件一样，GridView 具有一个管理其项布局的内部面板。 现在，你有权访问此面板ItemsWrapGrid，可以修改其属性以在 GridView 内更改项布局。

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. 再次运行应用并调整窗口的大小。 向下滚动以查看更多图像。