Implementing Modern Business Application Layout with XamTileManager

WPF and Silverlight give developers the technology to easily create highly interactive UI. Our NetAdvantage for WPF Data Visualization (trial) and NetAdvantage for Silverlight Data Visualization (trial) products make use of that, and include a number of controls which allow you to visualize your data in an interactive way, such as a chart, geographic map, treemap, and so on (samples).

Another area where applications can clearly benefit from the increased interaction capabilities introduced by WPF is layout. This blog describes often used layout controls with their advantages and limitations, and presents the XamTilesManager, which is available for both WPF and Silverlight which can enable you to deliver a highly customizable and easy to use layout.

Grids, Splitters, Tabs – easy to implement, however inflexible

Layout in many Windows Forms and WPF applications is organized using a grid or tab metaphor – different groups of controls, or different views are placed within the same view, or on different pages in a tab strip. Even though this layout paradigm is probably the easiest to implement, it makes the UI inflexible, because the user has no control over the layout and ordering of the different views. As an application evolves, new screens get added to the existing layout paradigm, resulting in more difficult navigation and continual switching from one view to another. This in turn frustrates the user and causes dissatisfaction and low productivity, indicating that something needs to change.

Docking – highly customizable layout, however overly complex

When  flexible layout is needed, developers implement that with a docking manager, which is also a part of our WPF and Silverlight products. The docking manager enables users to customize the layout of different views on single or multiple monitors, and create floating and nested panes. One example of this layout paradigm is the Visual Studio coding and debugging docking layouts, which arrange views  differently depending on the context of use of the application. The reason docking is quite appropriate for Visual Studio is that we as developers are primarily working with the code window, and are making occasional use of the other windows around it. We don’t need to change the layout much, because we’re focused on one of the views most of the time.

Docking is useful when the layout arrangement is relatively stable, because even as docking enables highly complex docking layouts, it does not enable the user to easily switch between different configurations. Furthermore, creating a good docking layout often takes time to produce, and is difficult to change, due to the overwhelming variety of ways panes can be rearranged. This makes docking a less-than-perfect candidate for the layout of an application where the user needs to often switch from one view to another.

Tiles – simpler layouts than docking, facilitates easy switching between them

In order to easily navigate an application with more than a few screens/views, and to easily focus on a view without needing to rearrange everything, users need layout to meet the following goals:

• Layout should be easily rearranged to focus on different views at different times
• While focusing on one or two views, layout should ensure all other views are out of focus, but still readily accessible
• Layout should allow a view to present a concise version of itself when not in focus with only the relevant information presented (new leads, customer requests pending), without presenting the full view itself

The XamTileManager (available in both Silverlight and WPF products) enables the above interactions because of the following characteristics:

• Supports different states of tiles – minimized, maximized, normal, minimized-expanded. This enables different content to be shown depending on whether the tile is currently the focus of the user’s attention (the tile is maximized), or is currently occupying a small part of the screen and should only show essential information about its status.
• Contains a limited amount of interactions such as switching, resizing and changing the state of a tile (minimized, maximized, minimized-expanded). Does not support nesting and pinning of tiles, greatly reducing the possible number of configurations, making it easy for the user to rearrange a layout
• Once a tile or tiles are maximized, all other tiles are automatically minimized

Summary

In this blogpost, different ways to organize layout were presented, along with their advantages and disadvantages. We demonstrated the limitations of simple layout, and the overly complex nature of docking, and the suitability of tiled layouts for applications that make the best use of available space. In a following post, we will demonstrate specifically how to setup the XamTileManager to fit one such scenario. For the time being, you can view the online samples (identical in Silverlight and WPF), or open the Equity Trading showcase, which is a part of the NetAdvantage for WPF Line of Business (trial) samples applications (source code included). It demonstrates how the tiling concept can be used to achieve a layout that’s flexible and easy to change, so you can decide whether and how this concept can enhance the layout experience in the applications you’re building.

If you have any questions or comments, you can reach me at kmatev@infragistics.com