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"
               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 现在如下所示。
    "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。 这会对你的标题文本应用系统定义的样式。
    "TitleTextBlock"
               TextWrapping="Wrap"
               Text="Collection"
               Margin="24,0,0,24"
               Style="{StaticResource TitleTextBlockStyle}"/>复制代码
  9. Properties面板内的搜索框中输入 textwrapping 可以查找 TextWrapping 属性。

现在已将 UI 的第一部分添加到你的应用中,可以运行该应用以查看其外观。



你可能感兴趣的:(Visual Studio系列教程:使用XAML工具创建用户界面(一))