- XAML Studio 允许您实时编辑和预览 XAML,并在界面上进行真实交互。
- 它包含绑定调试器、数据上下文编辑器和可视化资源管理器等高级工具。
- 它可以从微软商店下载,也可以根据 MIT 许可证从其开源存储库编译。
- 它提供对遥测数据的控制,旨在减轻 Visual Studio 设计人员的挫败感。
如果您使用XAML 在 Windows 系统中创建界面,您可能遇到过 Visual Studio 设计器带来的种种问题,例如编译时间过长或数据绑定错误难以定位。XAML Studio 正是为此而生,它是一款专为快速、轻松地测试、调试和实验 XAML而设计的应用程序。
本文将详细介绍 XAML Studio 的功能,包括它如何帮助您在几分钟内创建 WinUI 和 UWP 界面原型,以及它提供的用于调试链接、管理测试数据、浏览可视化树等诸多工具。您还将了解如何从 Microsoft Store 下载 XAML Studio,如果要从源代码编译它需要满足哪些要求,以及所有这些功能如何满足那些对 Visual Studio 设计器感到有些厌倦的开发人员的需求。
XAML Studio是什么?它适用于哪些用户?
XAML Studio 是一款专注于 XAML 开发的 Windows 应用程序,最初是微软车库项目,现在作为 .NET 基金会的开源项目发布。它的主要目的是让您编写 XAML 代码,立即查看其运行效果,并像在自己的应用程序中一样与界面进行交互。
它尤其适用于使用WinUI XAML 和UWP 应用程序的开发人员,但如果您来自 WPF 并且想要尝试现代 Fluent 设计概念、样式、模板和视觉状态,而无需每次都构建完整的解决方案,它也非常有用。
与更侧重于完整开发周期的 Visual Studio 不同,XAML Studio 充当了视觉层的创意实验室:您可以复制 XAML 片段、粘贴、调整、立即查看结果、操作数据、检查绑定,满意后,即可将代码应用到您的实际项目中。
此外,作为一个开源项目,它的发展对社区是开放的:任何开发者都可以通过公共存储库审查代码、提出更改建议、提交改进意见并参与新功能的讨论。
XAML Studio 的主要功能:用于界面原型设计
XAML Studio 的优势之一在于它将一系列工具集成到一个应用程序中,旨在以最小的停机时间测试设计、创建屏幕布局和调试链接。它不仅仅是一个 XAML 查看器,更是一个交互式环境,可用于快速迭代 UI。
其最重要的功能之一是实时编辑:您可以在编辑器中编写或修改 XAML 代码,并立即查看功能齐全的预览。此预览窗口支持真实交互:您可以像在最终应用程序中一样按下按钮、更改状态、移动滑块或测试行为。
另一个引人注目的功能是能够使用面包屑导航来体验 XAML 导航。这使您可以轻松浏览复杂的结构,准确了解您在树状结构中的位置,并快速找到要调整的元素。
此外,XAML Studio 还包含一系列快捷方式和快速预览选项:重新加载内容、激活对齐网格、应用裁剪或更改主题,所有这些都可通过快速访问菜单完成,旨在简化试错过程。
实时编辑和预览交互
XAML Studio 的核心是其实时编辑和交互系统,这项实时编辑功能无需每次更改颜色、间距或模板时都重新编译整个解决方案。您可以编写代码、保存,甚至无需保存,界面都会刷新,让您立即看到结果。
此预览版具有完全交互性,这意味着您可以测试真实的界面行为:导航控件、触发事件,并查看样式、触发器和视觉状态组合时元素的行为。它对于原型设计来说简直是救星,因为它可以帮助您更快地决定哪些设计美观,哪些不美观。
此外,XAML Studio在设计界面上内置了对齐参考线,方便用户轻松地统一定位元素,并检测出可能被忽略的错位。这使您能够实现更简洁的布局,而无需进行大量的盲目边距调整。
在复杂的设计系统中,WinUI 和 Fluent 提供了许多阴影、圆角和自适应布局等功能,而拥有一个集成良好的交互式预览功能可以帮助您避免在生产环境中进行微调时经常遇到的诸多挫折。
调试绑定并探索可视化树
在 WPF、UWP 或 WinUI 中,数据绑定静默错误是一大难题。绑定失败时,通常只会显示一个空值,除此之外几乎没有其他信息,这使得理解问题所在变得十分困难。XAML Studio 内置了一个绑定调试器,旨在帮助用户发现并解决这类问题。
借助绑定调试器,您可以直观地查看模型属性与界面控件之间的连接方式。该工具会显示每个绑定的状态、上次使用的值,并帮助您快速定位哪个绑定失败以及失败原因。对于包含大量数据的复杂原型,这可以节省大量时间。
与此相关,XAML Studio 集成了可视化树状浏览器和可视化状态,可通过“属性”面板访问。可视化树状浏览器会显示构成屏幕的控件和元素的完整层次结构,允许您选择任何节点并查看其属性、样式和关系。
同时,可视化状态浏览器可以轻松查看和切换视图的不同状态(例如,正常、指向、按下、禁用),这在使用自定义控件或高级模板时至关重要。这样,您就可以快速测试每种状态对设计的影响,而无需在实际应用程序中手动强制执行每种情况。
使用数据上下文编辑器进行数据管理
在没有真实数据的情况下测试接口就像盲目设计。因此,XAML Studio 包含一个数据上下文编辑器,该工具可让您轻松定义视图的数据上下文,并用测试信息填充它。
通过此编辑器,您可以将用户界面连接到静态和动态数据源:例如,从本地文件或 REST API 加载 JSON 数据,并将其用作控件的 DataContext。这样,您可以查看布局在处理长文本、大型集合或边界值时的表现,这对于实现健壮的设计至关重要。
这种将 XAML 与测试数据混合使用的能力,无需设置整个应用程序基础架构,即可更快地迭代信息的视觉外观和分布,并省去了设置临时示例项目来查看表单在真实数据中的外观。
XAML Studio 还具有自动保存系统,可以在您重新打开应用程序时恢复文档及其数据上下文,这样您就不必每次想要继续测试特定设计时都重新配置数据源。
效率工具:智能感知、自动保存等
除了纯粹的视觉特性外,XAML Studio 还集成了多种效率工具,让您在编写大量 XAML 代码时更加轻松高效。其中最实用的功能之一是 IntelliSense 支持,它会在您输入时提示属性、类型、控件名称和命名空间。
这项 IntelliSense 功能不仅能加快代码编写速度,还能帮助防止绑定、路径和属性中的拼写错误,尤其是在样式、模板或共享资源等较长的结构中。如果您已经熟悉 Visual Studio 中的 IntelliSense,那么您会感觉非常得心应手。
另一个非常实用的功能是文档的自动保存和恢复。XAML Studio 可以自动保存您的工作,并在您重新打开应用程序时,检索您之前使用的选项卡和文档,这样您就可以从上次中断的地方继续工作,而无需逐个打开文件。
该界面包含一个文档工具箱,可作为控件和属性的示例、帮助和参考资料的快捷方式。这样,您无需离开工具即可查阅文档,这在测试不太熟悉的 API 或 WinUI 特有的属性时尤其方便。
设计辅助工具:Fluent UI、指南和命名空间
该项目的最新版本采用了基于微软现代设计系统 Fluent UI 的全新界面。此次更新不仅体现在工具的视觉外观上,也体现在其对现有控件、主题和布局的集成方式上。
为了帮助您进行布局,XAML Studio 在预览界面上提供了对齐参考线和网格。这些参考线使对齐边距、内边距和布局变得轻松便捷,尤其适用于您想要复制像素级精确设计,或者希望确保元素正确对齐而无需手动测量的情况。
该工具的另一项优势在于管理 XAML 命名空间。借助其命名空间助手,您可以更高效地添加和更正 xmlns,避免因声明不完整或重复而导致标记错误或产生烦人警告的常见问题。
日常使用中也进行了一些小的改进,例如可以从上下文菜单复制打开的标签页,这在您想要尝试同一布局的两种变体,而又不想丢失原始版本或从头开始创建新文件时非常有用。
文件夹支持和资源管理
XAML Studio 的一项重大改进是增加了对外部文件夹和资源的支持。这意味着您可以处理一组相关的文件,而不仅仅是单个孤立的 XAML 文件。
借助此功能,应用程序可以从文件夹加载图像、设计数据文件以及其他通常与实际界面配套的辅助资源。例如,您可能有一组用于轮播图的测试图像、用于按钮的图标,或者用作数据源的 JSON 文件。
文件夹支持使 XAML Studio 更接近真实的工作流程,而不仅仅只是一个简单的沙箱。它允许您设置模拟完整应用程序资源结构的小型测试场景,同时又具备专为原型设计而打造的轻量级环境的特性。
所有这些功能,再加上预览、绑定和导航工具,使得 XAML Studio 对于那些希望在将屏幕集成到重量级解决方案之前对其进行完善的用户来说,是一个非常有吸引力的选择。
从 Microsoft Store 下载并手动安装
对于大多数用户来说,最简单的入门方法是直接从 Microsoft Store 下载 XAML Studio。它是一款免费应用,您只需搜索并安装它,即可在几分钟内开始体验 XAML。
根据现有信息,应用商店版本目前仍处于 1.1 分支,而最活跃的开发工作则在项目仓库的 dev 分支上进行。如果您想体验最新功能或参与开发,这一点非常重要,因为应用商店中显示的内容可能与源代码中的内容有所不同。
如果您更喜欢从存储库手动安装或自行编译,则应牢记与 Visual Studio 相关的一些最低要求,以确保一切正常运行。
从源代码编译 XAML Studio
如果您想更进一步,从源代码编译 XAML Studio,则需要在 Visual Studio 中准备环境,其中包含面向现代 Windows 应用程序开发的特定组件。
首先,您需要在 Visual Studio 中安装Windows 应用程序开发工作负载。该工作负载包含与 UWP 应用程序、WinUI 以及 Windows 平台上的其他现代 XAML 技术相关的所有内容。
此外,您还需要安装通用 Windows 平台工具以及特定的 Windows SDK 17763。如果没有此 SDK,项目的某些部分可能无法正确编译,因此建议在打开解决方案之前,在 Visual Studio 安装程序中检查这一点。
所有组件准备就绪后,打开代码库,确保名为XAMLStudio 的项目被标记为解决方案中的启动项目。然后,只需按 F5 进入调试模式,即可从您自己的开发环境中启动应用程序。
开源项目、许可证和行为准则
由于 XAML Studio 是以.NET 基金会项目的形式发布的,因此它采用 MIT 许可证,这是最宽松的开源许可证之一。这意味着您可以非常自由地查看、修改、重用代码并为其做出贡献,只要您遵守通常的署名条款即可。
该代码库包含一个 NOTICE.json 文件,其中列出了第三方库的归属信息,与应用程序本身显示的外部库使用信息一致。如果您关注企业环境中的许可合规性,此文件可作为参考,帮助您了解已集成哪些组件。
该项目已采用微软开源行为准则,因此参与问题、拉取请求或讨论需要遵守明确的行为准则:尊重、专业精神以及对骚扰行为零容忍。此外,我们还提供了一个关于行为准则的常见问题解答页面,以及一个联系邮箱([email protected]),用于解答疑问或处理问题。
对于希望积极协作的用户,CONTRIBUTING.md 文件介绍了如何提出更改建议、提交贡献以及报告问题。它详细说明了使用分支的推荐方法、代码审查工作流程以及项目协作的其他实用方面。
遥测、隐私和数据收集
与其他许多现代应用程序一样,XAML Studio 包含了遥测机制来收集使用情况信息,目的是了解哪些功能使用最多、应用程序在不同文档大小下的性能如何以及最常发生的错误类型。
好消息是,该应用程序本身提供了对此遥测数据的明确控制:在设置页面的“反馈”部分,您可以将“诊断数据”选项更改为“否”,以禁用分布式应用程序本身的数据收集。
值得注意的是,根据项目信息,App Center(用作遥测基础的平台)已被弃用,目前v2 版本中未使用主动遥测,正在确定替代的诊断解决方案。
总之,微软声明该软件可能会收集应用程序使用情况信息,这些信息可用于改进服务和产品。如果您作为开发者使用可能收集最终用户数据的功能(例如,在您自己的应用程序中集成服务),则必须遵守适用法律,并提供适当的隐私声明和政策,并在适当情况下链接到微软的隐私声明。
品牌、标识和商标使用
该代码库和应用程序本身可能包含微软或其他第三方的商标和徽标。该项目明确指出,这些商标的使用须遵守微软的官方品牌指南。
如果您决定创建项目的修改版本或替代发行版,则必须以不会造成混淆或暗示微软官方赞助的方式进行(如果不存在此类关系)。如果您重新分发二进制文件或将项目的部分内容集成到商业产品中,则此规则尤为重要。
同样,代码中使用的任何第三方徽标或商标均受这些第三方的政策约束,因此,如果您打算在自己的公共项目中重用应用程序的大部分内容,建议您审查这些方面。
背景:对 Visual Studio 设计器的不满以及 XAML Studio 的价值
XAML Studio 作为开源项目发布之际,正值许多开发者对 Visual Studio 的可视化设计器表达不满之时。性能问题、崩溃、行为不一致以及调试复杂 XAML 的困难是反复出现的抱怨。
在这种情况下,XAML Studio 被视为一种“逃生阀”:它是一款轻量级工具,专门用于 XAML 设计和测试,可以减少传统编辑-编译-运行循环中的一些繁琐步骤。它的目标并非取代 Visual Studio,而是弥补其在界面快速迭代方面的不足。
这种方法也符合学习 WinUI、WPF 或 UWP 等技术的用户的需求。对许多人来说,.sln 文件、复杂的配置以及打包成可执行文件等操作可能会让人非常头疼,尤其是在学习初期。而拥有一个专注于 XAML 层的独立工具,则能让学习和实验过程更加顺畅。
简而言之,XAML Studio 已找到其定位,成为那些将大量时间投入到在 Windows 生态系统中构建和改进用户界面的人们非常重视的应用程序,它为日常操作 XAML 提供了一个更灵活、更轻松的环境。
对于刚开始学习 C#、WPF、UWP 或 WinUI 的用户,或者对于那些已经精通 XAML 但仍然面临测试缓慢和调试困难的用户来说,拥有像 XAML Studio 这样的工具,将显著改变你进行原型设计、调试复杂绑定以及在将设计集成到大型项目之前进行验证的方式——所有这些都具有开源项目的灵活性,并且能够让你安心地控制共享哪些数据以及如何使用这些数据。