In
Visual Studio, when designing the graphical user interface using XAML, it would be nice to see the screen filled with sample data rather than a blank spot as shown in the example screenshot below.
In order to get the
Designer to show some sample data, you have to create a few view model item and collection classes, as well as a sample data XAML. Then link up the sample data with the graphical page XAML using bindings. In this example, only a simple one way binding will be shown to illustrate the steps in getting the Designer to display some sample data.
Create a view model item class
In
Visual Studio, create a new class that represents an object with properties that you want to display in the
Designer, e.g. a
PersonItemViewModel class with
ID and
FirstName properties in the project's
ViewModels folder.
namespace Solarizr.ViewModels
{
public class PersonItemViewModel
{
public string Id { get; set; }
public string FirstName { get; set; }
}
}
Create a view model collection class
To contain one or more
Person items in a list, create a collection class e.g.
PeopleViewModel in the project's
ViewModels folder. Note that the name
PeopleCollection used here will be used later in the Page XAML binding source definition.
using Solarizr.Models;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Solarizr.ViewModels
{
public class PeopleViewModel
{
public PeopleViewModel()
{
this.PeopleCollection
= new ObservableCollection<PersonItemViewModel>();
}
public ObservableCollection<PersonItemViewModel> PeopleCollection { get; set; }
}
}
Create a XAML with sample data
With the
PersonItemViewModel and
PeopleViewModel collection class definitions created, the next thing to do is to create a
XAML file populated with some sample data you want to display in the
Visual Studio Designer. In the XAML file, it is important to add in a namespace
xmlns declaration to the
PersonItemViewModel and
PeopleViewModel view model classes. In the code listing below, it is
vm pointing to "
using:Solarizr.ViewModels". The sample data XAML can be created in the project's
SampleData folder. In this sample, 3 records are defined - David, John and Mary.
<vm:PeopleViewModel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:Solarizr.ViewModels"
>
<vm:PeopleViewModel.PeopleCollection>
<vm:PersonItemViewModel Id="1" FirstName="David" />
<vm:PersonItemViewModel Id="2" FirstName="John" />
<vm:PersonItemViewModel Id="3" FirstName="Mary" />
</vm:PeopleViewModel.PeopleCollection>
</vm:PeopleViewModel>
Add in the view models to the Page XAML
Now with the sample data XAML created, the next step is to edit the Page XAML using the Visual Studio Designer and editor and add in the namespaces and bindings.
- In the Page XAML file, add in the view models namespace.
xmlns:vm="using:Solarizr.ViewModels"
- Add in the sample data namespace.
xmlns:sampleData="using:Solarizr.SampleData"
- Add in a design time data context and point it to the sample data.
d:DataContext="{d:DesignData ../SampleData/PeopleViewModelSampleData.xaml }"
- Add in the data source to a list control's items e.g. ListView.
ItemsSource="{Binding Path=PeopleCollection, Mode=OneTime}"
>
Add in the individual item control's binding field.
Text="{Binding Path=FirstName}"
Width="80" Margin="10" />
The Designer should now display the sample data from the binding as shown in the screenshot below.
