将设计时数据与 XAML 预览器配合使用
有些布局没有数据很难进行可视化。 使用这些提示来充分利用在 XAML 预览器中预览数据密集型页面。
警告
VISUAL Studio 2019 版本 16.8 和 Visual Studio for Mac版本 8.8 中已弃用 XAML 预览程序,替换为 Visual Studio 2019 版本 16.9 和 Visual Studio for Mac 版本 8.9 中的 XAML 热重载功能。 在文档中详细了解 XAML 热重载。
注意
如果使用 Windows Presentation Foundation (WPF) 或 UWP,请参阅将设计时数据与桌面应用程序的 XAML Designer配合使用
设计时数据基础知识
设计时数据是设置的虚假数据,使控件更易于在 XAML 预览器中可视化。 若要开始,请将以下代码行添加到 XAML 页的标头:
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
添加命名空间后,可以将任何属性或控件放在 d:
前面,以在 XAML 预览器中显示它。 具有 d:
的元素在运行时不会显示。
例如,可以将文本添加到通常具有绑定到数据的标签。
<Label Text="{Binding Name}" d:Text="Name!" />
在此示例中,如果没有 d:Text
,XAML 预览器将不显示标签的内容。 相反,它显示“名称!”,标签将在运行时具有实际数据。
可以 d:
与控件的任何属性一 Xamarin.Forms 起使用,例如颜色、字号和间距。 甚至可以将其添加到控件本身:
<d:Button Text="Design Time Button" />
在此示例中,按钮仅在设计时显示。 使用此方法为 XAML 预览程序不支持的自定义控件放置占位符。
在设计时预览图像
可以为绑定到页面或动态加载的图像设置设计时间源。 在 Android 项目中,将要在 XAML 预览器中显示的图像添加到 “资源 > 绘制” 文件夹。 在 iOS 项目中,将图像添加到 “资源” 文件夹。 然后,可以在设计时在 XAML 预览器中显示该图像:
<Image Source={Binding ProfilePicture} d:Source="DesignTimePicture.jpg" />
ListViews 的设计时间数据
ListViews 是在移动应用中显示数据的常用方法。 但是,如果没有实际数据,它们很难可视化。 若要将设计时数据与它们一起使用,必须创建一个设计时数组以用作 ItemsSource。 XAML 预览器在设计时在 ListView 中显示该数组中的内容。
<StackLayout>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Item One</x:String>
<x:String>Item Two</x:String>
<x:String>Item Three</x:String>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding ItemName}"
d:Text="{Binding .}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
此示例将在 XAML 预览器中显示包含三个 TextCell 的 ListView。 可以更改为 x:String
项目中的现有数据模型。
你也可以创建一个数据对象数组。 例如,数据对象的公共属性 Monkey
可以构造为设计时数据:
namespace Monkeys.Models
{
public class Monkey
{
public string Name { get; set; }
public string Location { get; set; }
}
}
若要在 XAML 中使用 类,需要在根节点中导入 命名空间:
xmlns:models="clr-namespace:Monkeys.Models"
<StackLayout>
<ListView ItemsSource="{Binding Items}">
<d:ListView.ItemsSource>
<x:Array Type="{x:Type models:Monkey}">
<models:Monkey Name="Baboon" Location="Africa and Asia"/>
<models:Monkey Name="Capuchin Monkey" Location="Central and South America"/>
<models:Monkey Name="Blue Monkey" Location="Central and East Africa"/>
</x:Array>
</d:ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate x:DataType="models:Monkey">
<TextCell Text="{Binding Name}"
Detail="{Binding Location}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
此处的好处是可以绑定到计划使用的实际模型。
替代方法:对静态 ViewModel 进行硬编码
如果不想将设计时数据添加到各个控件,可以设置一个模拟数据存储以绑定到页面。 请参阅 James Montemagno 关于添加设计时数据的博客文章 ,了解如何在 XAML 中绑定到静态 ViewModel。
疑难解答
要求
设计时数据需要最低版本 Xamarin.Forms 3.6。
IntelliSense 在我的设计时数据下显示波浪线
这是一个已知问题,将在即将推出的 Visual Studio 版本中修复。 项目仍会生成,而不会出错。
XAML 预览程序停止工作
尝试关闭并重新打开 XAML 文件,清理并重新生成项目。