Skip to end of metadata
Go to start of metadata

This topic discusses the content model used by ClientUI controls. The content model specifies the types of objects that a control can contain.

Intersoft ClientUI provides four content model types which are equivalent with the four content model that WPF introduces, plus several enhanced content model such as ContentItems and ImageContent model.

The four basic content models are:

  • ContentControl
    The control contains a single item. 
  • HeaderedContentControl
    The control contains a header and a single item. 
  • ItemsControl
    The control contains collection of item. 
  • HeaderedItemsControl
    The control contains a header and collection of item. 

The other two enhanced content models are:

  • ContentItems
    Comprehensive control that contains collection of item, such as UXDropDownButtonUXSplitButtonUXStackButton etc. 
  • ImageContent
    ContentControl that contains image element along with the content element.

ContentControl

The simplest content model of the four is the ContentControl, which has a Content property. The Content property is of type Object, so there are no restrictions on what you can put in a ContentControl. You can use either Extensible Application Markup Language (XAML) or code to set the Content.

The base class for content control model in ClientUI line up is ISContentControl. The following are some examples of controls that use the ISContentControl content model:

Button Controls

UI Controls

Window Controls

Assigning content to Content Control

The following example demonstrates how to create three GlassLabel controls with Content set to one of the following:

  • A string 
  • A UIElement 
  • A Panel that contains other UIElement objects. 

 

XAML

 

The following figure shows three GlassLabel controls created in the previous example.

HeaderedContentControl

The HeaderedContentControl inherits the Content property from ContentControl and defines the Header property that is of type Object. Header provides a heading for the control. Like the Content property of a ContentControl, the Header can be any type.

The base class for headered content control model in ClientUI controls is ISHeaderedContentControl. The following are some examples of controls that use the ISHeaderedContentControl content model:

Examples of HeaderedContentControl

The following examples show several heading concept in ClientUI controls.

Group Box

 

 

Field Label

 

 

UXCallOut

 

ItemsControl

Controls that inherit from ItemsControl contain a collection of objects. You can use either the ItemsSource property or the Items property to populate an ItemsControl.

The base class for items control model in ClientUI is ISItemsControl. The following are some examples of controls that use the ISItemsControl content model:

ItemsSource property

The ItemsSource property of the ItemsControl enables you to use any type that implements IEnumerable as the content of the ItemsControlItemsSource is typically used to display a data collection or to bind an ItemsControl to a collection object.

To learn more how to bind data to ItemsSource property, see Walkthrough: Display data in UXListBox using MVVM Pattern.

Items property

If you do not want to use an object that implements IEnumerable to populate the ItemsControl, you can add items by using the Items property.

XAML

 

Styling and Templating

Each ItemsControl has a specific item type that represent the items of the ItemsControl. You can change the style / template of these items using ItemContainerStyleItemContainerStyleSelectorItemTemplate and ItemTemplateSelector.

To learn more about styling and templating, see Styles and Templates Overview.

HeaderedItemsControl

The HeaderedItemsControl inherits from the ItemsControl class. The HeaderedItemsControl defines the Header property, which follows the same rules as the Header property of a HeaderedContentControl.

The base class for headered items control model in ClientUI is ISHeaderedItemsControl. The following are some examples of controls that use the ISHeaderedItemsControl contentmodel:

Examples of HeaderedItemsControl

The following examples shows several heading and items concept in ClientUI controls line up.

UXContextMenu

 

 

UXAccordion

 

ContentItems

ContentItems is an enhanced content model concept for a comprehensive content controls that has collection of items. One of the examples that use ContentItems is UXDropDownButton, which is inherited from UXButtonItems class.

UXButtonItems is the base class of all ClientUI controls that have button characteristics and a collection of items. The following are some examples of controls that use the ContentItems model:

Examples of ContentItems

The following examples shows several content and items concept in ClientUI controls.

UXStackButton

 

 

UXDropDownButton

 

ImageContent

ImageContent is a conceptual content model for common controls that often use Image and Content representation at the same time such as ButtonLabel, etc.

Silverlight / WPF controls allows only a single arbitrary content in all its built-in presentation model, which introduces difficulty to create a content model that has both image and content at the same time.

Consider the following scenario where you want to create a button with an image and a text as its content.

To achieve this, you would normally need to specify the content of the Button with a complex structure similar to the following code.

XAML

 

Although not absolutely wrong, it might be less than ideal when it comes to design pattern and code efficiency.

Compared to the approach above, you can use the UXButton control that implements ImageContent content model to achieve the same results using straightforward and simplified code such as shown in the following example.

XAML

Understanding ImageContent Control Structure

There is no base class for controls that implements ImageContent presentation model. In fact, all controls that uses ImageContent model are derived from various base content model classes discussed above. This allows for flexible ImageContent design pattern to be applied to any controls without limited to a specific base class.

The following are some examples of controls that implement ImageContent presentation model:

Button Controls

UI Controls

Configuring ImageContent properties

All controls that support ImageContent presentation model expose several common properties such as DisplayModeTextImageRelationImageWidthImageHeight and ImageStretch. You can easily customize the look and feel of your Image and Content presentation by using these properties.

For certain controls which are used as ItemContainer for ItemsControl such as UXListBoxItem, you can also configure the ImageContent properties from its parent which in this case is the UXListBox control.

To learn more how to configure these properties from parent level, see How-to: Configure UXListBoxItems ImageContent Properties from UXListBox.