Monthly Archives: February 2016

Enabling / Disabling design data in Visual Studio 2015 Update 1

.NET, Blend, MVVM, Technical stuff, Universal Windows Platform UWP, Visual Studio, Work, XAML
No Comments

If like me you use design time data in Blend or the Visual Studio designer, you may have noticed a small change that is actually very convenient, but maybe not the most discoverable feature ever: You can now switch design time data on or off very easily!

To illustrate this, follow the steps:

  • Start Visual Studio 2015 Update 1.
  • (if you have not done so already) Install MVVM Light with: Tools / Extensions and Updates / Online –> Search for mvvm light and install the extension.
  • After restarting Visual Studio, select File / New Project and create a new MvvmLight (Win10Univ) application. This will create a new Windows 10 Universal project with all the MVVM Light scaffolding.
  • Open MainPage.xaml in the Visual Studio designer (or select Design in Blend from the context menu on MainPage.xaml).
  • Make sure that you set the configuration manager to x86 (not ARM or x64).
  • Build the application.

At this point, you will see one of two images below:

2016-02-29_14-10-21

Figure 1: Design data is enabled

 2016-02-29_14-10-48

Figure 2: Design data is disabled

What’s the difference?

If you study both figures closely, you will see the difference at the bottom: Figure 1 shows actual data created in the code of the MVVM Light application (“Welcome to MVVM Light [design]” and the “Starting…” label for the Clock), while figure 2 shows the names of the databound properties (WelcomeTitle and Clock) instead. Switching from one figure to the other is done by using a new button on the design surface, which is a little hard to find. Here is an illustration:

2016-02-29_14-16-09

This small button is tooltipped “Enable Project Code”.

What this button does is enable or disable a feature that MVVM Light applications are taking advantage of: The possibility to run some of your app code while the application is loaded in the visual designer. If the button is toggled on, the design time code will be enabled, which explains why the WelcomeTitle label shows the design time text, and the Clock shows the initialization text. This is useful, because it will allow you to design your app visually without having to actually run it, and so you will be faster.

On the other hand however, design time code can crash the visual designer. This type of errors can be fixed by updating the design time data, but they are time consuming, and sometimes it is just not worth it. In those cases, you may want to disable the design time code for the current view, which can be done by toggling the small button off.

In the case where the button is disabled, you can still edit the UI somehow, because the name of the property will be shown, and you can at least set the font, font size, foreground color  etc, which is better than nothing. For lists, this works too: If the design time code is enabled, the design time elements will be shown like in figure 3. On the other hand, if you disable the design time code, three “dummy” items will be created, which allows you to edit the item template visually. Here is an example taken from an app I am currently working on.

 2016-02-29_17-30-17

In addition, it also enables some level of design work with configurations that were not initially supported by the visual designer: ARM and x64. You can verify this by changing the configuration in the MVVM Light application above. Here the toggle button becomes disabled, and the view in figure 2 is displayed.

Having the possibility to disable design time code renders the visual designer more stable by allowing the user to eliminate possible design time error from the equation, and to still use the designer even if the design time code fails. It also allows some level of designer usage even with ARM or x64 configurations. This should accelerate things especially towards the end of the project, when maintaining the design time data can be time consuming.

Happy coding
Laurent

GalaSoft Laurent Bugnion
Laurent Bugnion (GalaSoft)
Share on Facebook