Xamarin.Forms Previewer

写在前面：

本文借鉴于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

previewer.png

Visual Studio For Mac

当你打开一个XAML文件时，点击 Preview按钮去启用或禁用

previewer_mac.png

---

Previewer

当你打开Xamarin Forms Previewer时，会显示这么几个可视化工具：

• iOS (Windows下必须跟Mac保持链接)
• Android
• Tablet
• Phone
• Landscape
• Portrait

previewer.png

注意事项：
在Preview之前需要build project，否则会报错

error.png

在此之后，您可以编辑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>

listview_preview.png

到这里Xamarin Forms Previewer 的介绍就完成了，希望能对您有所帮助。

---

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