title: Create WPF UI from JSON schema
body: <p>Is there a way to create a WPF UI using a JSON Schema? I am aware that it is possible to convert it into a HTML form with the help of AngularJS and others. But looking for a way to create WPF out of the same has not been fruitful. </p>
  
  <p>There exists a <a href="https://github.com/RSuter/VisualJsonEditor" rel="nofollow noreferrer">Source by Rico Suter</a>
  on how to create a Visual Json Editor. My requirement is slightly different from what is given here. In my case, I want to create WPF controls based on the schema and the properties mentioned within the schema. And, with the help of the UI, I want to be able to create as many JSON objects by entering the values into the UI controls.</p>
  
  <p>For example, let's consider the below JSON schema as a sample.</p>
  
  <pre><code>{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "definitions": {},
    "id": "http://example.com/example.json",
    "properties": {
      "checked": {
        "default": false,
        "description": "An explanation about the purpose of this instance.",
        "id": "/properties/checked",
        "title": "The Checked Schema",
        "type": "boolean"
      },
      "dimensions": {
        "id": "/properties/dimensions",
        "properties": {
          "height": {
            "default": 10,
            "description": "An explanation about the purpose of this instance.",
            "id": "/properties/dimensions/properties/height",
            "title": "The Height Schema",
            "type": "integer"
          },
          "width": {
            "default": 5,
            "description": "An explanation about the purpose of this instance.",
            "id": "/properties/dimensions/properties/width",
            "title": "The Width Schema",
            "type": "integer"
          }
        },
        "type": "object"
      },
      "id": {
        "default": 1,
        "description": "An explanation about the purpose of this instance.",
        "id": "/properties/id",
        "title": "The Id Schema",
        "type": "integer"
      },
      "name": {
        "default": "A green door",
        "description": "An explanation about the purpose of this instance.",
        "id": "/properties/name",
        "title": "The Name Schema",
        "type": "string"
      },
      "price": {
        "default": 12.5,
        "description": "An explanation about the purpose of this instance.",
        "id": "/properties/price",
        "title": "The Price Schema",
        "type": "number"
      },
      "tags": {
        "id": "/properties/tags",
        "items": {
          "default": "home",
          "description": "An explanation about the purpose of this instance.",
          "id": "/properties/tags/items",
          "title": "The Empty Schema",
          "type": "string"
        },
        "type": "array"
      }
    },
    "type": "object"
  }
  </code></pre>
  
  <p>I want to be able to display a checkbox for the <code>checked</code> property. Similarly, a <code>GroupBox</code> or something with 2 <code>TextBox</code> controls within to enter the dimensions(height and width). This UI should enable the user to enter desired values based on which a JSON object can be generated. Something like,</p>
  
  <pre><code>{
    "checked": false,
    "dimensions": {
      "width": 5,
      "height": 10
    },
    "id": 1,
    "name": "A green door",
    "price": 12.5,
    "tags": [
      "home",
      "green"
    ]
  }
  </code></pre>
  
  <p>Currently, I am creating a list of <code>JSchema</code> objects and and deserializing every property into type <code>JSchema</code> and then adding it to the list. And thereafter, I am trying to create controls for the same. This is just messy and I have not completely reached my goal. Yet I do not feel that I will be satisfied with the end result. If you could suggest a way to achieve the same it would be of great help. Thanks.</p>
  
  <p>Samples taken from </p>
  
  <p><a href="https://jsonschema.net/#/editor" rel="nofollow noreferrer">here.</a></p>