写在前面：
本文借鉴于Xamarin Forms Visual Previewer(By Adam Pedley)。对于Xamarin.Forms开发者来说，查看XAML页面的可视化设计器是非常受欢迎的一个功能，对于实时更新UI对于开发者来说在进行UI搭建的时候是一个能简化大量工作量的事情。Xamarin在目前的Visual Studio和Visual Studio For Mac中都提供了Xamarin.Forms Previewer(Xamarin.Forms 2.2之后)。但这并不是Visual Designer，而是一个Visual Previewer，但是同样可以在这里实时看到iOS和Android的XAML文件。
Launch Previewer
Visual Studio
打开View > Other Windows > Xamarin.Forms Previewer
Visual Studio For Mac
当你打开一个XAML文件时，点击 Preview按钮去启用或禁用
Previewer
当你打开Xamarin Forms Previewer时，会显示这么几个可视化工具：
- iOS (Windows下必须跟Mac保持链接)
- Android
- Tablet
- Phone
- Landscape
- Portrait
注意事项：
在Preview之前需要build project，否则会报错
在此之后，您可以编辑XAML并更新，并不需要每次保存或重建项目，都会在更新XAML时进行更新。
Design Data
当你有一个ListView或其他绑定的数据时，很难看到它在设计器中的实际外观。为了弥补这一点，您可以添加临时数据以绑定到您的视图。
首先我创建一个静态类，我可以绑定一个静态模型。在这里我只是把我的数据列表。
public class Data
{
private static DataViewModel dataViewModel;
public static DataViewModel ViewModel => dataViewModel ?? (dataViewModel = new DataViewModel());
public class DataViewModel
{
public ObservableCollection<string> NameList { get; set; }
= new ObservableCollection<string>()
{
"Adam",
"Bob",
"Sara",
"Malcolm",
"Jessica"
};
}
}
在你的XAML页面中，确保你有一个对这个类所在的命名空间和程序集的引用。将你的BindingContext设置为DataViewModel，并设置你的ListView与NameList绑定。
<？xml version =“1.0”encoding =“utf-8”?>
<ContentPage xmlns =“http://xamarin.com/schemas/2014/forms”
xmlns：x =“http://schemas.microsoft.com / winfx / 2009 / xaml“
xmlns：local =”clr-namespace：Previewer; assembly = Previewer“
x：Class =”Previewer.MainPage“
BindingContext =”{x：Static local：Data.ViewModel}“ >
<ListView ItemsSource = “{Binding NameList}” >
</ ListView>
</ ContentPage>
到这里Xamarin Forms Previewer 的介绍就完成了，希望能对您有所帮助。
——End 有问题可以加我微信，大家一起讨论，加好友前请备注您的简称，谢谢！
