first_page

My First XAML Data-Driven UI Recipe

Before XAML in particular and .NET in general, my typical data-driven UI “recipe” was to build on a Tab Control—usually just a bunch of forms in Tabs. The Tab aesthetic is directly connected to the “classic” desktop metaphor—directly coming from Xerox PARC. Next to the desktop there are filing cabinets—and in a drawer of the file cabinets are folders—folders with Tabs.

With the release of Windows 8, Microsoft reinforces what Apple has already started: a move away from the 1920s “modern” office space to the ancient world of the laminar tablet. In the same way the human eye jumps from one space on the surface of stone bas relief to another, our eye can see the flat panel display change in response to our touch. This flat panel aesthetic expressed in XAML leads me to these controls:

  • The DockPanel will allow the ‘root’ panel display to be subdivided into smaller panels and provide dynamic flow resizing (via LastChildFill="True").
  • The Frame will usually be the “last child” of the DockPanel and provide the means to let the eye “jump” from one interactive display to another.
  • The ItemsControl with a WrapPanel template loaded in the Frame takes advantage of the flow resizing literally making the layout of items flexible.XAML

This four-control approach is not meant to be a Microsoft-only solution. This approach actually comes from Web design (with display: inline-block) and should be replicated in, say, Adobe Flex. The Web influence on this approach can also be seen through the use of the Frame element because it leads to the Page Navigation controls clearly mimicking the loading of HTML pages.

rasx()