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:
The control contains a single item.
The control contains a header and a single item.
The control contains collection of item.
The control contains a header and collection of item.
The other two enhanced content models are:
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.
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.
The following figure shows three GlassLabel controls created in the previous example.
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.
Examples of HeaderedContentControl
The following examples show several heading concept in ClientUI controls.
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 ItemsSource property of the ItemsControl enables you to use any type that implements IEnumerable as the content of the ItemsControl. ItemsSource 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.
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.
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 ItemContainerStyle, ItemContainerStyleSelector, ItemTemplate and ItemTemplateSelector.
To learn more about styling and templating, see Styles and Templates Overview.
Examples of HeaderedItemsControl
The following examples shows several heading and items concept in ClientUI controls line up.
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.
ImageContent is a conceptual content model for common controls that often use Image and Content representation at the same time such as Button, Label, 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.
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.
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:
Configuring ImageContent properties
All controls that support ImageContent presentation model expose several common properties such as DisplayMode, TextImageRelation, ImageWidth, ImageHeight 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.