Create Mock Previewer Data As Well As Controls On Xamarin.Forms

This article is about creating mock data and controls which appear only in preview windows but not at run time.

We came across a situation where we want to test our UI with some mock data to see the positioning or appearance of the control .

 

So normally we either bind it in UI Like Text="Test Data" or we bind it from view model for our initial testing.

 

This blog is about creating mock data and controls which appear only in preview windows but not at run time.

 

 

 

Here we have a stack layout that has background property which is assigned like d:Background color.

 

D:-it signifies that background color should be ignored while running the app as mentioned on line number 6 mc:Ignorable ="d".So wherever it will find a control or property prefixed with d: it will be ignored at runtime.

 

At line number 8 we have button which is prefixed d:Button and we have a screenshot in the tutorial where we will see that button is not visible. So it’s not only the property that can be mocked for the previewer --  we can mock the controls also.

 

Let’s understand it more by looking at the output.

 

 

 

So here we have our preview window at left and our app running on Simulator at the right.

 

As the background color is prefixed with d: it got ignored at runtime.

 

Also, the button is visible in previewer but not in our android emulator as prefixed with d:.

 

So with the above tutorial we are good to create mock previewer data as well as controls on Xamarin.Forms.

 

Happy Coding!!!