Use XAML Previewer To Preview Data In Xamarin Forms

This is my new article for Xamarin Forms Designer. If you are using Xamarin Forms Designer, I hope this will save you some time. In this article, we will learn how to use test data while designing your UI to see how your UI look like without much effort.

New Xamarin.Forms provides a solution for faster design and preview of your UI, i.e., XAML Previewer. The XAML Previewer allows you to preview of your dummy data at design time. You don't need to build, compile, and deploy your app to see the UI output.

Here is 3 lines of code that you placed in XAML namespace.

xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"

After adding this namespace, you can use “d:” for the dummy data. For example, d:Text=”ABCD!”. With this attribute on a control, the control will be displayed in XAML Previewer.

NOTE
Element with d: do now show at the run time.

Requirements

(XAML Previewer) Design time data requires a minimum version of Xamarin.Forms 3.6 or later.

Example

<StackLayout d:Padding="0,20">
<Label d:Text="This is Design time test data"
d:TextColor="Red"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>

You can use any Xamarin Forms attribute like control, Fontsize, TextColor, Spacing any control or the property you can use with this “d:”, this will be shown in design preview only.

Another Example

<d:Button Text="Design Time"
BorderColor="Black"
BorderWidth="3" CornerRadius="25" VerticalOptions="CenterAndExpand"/>

This is nice ☺!!

XAML Previewer Design-time data in Image

You can also set the image source at design time or load it dynamically. In your android project, add images you want to show in the XAML Previewer. In android you can put images in Resources >> Drawable folder and in iOS project you can put images in the resources folder.

<Image Source={Binding ProfilePicture} d:Source="demo.png" />

XAML Previewer Design time data in ListViews

ListView is one of the most popular controls to display multiple data in a list format. It is very difficult to visualize it without data. So the solution is design time array as an Itemsource.

Example

<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>

I hope it helps your UI design speed.