Live Previewer Tools For Xamarin

写在前面：

之前给大家介绍过再 Xamarin.Forms 开发中经常会使用一些实时预览工具去帮助我们快速调试 UI，其中包含 Xamarin 自带工具 Forms Previewer，还有 Xamarin 官方推荐免费工具 LiveReload 以及 第三方收费工具 LiveXAML，之前也对这几种工具进行了比较， Xamarin LiveReload 虽然免费，但是实际开发中却存在因为网络问题导致不能实时预览的问题，LiveXAML 稳定行相对可靠，但是由于收费限制，所以对于部分开发者并不是推荐。其实还有一些类似开源、免费的工具能帮助我们进行实时 Live Previewer，今天我们就介绍几个工具。

XAMLator

XAMLator 是一个为 Xamarin.Forms 提供的实时预览 XAML 页面的工具。使用 XAMLator 使开发者在 IDE 中任何实时更改 XAML 布局文件、Code Behind 代码、CSS 样式表 等行为都可以在模拟器以及真实设备上实时更新相对应 XAML 真实布局样式。

Features:

1. 支持任何类型的 Xamarin.Forms 项目以及 MVVM 框架。
2. 支持 Android 和 iOS 模拟器。
3. 支持 Android 和 iOS 真机。
4. 支持同时更新多台设备。
5. 支持 XAML 文件实时更新。
6. 支持 CSS 样式表实时更新。
7. 支持 Code Behind 代码实时更新。
8. 支持自定义预览方式。
9. 支持 DesignTimeData 绑定。

XAMLator 的原理类似 LiveReload 和 LiveXAML，使用上与这两种工具也基本项目，需要现在 MacOS 上搜索 XAMLator Extensions 进行安装，然后在你的项目中添加 XAMLator nuget 引用，并在对应的平台进行初始化设置。

注意事项：

1. 目前 XAMLator 只在 macOS 中可以使用。
2. XAMLator 支持 XAML 文件的 Code Behind 代码。
3. XAMLator 是开源项目，有任何问题可以在 Github 上提 issue。

Gorilla Player

Gorilla Player 同样也是一个免费的 Xamarin.Forms XAML Previewer，在 2016 年被 UXDivers 公司将其从内部工具转为免费工具提供给 Xamarin 社区使用，其最初被创建的目的也是在于简化并高效创建多平台 UI 流程。它同样支持同时在多个模拟器和实际设备中进行预览。

Features:

1. 支持任何类型的 Xamarin.Forms 项目以及 MVVM 框架。
2. 支持 Android 和 iOS 模拟器。
3. 支持 Android 和 iOS 真机。
4. 支持同时更新多台设备。
5. 支持 XAML 文件实时更新。
6. 支持 DesignTimeData.json 文件 Binding。
7. 支持 Gorilla.json 文件形式配置自定义导航栏。

使用步骤

1. 下载 Gorilla desktop application ，安装程序包含一个Visual Studio add-in necessary，用于将正在编辑的 XAML 文件与预览视图同步。
2. 给 Android 和 iOS 项目分别添加 UXDivers.Gorilla.SDK.AutoConfig Nuget 引用。
3. 添加 GORILLA为 Debug 模式下的的附加符号。这可确保应用程序以预览模式启动。
4. 运行应用程序，连接到服务器，然后开始预览！

注意事项：
在真机上通过 Gorilla Player 预览，需要在你的设备上安装一个 Gorilla Player App，其类似 Xamarin 之前推出的 Xamarin LivePlayer。

More

在 Xamarin Github issue 中我们看到这样一个问题： live reload is removed from VS marketplace. ，Xamarin 官方已经不在继续支持 LiveReload 这个工具了，推荐使用 LiveXAML 和 Gorilla Player 去实时调试 UI，社区内对于这个举措褒贬不一，同样我们在 Visual Studio Roadmap 中发现在：

在2019 Q1 Visual Studio 会对 Xamarin.Forms Previewer 进行优化和重构，其中 Xamarin 团队会把原来 LiveReload 复杂的使用过程进行简化并合并到 Xamarin.Forms Previewer 中，但是对于 Xamarin 这种周而复始的习惯，也许哪天又会出来一篇 xamarin.forms previewer is dead 类似的issue，所以对于 Live Previewer Tools 的选择，个人更倾向于第三方组件，毕竟不像微软改名部。

Reference

• XAMLator-Repo-at-github
• gorilla-player-a-tool-to-craft-beautiful-xaml-uis-for-xamarin-forms
• gorilla-player-introduction
• Gorilla-Player-Support-wiki-Getting-Started
• Previewing the Build 2018 Conference Vision app with Gorilla Player
• 如何下载youtube视频1080p

到这里在 Live Previewer Tools For Xamarin.Forms 就介绍完了，希望能对您有所帮助。

---

——End 有问题可以加我微信，大家一起讨论，加好友前请备注您的简称，谢谢！