Once you have configured the ValueItemCollection object to perform text-to-picture translations for a column, you can cause both the Value string and the DisplayValue bitmap to appear within the same cell by selecting the AnnotatePicture property under the ValueItems node in the C1List Designer. Or, in code:

To write code in Visual Basic

Me.C1List1.Columns("Country").ValueItems.AnnotatePicture = True

To write code in C#

this.c1List1.Columns["Country"].ValueItems.AnnotatePicture = true;

The horizontal placement of the bitmap with respect to the cell text is determined by the HorizontalAlignment and ForegroundPicturePosition properties of the column's Style object. The enumeration objects for these two properties are the AlignHorzEnum and ForegroundPicturePositionEnum objects respectively. In the following example, HorizontalAlignment is set to General. Since the Country column represents a string field, the cell text is left-aligned. However, since the ForegroundPicturePosition property is set to the default value of Near, the bitmap is placed at the left edge of the cell, and the cell text is left-aligned in the remaining space.

However, if you change the ForegroundPicturePosition property to Far, then the cell text is left-aligned as usual, but the bitmap is right-aligned.

To place the cell text below the bitmap while centering both items, set the HorizontalAlignment property to Center and the ForegroundPicturePosition property to TopOfText.

When editing, the editor uses all space available in the text portion of the cell. When the Presentation property of the ValueItemCollection object is set to one of the combo box options, the bitmap will not change until editing is completed.

Note that in the preceding examples, the text is displayed as it is stored in the database without formatting. But what if you want to display both a picture and formatted text? Since the ValueItem object can only accommodate one translation, you cannot accomplish this with ValueItems alone. However, you can use the FormatText event to translate the text, and then use the ValueItemCollection object to associate the translated text (not the underlying data value) with a picture:

To write code in Visual Basic

Me.C1List1.Columns("Country").NumberFormat = "FormatText Event"

To write code in C#

this.c1List1.Columns["Country"].NumberFormat = "FormatText Event";

In this example, the NumberFormat property is set to a special value that causes the FormatText event to fire:

To write code in Visual Basic

Private Sub C1List1_FormatText(ByVal sender As Object, ByVal e As C1.Win.C1List.FormatTextEventArgs) Handles C1List1.FormatText
    
    Select Case e.Value 
        Case "CAN"
            e.Value = "Canada"
        Case "UK"
            e.Value = "United Kingdom"
        Case "USA"
            e.Value = "United States"
        Case "JPN"
            e.Value = "Japan"
        Case "AUS"
            e.Value = "Australia"
    End Select
  
End Sub

To write code in C#

private void C1List1_FormatText(object sender, C1.Win.C1List.FormatTextEventArgs e)
      
{    
    switch (e.Value)    
    {
        case "CAN":
            e.Value = "Canada";
            break;
        case "UK":
            e.Value = "United Kingdom";
            break;
        case "USA":
            e.Value = "United States";
            break;
        case "JPN":
            e.Value = "Japan";
            break;
        case "AUS":
            e.Value = "Australia";
            break;
    }
    
}

Since the FormatText event now translates the country codes stored in the database into actual names for display, the Value property of each ValueItem in the ValueItemCollection object must be changed accordingly.

Assuming that the HorizontalAlignment and ForegroundPicturePosition properties are set as in the previous example, the end result is that the underlying data is displayed as both descriptive text and a picture.