Visual Studio系列教程：使用XAML工具创建用户界面（一） |
您所在的位置：网站首页 › xaml界面设计 › Visual Studio系列教程：使用XAML工具创建用户界面（一） |
Visual Studio系列教程：使用XAML工具创建用户界面（一）
|
Visual Studio是一款完备的工具和服务，可帮助您为Microsoft平台和其他平台创建各种各样的应用程序。在本系列教程中将介绍如何为图像编辑创建基本的用户界面，有任何建议或提示请在下方评论区留言，我们会及时处理。 
Visual Studio最新版本免费下载试用
本教程将从一个简化版的PhotoLab示例开始，点击下方链接下载，得到压缩包后，访问Windows-appsample-photo-lab-master\xaml-basics-starting-points\user-interface目录，进行后续操作。 PhotoLab示例下载>> 第 1 部分：使用 XAML 设计器添加 TextBlock为了使创建XAML UI更轻松，Visual Studio提供了一些工具。利用XAML设计器，你可以将控件拖到设计图面上并查看它们的外观，然后再运行应用。利用Properties面板，你可以查看和设置设计器中处于活动状态的所有控件属性。文档大纲显示了UI的XAML可视化树的父子结构。利用XAML编辑器，你可以直接输入和修改XAML标记。 下面是标记了工具的 Visual Studio UI。 
利用这些工具中的每个工具，都可以更加轻松地创建你的 UI，因此我们将在本教程中使用所有这些工具。 首先，你将使用 XAML 设计器添加控件。 使用 XAML 设计器添加控件： 在Solution Explorer中双击MainPage.xaml打开它，将显示未添加任何 UI 元素的应用主页面。 在执行进一步操作之前，你需要对 Visual Studio 进行一些调整。 请确保将解决方案平台设置为 x86 或 x64，而不是 ARM。 将主页面 XAML 设计器设置为显示 13.3 英寸的桌面预览。你应该会在窗口顶部附近看到两个设置，如下所示。
完成后可以运行该应用，但不会看到太多内容。接下来将添加一些 UI 元素以使内容变得更丰富。
在工具箱中，展开常见 XAML 控件并查找 TextBlock 控件。将 TextBlock 拖到页面左上角附近的设计图面上。TextBlock 周围会以蓝色高亮显示以指明它现在是活动对象，请注意设计器添加的边距和其他设置。
在Properties面板中，将 TextBlock 的Name值从 textBlock 更改为 TitleTextBlock（请确保 TextBlock 仍然是活动对象）。
在Common下面，将Text值更改为集合。
在 XAML 编辑器中，你的 XAML 现在如下所示。
若要定位 TextBlock，应首先删除 Visual Studio 添加的属性值。 在Document Outline中，右键单击 TitleTextBlock，然后选择Layout > Reset ALL。
在Properties面板内的搜索框中输入 margin 可以轻松地查找 Margin 属性。并将左边距和下边距设置为 24。
边距可在页面上对元素进行最基本的定位，它们可用于微调你的布局，但是使用大边距值（如 Visual Studio 添加的大边距值）会使 UI 难以适应各种屏幕大小，因此应该避免使用大边距值。
在Document Outline面板中，右键单击TitleTextBlock，然后依次选择Edit Style > Apply Resource > TitleTextBlockStyle。 这会对你的标题文本应用系统定义的样式。
在Properties面板内的搜索框中输入 textwrapping 可以查找 TextWrapping 属性。
现在已将 UI 的第一部分添加到你的应用中，可以运行该应用以查看其外观。 更多Visual Studio精彩教程敬请关注~ 想要购买Visual Studio正版授权，或者获取更多该产品相关信息的朋友可以点击" 咨询在线客服 "~ 标签：IDE集成开发环境 UML工具代码管控工具本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至[email protected] 上一篇：Syncfusion教程：在Xamarin.Forms中创建数据输入表单 （2） 下一篇：Zend Studio使用教程：使用Zend Studio和Zend Server进行根本原因分析 （一） |
【本文地址】
今日新闻 |
推荐新闻 |