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

Xamarin.Forms Previewer_第1张图片
previewer.png
Visual Studio For Mac

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

previewer_mac.png

Previewer

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

  • iOS (Windows下必须跟Mac保持链接)
  • Android
  • Tablet
  • Phone
  • Landscape
  • Portrait
Xamarin.Forms Previewer_第2张图片
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 NameList { get; set; }
                     = new ObservableCollection()
                       {
                           "Adam",
                           "Bob",
                           "Sara",
                           "Malcolm",
                           "Jessica"
                       };
     }
 }

在你的XAML页面中,确保你有一个对这个类所在的命名空间和程序集的引用。将你的BindingContext设置为DataViewModel,并设置你的ListView与NameList绑定。

<?xml version =“1.0”encoding =“utf-8”?> 
 
     
     

Xamarin.Forms Previewer_第3张图片
listview_preview.png

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


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

Xamarin.Forms Previewer_第4张图片

你可能感兴趣的:(Xamarin.Forms Previewer)