UI Design Guidance Overview

The goal of this topic is to provide some high-level guidance to the XAML developer when working on a team that is building an application with the Composite Application Library and Windows Presentation Foundation (WPF) or Silverlight. This topic describes user interface layout, visual representation, data binding, resources, and presentation model. After reading this topic, you should have a high-level understanding of how to approach designing the user interface (UI) of an application based on the Composite Application Library and some of the techniques that can help you create a maintainable UI in composite applications.

User Interface Layout

The layout of composite applications created with the Composite Application Library builds on the standard principals of WPF and Silverlight—the layout uses the concepts of panels that contain related items. One of the differences with composite applications is that the content inside the various panels is dynamic and is not known during design time. This turns the design experience upside-down by forcing designers to create page structures that can contain layout content and then design each of the elements that fit into the layout separately. As a designer, this forces you to think about two main layout concepts in the Composite Application Library: container composition and regions.

Container Composition

The term "container composition" is really just an extension to the containment model that WPF and Silverlight inherently provide. The term "container" can mean any element, including a window, page, user control, control template, or data template, that can contain other elements.

How you visualize your UI can vary from implementation to implementation, but you will find recurring themes that stand out. You will be creating either a window, page, or user controls that will contain both fixed content and dynamic content. The fixed content will consist of the overall structure of the containing UI element, and the dynamic content will be what is placed inside a region (for more information about regions, see the next section of this topic). For example, the Stock Trader Reference Implementation (Stock Trader RI) application has a startup window (named Shell.xaml) that contains the overall structure for the application. The window in Microsoft Expression Blend, as shown in Figure 1, shows a fixed portion of the window. The remaining sections of the window are dynamically inserted into the various regions by the modules as the application loads.

The design-time experience is a little limited in this type of application, but the fact that you know content will be placed in the various regions during run time is something that you need to design around. To see an example of this, compare the designer view of the main page in Figure 1 to the run-time view in Figure 2. In the designer view, the page is mostly empty. Contrast that with the run-time view, where there is a position area that contains a tab control with position data, and a trend line, pie chart, and news area pertaining to the selected stocks. The differences between the designer view and run-time view demonstrate the challenges designers face when they create applications built with the Composite Application Library. The items cannot be seen during design time, so determining how big they are and how they fit into the overall appearance of the application is a little difficult. Consider the following as you create the layout for your containers:

• Are there any size constraints that will limit how large content can be? If there are, consider using containers that support scrolling.
• Consider using an expander and ScrollViewer combination in situations where a lot of dynamic content needs to fit into a confined area.
• Pay close attention to how content enlarges as the screen content grows to ensure the appearance of your application is appealing in any resolution.

Figure 1

Stock Trader RI main window in Expression Blend

Figure 2

Stock Trader RI main window during run time

Region

The term "region" represents a container that can hold dynamic data that is manifested into a UI representation. A region allows the Composite Application Library to place dynamic content contained in modules in predefined placeholders in a UI container. The power of regions comes in their ability to hold any type of UI content. A module can contain UI content manifested as a user control, a data type that is associated with a data template, a custom control, or any combination of these. Essentially, this gives a designer the ability to define the appearance for the UI areas and then to have modules place content in these predetermined areas. Figure 3 illustrates that the Stock Trader RI main window contains four regions: MainToolbarRegion, MainRegion, ActionRegion, and ResearchRegion. These regions are populated by the various modules in the application—the content can be changed at any time.

Figure 3

Stock Trader RI regions

To create a region, you need to add the RegionManager.RegionName property in XAML to a ContentControl-based UI element or an ItemsControl-based UI element that has built-in support in the Composite Application Library. The value of the name can be anything and will be used by the module developer to determine where content will be placed. The XAML in Figure 4 shows how the four regions are assigned in the Stock Trader RI. If these two types of containers do not provide what you need, the Composite Application Library provides the ability to create region adaptors that can be created to work with any type of UI element. For more information, see How to: Create a Custom Region Adapter.

Figure 4

Stock Trader RI regions in XAML

To demonstrate how modules and their content are associated with regions, see Figure 5, which shows the association of WatchListModule and the NewsModule with their corresponding regions on the main window. The ResearchRegion contains the WatchListView.xaml user control, which is contained in the WatchListModule. The ResearchRegion also contains the ArticleView.xaml user control, which is contained in the NewsModule. In applications created with the Composite Application Library, mappings like this will be a part of the design process because designers and developers use them to determine what content is proposed to be in a particular region. This allows designers to determine the overall space needed and any additional items that need to be added to ensure the content will be viewable in the allowable space.

Figure 5

User control to region mapping

Visual Representation

The visual representation of your application can take many forms, including user controls, custom controls, and data templates, to name a few. In the case of the Stock Trader RI, user controls are predominately used to represent distinct sections on the main window, but this is not a standard. In your application, you should use an approach that you are most familiar with and that fits into how you work as a designer. Regardless of the predominating visual representation in your application, you will inevitably use a combination of user controls, custom controls, and data templates in your overall design. Figure 6 shows where the Stock Trader RI used these various items. This illustration also serves as a reference for the following sections, which describe each of the items.

Figure 6

Stock Trader RI usage of user controls, custom controls, and data templates

User Controls

The rich support in Expression Blend for creating user controls makes them an easy choice for creating UI content in the Composite Application Library. As mentioned earlier in this topic, the Stock Trader RI uses them extensively to create content that will be inserted into regions. The WatchList.xaml user control is a good example of a simple UI representation that is contained inside the WatchListModule. This control is a very simple control that is straightforward to create using this model.

Custom Controls

In some situations, a user control is too limiting. In these cases, custom layout or extensibility is more important than ease of creation. This is where custom controls are useful. In the Stock Trader RI, the pie chart control is a good example of this. This control is composed from data derived from the positions and shows a chart of your overall portfolio. This type of control is a little more challenging than a user control to create, and it has limited support in Expression Blend.

Data Templates

Data templates are an important part of most types of data-driven applications. The use of data templates for list-based controls is prevalent throughout the Stock Trader RI. In many cases, complete visual representations can be created using a data template alone, without the need to create any type of control. The News Article region uses a data template to show articles and, in conjunction with an Items style, provides an indication of which item was selected.

Data Binding

Data binding provides a simple and consistent way for applications to present and interact with data.

The design experience for data binding will mirror that of most dynamic data—driven applications where the data context is not assigned until run time. Of course, this limits some of the designer-specific data binding features of Expression Blend, but it is a reality in most applications of this type.

Resources

Resources such as styles, resource dictionaries, and control templates can be scattered throughout an application—even more so with a composite application. When considering where to place resources, special attention needs to be given to dependencies between UI elements and the resources they need. The Stock Trader RI solution is shown in Figure 7, with labels that indicate the various areas where resources can live.

Figure 7

Resource distribution across a solution

Application Resources

Typically, application resources are resources that are available to an application as a whole. These types of resources tend to be focused on the root application, but they can also provide default styling on a type basis for modules or controls. An example of this is a text box style that is applied to the text box type in the root application. This style will be available to all text boxes in the application unless the style is overridden at the module or control level.

Module Resources

Module resources play the same role as root application resources in that they can apply to all items in a module. Using resources at this level can provide a consistent appearance across the entire module and also allow for reuse in more specific instances that span one or more visual components. The use of resources at the module level should be contained to each individual module. Creating dependencies between modules can potentially lead to issues that are difficult to locate when UI elements appear incorrectly.

Control Resources

Control resources are usually contained in control libraries and can be used by all the controls in the control library. In terms of scope, these resources tend to have the finest of scope because control libraries typically contain very specific controls and do not contain user controls, which in an application created with the Composite Application Library, usually go in the modules where they are used.

Presentation Model

The Presentation Model is a specialization of the Separated Presentation pattern. Separated Presentation patterns help you to cleanly separate out the visual portions of your application from the business and presentation logic portions.

A key benefit of using a separated presentation pattern, like the presentation model, is that it allows application developers to focus on application logic while user interface designers can focus on the visual aspects of the application. This allows the overall appearance of the application to be defined separately from the underlying application logic; this makes it easier to maintain, modify, or to customize.

Almost all of these patterns separate the user interface and application logic into three distinct components: a component that encapsulates the user interface, a component that encapsulates presentation logic, and a component that encapsulates the application's business and data management logic.

In the Presentation Model pattern, the presentation model provides an interface over the model and coordinates all of the view's interaction with it. The presentation model is designed to be easily consumed by a view; this allows the view to use data binding, commands, and other behaviors to interact with it. The presentation model also frequently adapts the underlying model data into a form that is easier to represent in the user interface.

More Information

For more specific information about working with XAML to design the UI and user controls, see XAML Guidelines for Creating a Composite UI.

Home page on MSDN | Community site