XAF More Good-Looking UI Samples

Good goal is to design a UI with less UI-ink. We try to determine our UI-ink ratio via:

(Thanks Jean Paul  for the formula)

Navigation modified where > and V symbols have been removed and master navigation items no longer show the folder icon. Via model applied.

The grid no longer shows inner lines (css fix)

Before grid line removing…

After grid line removing…

Groupbox titles and tab-labels modified via css and also grid no longer shows inner lines. We try to reduce ink when painting screens to make screens look less cluttered.
#1 Grid without lines
#2 Font based on input our designer + letter spacing boosted making this stand out a bit more.
#3 Same as #2 for tabs
#4 Data entry box pushed a little more to the background to make it less present.
Some modified editor widgets….

Vertical timeline to visualize state transition’s and current state…

Custom Login

Custom Navigation

Kanban Board and Top Header Search with Notifications

Custom Grid Cell Template

Custom Property Editors in DetailView

Custom Property Editors in DetailView Version 2

Custom ListEditor

Custom ListEditor Expanded

Custom Popup

Custom Widgets (iOT App)

Custom Scheduler

Custom Listview with Left Panel for filtering

Custom Login 2

Custom DetailView Version 3

Custom Navigation and ListView with Custom Filters and a Custom Top Action

Custom Navigation and Order Processing with Shipment Tracking State

Customize Action

Customize Action 2

Custom Icons

Another Custom Property Editor


XAF WinForms Custom Editor

XAF WinForms Progress Bar

XAF Blazor Progress Bar

Posted in XAF

Leave a Reply

Your email address will not be published.