In my previous post I showed how to switch between Visual States using the tooling that comes with the BuildIt.Forms library. One of the other features of the tooling is the ability to load mock data that can assist with visualising how a page might look like with certain data. Rather than try to guess at what data your page might require, the tooling simply allows you to define a series of design actions. Each design action will appear within the BuildIt.Forms flyout, allowing you to invoke the action.
Let’s demonstrate this with an example. I’m going to change the layout of my page slightly so that in the DataLoaded state a ListView is displayed that takes up the entire screen. The XAML for the ListView is as follows:
<ListView x_Name=”DataList” IsVisible=”false”>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Label Text=”{Binding Name}” />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
As I don’t have any actual data at the moment, when I run up the application and click the Load Data button I see the following for the DataLoaded state:
This isn’t great as I’ve got no idea what my ListView is going to look like. So let’s fix this by adding a design action. I do this by calling the AddDesignAction method (it’s an extension method which is why I can access it on the MainPage) and providing a name, “Mock Data”, and the action to perform when the design action is run.
public MainPage()
{
InitializeComponent();
var groups = VisualStateManager.GetVisualStateGroups(this);
#if DEBUG
this.AddDesignAction(“Mock Data”,
() =>
{
var data = from i in new[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 }
select new { Name = $”Item {i}” };
DataList.ItemsSource = data;
});
#endif
}
In this case I’m creating an IEnumerable of an anonymous type that has a property Name, which aligns with the data binding in the ListView XAML shown earlier. I’m assigning this directly to the ItemsSource of the ListView – at this stage I’m just creating the layout of the pages of my application so I might not even have View Models, which is why I’m assigning directly to the ItemSource property in place of data binding it.
Now when I run the application I see:
The final image shows the list of items being displayed in the ListView – clearly this layout could do with some work!