In this tutorial, you will learn how to use Style objects to display arbitrary bitmaps within list cells. In addition to font, color, and alignment settings, Style objects support both background and foreground pictures. Background pictures can be centered, tiled, or stretched to fill the entire cell. Foreground pictures can be positioned relative to the cell text, and can also be displayed using a transparent color.

1. Create a new .NET project.
2. Place a C1List control (C1List1), a command button (Button1), and a TextBox control (TextBox1) on the form (Form1).
3. Set the DataMode property of C1List1 to AddItem.
4. In the Form_Load event, add the following code to find the Flag directory that came with this tutorial:

   To write code in Visual Basic

   Visual Basic	Copy Code
   ' Get the image directory. Dim dir As String dir = Environment.CurrentDirectory dir = dir.Substring(0, dir.LastIndexOf("\")) dir = dir & "\Flags" Me.TextBox1.Text = dir

   To write code in C#

   C#	Copy Code
   // Get the image directory. string dir; dir = Environment.CurrentDirectory; dir = dir.Substring(0, dir.LastIndexOf("\")); dir = dir + "\Flags"; this.TextBox1.Text = dir;

5. To handle the Button1_Click event, add the following code:

   To write code in Visual Basic

   Visual Basic

   Copy Code

   ' Add the title. Me.C1List1.AddItemTitles("File Name; Picture") ' Extend the second column width. Me.C1List1.ExtendRightColumn = True ' Enlarge the row height. Me.C1List1.ItemHeight = 50 ' Add the items for the list. Dim dir, str, fileName As String dir = Me.TextBox1.Text.Trim() Dim strCol As String() strCol = System.IO.Directory.GetFiles(dir, "*.bmp") For Each str In strCol fileName = str.Substring(str.LastIndexOf("\") + 1) Me.C1List1.AddItem(fileName & ";") Next str ' Fire the FecthCellStyle event. Me.C1List1.Splits(0).DisplayColumns(1).FetchStyle = True

   To write code in C#

   C#

   Copy Code

   // Add the title. this.c1List1.AddItemTitles("File Name; Picture"); // Extend the second column width. this.c1List1.ExtendRightColumn = true; // Enlarge the row height. this.c1List1.ItemHeight = 50; // Add the items for the list. string dir, str, fileName; dir = this.TextBox1.Text.Trim(); string[] strCol; strCol = System.IO.Directory.GetFiles(dir, "*.bmp"); foreach ( str in strCol) { fileName = str.Substring(str.LastIndexOf("\") + 1); this.c1List1.AddItem(fileName + ";"); } // Fire the FecthCellStyle event. this.c1List1.Splits[0].DisplayColumns[1].FetchStyle = true;

6. In the FetchCellStyle event, add the following code:

   To write code in Visual Basic

   Visual Basic

   Copy Code

   Private Sub C1List1_FetchCellStyle(ByVal sender As Object, ByVal e As C1.Win.C1List.FetchCellStyleEventArgs) Handles C1List1.FetchCellStyle If e.Col = 1 Then ' Get the image name. Dim file As String file = Me.C1List1.Splits(0).DisplayColumns(0).DataColumn.CellText(e.Row) file = Me.TextBox1.Text.Trim() & "\" & file e.CellStyle.ForeGroundPicturePosition = C1.Win.C1List.ForeGroundPicturePositionEnum.PictureOnly e.CellStyle.ForegroundImage = Image.FromFile(file) End If End Sub

   To write code in C#

   C#

   Copy Code

   private void C1List1_FetchCellStyle( object sender, C1.Win.C1List.FetchCellStyleEventArgs e) { if ( e.Col == 1 ) { // Get the image name. string file; file = this.c1List1.Splits[0].DisplayColumns[0].DataColumn.CellText(e.Row); file = this.TextBox1.Text.Trim() + "\" + file; e.CellStyle.ForeGroundPicturePosition = C1.Win.C1List.ForeGroundPicturePositionEnum.PictureOnly; e.CellStyle.ForegroundImage = Image.FromFile(file); } }

Run the program and observe the following:

• Press the Display button. The list will display pictures in the first column and their filenames in the second.
  
• You have created a fully functional bitmap browser with just a few lines of code.

For more information, see Applying Pictures to List Elements.

This concludes the tutorial.