Design Mode data not showing up with MVVM-Light

Question

I created a UWP app using TemplateStudio with MVVM-Light and can't get design data to show up in Visual Studio (or Blend).

View Model Locator:

public class ViewModelLocator
{
    NavigationServiceEx _navigationService = new NavigationServiceEx();

    public ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

        if(ViewModelBase.IsInDesignModeStatic)
        {
            SimpleIoc.Default.Register<IFooProvider, DesignFooProvider>();
        }
        else
        {
            SimpleIoc.Default.Register<IFooProvider, FooProvider>();
        }

        SimpleIoc.Default.Register(() => _navigationService);
        SimpleIoc.Default.Register<ShellViewModel>();
        Register<MainViewModel, MainPage>();
        Register<FooViewModel, FooView>();

        _navigationService.SetMainViewModel(MainViewModel);
    }

    public MainViewModel MainViewModel => ServiceLocator.Current.GetInstance<MainViewModel>();

    public ShellViewModel ShellViewModel => ServiceLocator.Current.GetInstance<ShellViewModel>();

    public FooViewModel FooViewModel => ServiceLocator.Current.GetInstance<FooViewModel>();

    public void Register<VM, V>() where VM : class
    {
        SimpleIoc.Default.Register<VM>();
        _navigationService.Configure(typeof(VM).FullName, typeof(V));
    }
}

FooViewModel has an ObservableCollection that is bound to in FooView.xaml

Now when I run the actual code everything runs fine and my FooViewModel correctly gets populated with data from FooProvider.

Looking at FooView though in Visual Studio or Blend, no data is displayed in the ListBox of FooView.xaml.

Is there a way to debug what's going wrong during design time? How do I fix my locator to correctly display data in FooView during design time?

(Note: The only code I added to the above class was related to FooView related items, the others were prepopulated).

Barry Wang Barry Wang · Accepted Answer · 2017-06-15T14:46:23

Is there a way to debug what's going wrong during design time?

Yep we can. Here are steps:

Open your Task manager, find out XDesProc.exe and log its PID from details tap
Set breakpoint to the constructor code or any code that you want to check
Open your app from Blend, find out the second XDesProc.exe and log its PID
Close FooView page.
Go to Visual Studio, choose Debug->Attach to Process, then choose managed(v4.6,v4.5,v4.0) code and then select the Blend PID of XDesProc.exe
Go back to Blend and open the page that you want to see design data issue
Visual Studio will breaks at the breakpoint you want.

By the way, I do not have your code so I'm not so sure whether I've reproduced your issue. You can debug an share us info after debugging.

How do I fix my locator to correctly display data in FooView during design time?

A workaround here is to manually add the designtime data using the following way:

<Page
x:Class="MVVMLightStartUp.Views.FooViewPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="using:MVVMLightStartUp.ViewModels"
DataContext="{Binding FooViewViewModel, Source={StaticResource Locator}}" 
d:DataContext="{d:DesignInstance Type=vm:DesignTimeViewModel, IsDesignTimeCreatable=True}"
mc:Ignorable="d">

And in code behind define a DesignTimeViewModel.cs:

 public class DesignTimeViewModel
{
    public ObservableCollection<Foo> BindingData { get; set; }

    public DesignTimeViewModel(DesignTimeDataService dataservice)
    {
        var FooList = dataservice.GetFoo();
        BindingData = new ObservableCollection<Foo>(FooList);
    }
}

For details you can refer to some of the following blogs:

https://docs.microsoft.com/en-us/windows/uwp/data-binding/displaying-data-in-the-designer https://msdn.microsoft.com/en-us/magazine/dn169081.aspx

Design Mode data not showing up with MVVM-Light

1 Answers