写在前面:
本文借鉴于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.pngVisual Studio For Mac
当你打开一个XAML文件时,点击 Preview按钮去启用或禁用
previewer_mac.pngPreviewer
当你打开Xamarin Forms Previewer时,会显示这么几个可视化工具:
- iOS (Windows下必须跟Mac保持链接)
- Android
- Tablet
- Phone
- Landscape
- Portrait
error.png注意事项:
在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>
listview_preview.png
到这里Xamarin Forms Previewer 的介绍就完成了,希望能对您有所帮助。
网友评论