UI

PlacingContainers–FlexBox

PlacingContainer is an addition to the declarative viewmodel approach of MDriven.

PlacingContainers are implemented in HTML with Flexbox’es – and in WPF we have created a Flexpanel that mimics the behaviour of a html-flexbox in Xaml/WPF.

image

PlacingContainers shows up as new levels in the Information Expression Tree – and when selected exposes a number of new properties.

Once you start using a PlacingContainer in the root-level of your UI all columns must belong a to PlacingContainer parent in order to render correctly.

In a system some views can use the standard grid placement – and some can use PlacingContainers – no need to change everything – just a possibility to build more flexible UI’s without leaving the model.

PlacingContainers are more like a flow of things and not as rigid as the traditional grid-placement with set X and Y coordinates. And as such they solve the problems associated with different screen sizes and device form factors. PlacingContainers are used by you-the-developer to describe how you want your UI to behave as available screen area changes.

If a ViewModelColumn is placed in a PlacingContainer more properties will show for this column:

image

A video showing the main workings of placingContainers is found here:

The hardest property to explain is Align-Content and this has it own short video here:

+1

Leave a Reply

Your email address will not be published. Required fields are marked *