MVVM dynamic view with different controls

14 Views Asked by At

I am very new to MVVM development and I am create a small project for some home gardening project using ESP32. My intention is to design an GUI will minimalist rework and changes just by updating a json file.

My Json format:

{
    "sensorsconfig" : [
        {
            "sensorname": "WaterLevel",
            "config": [
                {
                    "name": "Sensor Type",
                    "options": "UltraSound | Float | Digital"
                },
                {
                    "name": "IP Address",
                    "options": "any"
                }
            ]
        },
        {
            "sensorname": "Temparature",
            "config": [
                {
                    "name": "Sensor Type",
                    "options": "RTD"
                },
                {
                    "name": "IP Address",
                    "options": "any"
                }
            ]
        },
        {
            "sensorname": "Moisture",
            "config": [
                {
                    "name": "Sensor Type",
                    "options": "Analog"
                },
                {
                    "name": "Voltage Range",
                    "options": "3.3V | 5V | 9V"
                },
                {
                    "name": "IP Address",
                    "options": "any"
                }
            ]
        }
    ]
}

My idea is to create an MVVM project which contains two Rows. On the first row, there will be a ComboBox which contains the list of "sensorname". And when I choose a Sensor, second row should display the appropriate sensor configuration. In future when I add/remove sensorconfig, my GUI should be able to update after I restart the GUI.

I need help in designing a dynamic view and/or viewmodel which creates controls based upon the "options" available in the "config". For instance:

  1. Options with '|' should have Combobox
  2. Options with 'any' should have TextBox
  3. default should have TextBlock

And the corresponding view/viewmodel is rendered when I choose the sensors from the combobox in first row.

Please suggest any working examples or easiest way. You help is highly appreciated.

0

There are 0 best solutions below