Filling up some MD forms

Some words on input controls and form layout.

Material Design has three flavors of input styles:

On all of them you can put a hint, and you can decide whether it will be overwritten (like in the default one in the examples to the left) or floating (like in the other two).

Those three comes in all input controls like TextBox, ComboBox, DatePicker etc.

I like the Filled and Outlined ones very much although as you probably noticed, their heights are awkwardly large. I guess it was designed to look best on android smartphone, tablets etc. I feel uncomfortable to put those on my forms, and to set a lower height appears to be a though cookie to break. In order to do that in the Xaml part, we need to created a new style based on the MDIX style, and we have to copy almost all of the code lines from the original MDIX Xaml code, just to tweak the padding and floating properties. My solution was to set it in the PowerShell code behind. If someone has a more elegant way to do it - Just drop me a line please.

What I do is call all of my filled/Outlined input controls and use a function I've created just to make it easier.

Get-Variable -Include "Car_Reg_Form_Textbox*" -ValueOnly |
    ForEach-Object { Set-OutlinedProperty -InputObject $_ 
-Padding "8" -FloatingOffset "1,-18" -FloatingScale "0.8" 
-Opacity "0.75" -FontSize 16 }

You need to name your form input controls in such a system, so it will be easier for you to select them (and only them) in one line of code.

You can see the system I'm using by downloading Example9 files from my GitHub repo. (to run the app, you will need both ps1 and Xaml as well as the CommonFunctions.ps1 and Cars.csv)

I think this modified layout looks better on desktop apps.

In this example9 app, I'm showcasing form filling and populating a DataGrid by applying the form. Take a good look on all the events I'm using for the form and the DataGrid. Some remarks for this example:

1. The form has no input validations. That's a VERY bad practice. On my next post I will show how input validation is done. This post is all about forms, so I didn't want to complicate things.

2. The cars.csv file contains about 700 types of cars. I'm using it for the sake of the example. You should implement Database usage in your app. Working with a Database is recommended for apps that need to store and retrieve data. I will post a separate blog about working with SQL Database.

3. The Make ComboBox gets its items from the csv file. Colors are just a [System.Windows.Media.Colors] type list.

4. The Model ComboBox items list will be filled up from cars.csv content after the Make ComboBox will be selected by the user. It's the $Car_Reg_Form_Combobox_Make.add_SelectionChanged event that is responsible for that.

5. On the Xaml file, take a look at the DataGridTemplateColumn I've put in the Cars DataGrid. It allows me to put the rating bar in the table.

6. Look at the form's structure in Xaml. Notice the blank lines and columns used as margins between the fields (and as a length extension for long input controls).

Play a bit with the app. Try to fill up some forms, and add them to the Cars table. Note that you can put any text you want, and it allows you to add empty fields. Also, try to add two cars with the same license plate (or two with blank ones). What will happen? (clue: take a look at the PS console) try to understand why.

If you want to challenge yourself, built a 'delete car' feature by adding an event to the Cars (+) popup. Also try to build a 'edit car' feature.