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

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

PhotoLab示例下载>>

第 1 部分：使用 XAML 设计器添加 TextBlock

为了使建立XAML UI更轻松，Visual Studio提供了一些工具。利用XAML设计器，你能够将控件拖到设计图面上并查看它们的外观，而后再运行应用。利用Properties面板，你能够查看和设置设计器中处于活动状态的全部控件属性。文档大纲显示了UI的XAML可视化树的父子结构。利用XAML编辑器，你能够直接输入和修改XAML标记。

下面是标记了工具的 Visual Studio UI。

利用这些工具中的每一个工具，均可以更加轻松地建立你的 UI，所以咱们将在本教程中使用全部这些工具。 首先，你将使用 XAML 设计器添加控件。

使用 XAML 设计器添加控件：

1. 在Solution Explorer中双击MainPage.xaml打开它，将显示未添加任何 UI 元素的应用主页面。
2. 在执行进一步操做以前，你须要对 Visual Studio 进行一些调整。
   • 请确保将解决方案平台设置为 x86 或 x64，而不是 ARM。
   • 将主页面 XAML 设计器设置为显示 13.3 英寸的桌面预览。你应该会在窗口顶部附近看到两个设置，以下所示。
     
   完成后能够运行该应用，但不会看到太多内容。接下来将添加一些 UI 元素以使内容变得更丰富。
3. 在工具箱中，展开常见 XAML 控件并查找 TextBlock 控件。将 TextBlock 拖到页面左上角附近的设计图面上。TextBlock 周围会以蓝色高亮显示以指明它如今是活动对象，请注意设计器添加的边距和其余设置。

   <TextBlock x:Name="textBlock"
              HorizontalAlignment="Left"
              Margin="351,44,0,0"
              TextWrapping="Wrap"
              Text="TextBlock"
              VerticalAlignment="Top"/>复制代码

4. 在Properties面板中，将 TextBlock 的Name值从 textBlock 更改成 TitleTextBlock（请确保 TextBlock 仍然是活动对象）。
5. 在Common下面，将Text值更改成集合。
   
   在 XAML 编辑器中，你的 XAML 如今以下所示。

   <TextBlock x:Name="TitleTextBlock"
              HorizontalAlignment="Left"
              Margin="351,44,0,0"
              TextWrapping="Wrap"
              Text="Collection"
              VerticalAlignment="Top"/>复制代码

6. 若要定位 TextBlock，应首先删除 Visual Studio 添加的属性值。 在Document Outline中，右键单击 TitleTextBlock，而后选择Layout > Reset ALL。
   
7. 在Properties面板内的搜索框中输入 margin 能够轻松地查找 Margin 属性。并将左边距和下边距设置为 24。
   
   边距可在页面上对元素进行最基本的定位，它们可用于微调你的布局，可是使用大边距值（如 Visual Studio 添加的大边距值）会使 UI 难以适应各类屏幕大小，所以应该避免使用大边距值。
8. 在Document Outline面板中，右键单击TitleTextBlock，而后依次选择Edit Style > Apply Resource > TitleTextBlockStyle。 这会对你的标题文本应用系统定义的样式。

   <TextBlock x:Name="TitleTextBlock"
              TextWrapping="Wrap"
              Text="Collection"
              Margin="24,0,0,24"
              Style="{StaticResource TitleTextBlockStyle}"/>复制代码

9. 在Properties面板内的搜索框中输入 textwrapping 能够查找 TextWrapping 属性。

如今已将 UI 的第一部分添加到你的应用中，能够运行该应用以查看其外观。