Build Simple & Clean Input Forms for the UWP

Editor’s note: The following post was written by Windows Development MVP Ricardo Pons as part of our Technical Tuesday series.

In this post we are going to discuss a very common scenario: CRUD (create, read, update, delete business objects) operations in our apps. It does not matter what kind of apps we are developing or what technology we are using, to do this task we very frequently need to create input forms to interact with the user and retrieve some information.

In my experience, the most frequent problem in this scenario is that we need to manually create input forms, add validations, and write all the business logic to make CRUD operations successful.

If our app has four or five forms, this is not a big problem—we can spend maybe one day or one week creating them. But if our application has a lot of forms—maybe 50 or 180 forms (in my case)—well we need to find a solution to help us solve this issue.

I love to create my applications using XAML and C#. With Silverlight there was a Silverlight Toolkit, specifically the DataForm Control, and when I tried it I loved it! But what about Universal Windows Platform apps? I could not find a control, piece of code or something like that to solve my scenario to create more than 100 forms in my LOB application using UWP.

There are some third party controls that offer different controls emulating DataForm of Silverlight or WPF but in my view they didn’t solve my issue cleanly and transparently using a MVVM pattern. I needed to solve this issue for my own application so I created my own small framework, the Universal Forms Toolkit (UFT). But what does this framework do for me? Well it almost emulates the same behavior of DataForm in Silverlight, trying to follow the same path.

Using DataForm in Silverlight you could use DataAnnotations and provide your business object with attributes to specify the order, length of the string, etc. With UFT, you can do almost the same thing. This small framework has many attributes for helping you build your form automatically:

  • Display
  • AutoIncrement
  • DecimalCount
  • DisplayMemberPathCollection
  • IsEnabled
  • IsNumeric
  • IsVisible
  • MenuOrder
  • MinMaxSize
  • Multiline
  • PropertyOrder
  • Range
  • SelectedItemCollection
  • And many more…

To use this framework in your UWP apps, first you need to download the package from Nuget

https://www.nuget.org/packages/UniversalFormsToolkit/. (You can also find the code for the following example at https://1drv.ms/u/s!Ai_-cZw4b2S2jZJ0pUvxQSPuHaFibg.)

Now we have our business object.

1

In our scenario we have Games that are grouped by GameType. We are going to create a simple Master – Detail view showing the collection of all games and their fields to be editable.

Here is the Game class with all necessary attributes to draw the form automatically.

2

Game class contains all the properties to draw our form automatically. This class must implement INotifyPropertyChanged interface.

Using GameTypes with ObservableCollection and DisplayMemberPathCollection attribute we are indicating that we want to draw a ComboBox using SelectedItemCollection attribute; we are telling the framework which property will save the selected item from the auto-generated ComboBox.

It’s important to note UFT will draw the form in the same order in which we wrote our class. If we want to modify the order of our properties, there are two options:

  1. Changing manually the order of our properties in our model.
  2. Using PropertyOrder attribute to change the order of our model.

In our ViewModel (I’m using MVVM pattern in this example), we need to create all the necessary properties to bind with the view to automatically render our form:

3

As you can see, with AutoGenerateProperty the selected game is enough to draw our form, because with this attribute we are saying, “I just want to draw the content of this object.”

I filled the collection with some dummy data for showing the framework working:

4

Finally, we need to create our view. I want to focus just on how to bind our collection with the UFT framework to draw our form.

Here is the namespace of UFT to use in our views:

5

In our View, we need to write something like this:

6

Running this example, selecting some item with the AutoGenerator control will draw our form automatically.

7

Conclusion

In this post we talked about how to generate forms automatically using business objects, trying to optimize and create forms from our models to save coding and design time with the MVVM pattern.

I showed a very simple scenario, but in the real world creating forms could be more difficult because we need to add business rules, custom validations, etc.

Universal Forms Toolkit is prepared to solve more sophisticated scenarios adding validations from our models: read-only controls, validation summary control to show all the list of the invalid fields and much more. Please feel free to check the examples in the GitHub repository https://github.com/RikardoPons/UniversalFormsToolkit.  Ricardo

About the author

A lead architect specializing in Microsoft technologies with a strong focus on Windows, .NET, Microsoft Azure & XAML Applications, Ricardo is a highly-regarded Windows Platform developer in Mexico and Latin America. He likes to create high-quality consumer and enterprise applications, and has built many official applications for global companies for the Windows Phone and Windows Store. A blogger, consultant, speaker and entrepreneur, he was awarded as a Nokia Successful Developer in 2013 and received an Independent Developer Microsoft DX Award in 2014.