Design Time View Model: Hot Reload+MVVM

Bogusław Błoński
3 min readNov 14, 2019

--

Context:

I assume that you understand what is MVVM.

Design Time View Model is sub, fake, special View Model State hard to get, all or corner cases used when creating, updating,.., retesting UI.

Design time is time when you make UI in XAML with hot reload or without it in previewer.

Why to use many fake view model or many vm setups?

Because Real Wold App VM are often fat, have many properties/states which are dependent from each other and one IsDesignMode will won’t make job for you only many run time values will. More examples on bottom.

Design time data concept has some similarities with ASP.NET Scaffolding or Blendability from WPF/Windows Phone( more MVVM Light/ Laurent Bugnion)

MVVM Prism

Created brand new Xamarin.Forms with Prism Template had to update Form to 4.3 to enable HOT RELOAD.

Sources:

VM Property

Hello Prism first test.

Add a property SubTitle in VM to display it run time. Emulator is working….

Nice warring about to not to forget to BUILD

Build, Run emulator, do XAML changes.

Binding data not visible in Previewer but visible in Hot Reload.

Swap View Models

View Models have many UI states long text.

Lets create some Dummy Demo Data View Models and see how will look.

To do view model swap we need to:

  • create own View Model Locator (static class) /DemoDataLocator
DemoDataLocator with few states of MainPageViewModel

The Too Small button / Internalization

One of first reasons to do Hot View Model Swap is internationalization.

Some button text in some languages simply DON’T want fit.

Rebuilding and going to threw whole app to have some View Model state is extremely unproductive and frustrating.

Extremely Dummy Internalization/ simple sample.
Internalization UI finding badly designed button.

Next

Links:

--

--

Bogusław Błoński

Did small internal corporate and big projects with over 1 000 000 active users in ASP.NET and XAMARIN.FORMS and XAMARIN.NATIVE. Blogging for better sleep.