Sunday, July 14, 2019

UWP Inline DesignTime data

TLDR: UWP apps can now simulate the inline design-time data that Xamarin.Forms supports.
Simply install `Install-Package UwpDesignTimeData`
Then, do things like this in your XAML: `dt:DesignTime:Text="Only shown in designer."`


Let's say you have a simple page in an app. Imagine something like this. It's a default settings page as generated by Windows Template Studio.

Now imagine this is a localized app and so all the text comes from a resource (RESW) file.
In this situation, the XAML will contain Universal Identifiers (`x:Uid`) for each element and the text will be defined in the resource file (for each language.)
These files will look something like this:

That's great, but if you want to change what the page looks like, the designer isn't a lot of help.
Here's what the designer shows.

This is far from great and it's something I can make better based on my knowledge of attached properties and the way the XAML designer works.

Simply install my new NuGet package. UpwDesignTimeData.
Then modify the XAML like this.
The designer now looks like this.

It's not just great for localized content, it can also provide design-time data for values set with a binding.

It doesn't only work with text. It supports the following properties:

  • Caption
  • Content
  • Date
  • Description
  • FlowDirection
  • Footer
  • Header
  • Icon
  • IsChecked
  • IsOn
  • Maximum
  • MaxRating
  • Minimum
  • OffContent
  • OnContent
  • PaneFooter
  • PaneHeader
  • PaneTitle
  • Password
  • PasswordChar
  • PlaceholderText
  • PlaceholderValue
  • QueryText
  • Source
  • Symbol
  • Text
  • Time
  • Title
  • Value

These should work with all the standard controls. It won't work with custom controls. Sorry.

It even works for a few things that you can't do in XAML with the regular properties.
For example, you can specify a date or time for the DatePicker (or TimePicker) as strings and it will try and parse the value and then show it.

It works with Visual Studio 2017 and 2019.

Things to note.
  1. You may need to (re)build the project to force the designer to refresh and show the design-time data.
  2. If you find a bug or something that it doesn't work with, please log an issue with the details.
  3. If you define the actual and design-time versions of the same property, specify the design-time version second. This is necessary because of the way the XAML designer works.
  4. This should work regardless of the version of the SDK you are targetting (or have as the minimum.) If it doesn't work in your scenarios, please log an issue with the details.
  5. Documentation will follow.
Xamarin.Forms already has native support for this functionality. Hopefully, UWP (and WPF) will get this officially at some point in the not-to-distant future. ;)
When that happens, I hope and expect you'll be able to simply remove this package from your app and replace all instances of "dt:DesignTime." with "d:".


Post a Comment

I get a lot of comment spam :( - moderation may take a while.