Visual Studio系列教程：使用XAML工具创建用户界面（四）

本教程主要介绍Microsoft旗下Visual Studio关于利用XAML工具创建用户界面的相关知识 。

Visual Studio最新版本免费下载试用

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

若要在页面中居中放置图像，你需要在页面中调整 Grid 的对齐方式。 或者，你需要在 GridView 中调整 Images 的对齐方式吗nbsp; 让我们来看一看有关对齐的详细信息。你可能会在这一步中尝试将 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 设置。

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

   

现在，滚动条与窗口的边缘对齐啦！同时你已经为你的应用创建了基本的UI。

如果你想了解Visual Studio其他相关教程或下载最新试用版，请点击这里。

标签：IDE集成开发环境 代码管控工具IDE