Generating forms at runtime from a layout file, one shared Avalonia UI for desktop, browser, iOS and Android

[jeff377]

I maintain Polhem, an open-source (MIT) .NET framework for line-of-business apps, and its front end is built on Avalonia. I wanted to share one part of it: the form screens aren't written in XAML. They are generated at runtime from a layout file, and the same generation code runs on all four Avalonia heads.

A layout file only says which fields there are and how they are arranged:

<FormLayout LayoutId="Customer" ProgId="Customer" ColumnCount="2">
  <Sections>
    <LayoutSection Name="Main" Caption="Customer">
      <Fields>
        <LayoutField FieldName="sys_id" Caption="Customer Code" />
        <LayoutField FieldName="sys_name" Caption="Company Name" />
        <LayoutField FieldName="contact_name" Caption="Contact Name" />
        <LayoutField FieldName="country" Caption="Country" ControlType="DropDownEdit" />
      </Fields>
    </LayoutSection>
  </Sections>
</FormLayout>

At runtime a single control reads it and builds the screen: the master sections in a grid of ColumnCount columns, one editor per field picked by its ControlType (text, numeric, date, drop-down, a button that opens a lookup), then the detail grids. Because it needs only the layout, the definition editor uses the same control for its live preview.

Changing ColumnCount from 2 to 3, or adding a field, changes every front end at once. Nothing is compiled per screen, and the client fetches the layout from the server, so it picks up the change after signing in again.

The Desktop, Browser (WASM), iOS and Android heads are thin startup projects around one shared UI project, so they all run the same generation code. The only layout-level difference is width: below a threshold the form folds into one column and detail rows are edited in a single-record panel instead of in the grid. That depends on the width, not the OS, so a narrow desktop window behaves the same as a phone.

A 10-minute video shows the whole flow, including changing the layout and the same project running on web, iOS and Android: https://youtu.be/5WjUTwoPyGw
Source: https://github.com/polhem-dev/polhem

Has anyone else generated Avalonia views from metadata at runtime? I'm curious how others handle things like validation feedback when the views aren't known at compile time.