Tutorial 16 Borders, Scroll Tracking and Scroll Tips

In this tutorial, you will learn how to use the ScrollTips property and the FetchScrollTips event to provide a tip box as the user scrolls through a list. You will also learn to create borders and colored borders for each item.

Create a new .NET project.
Double-click the C1List icon in Visual Studio's Toolbox to add it to the Form.Note: See Adding the C1List Components to a Project for information on adding a component to the Toolbox.
Add the following items to the form and situate them like they appear in the following figure:
- C1Combo boxes (C1Combo1 - 5)
- Two frames and set their text property to Border Size and Scrolling
- Four Labels (Label1 - 5) and set their Text properties to Top Width, Bottom Width, Left Width, Right Width, and Border Appearance respectively
- A Button (Button1) and set its Text property to Border Color
- Two Checkboxes and set their text properties to ScrollTips and ScrollTracking
Add a Color Dialog to the form (ColorDialog1).
Go to the DataSource property for C1List and select Add Project Data Source from the drop-down. In the adapter's Data Source Configuration Wizard, either select a connection to C1NWind.mdb or create a new connection to this database. On the Choose your database objects page of the wizard, select all fields in the Customer table and type "DsCustomer" into the DataSet name box, and then finish out the wizard.

Visual Studio 2005 adds the following code to the Form_Load event:

To write code in Visual Basic

Visual Basic	Copy Code
Me.CustomerTableAdapter.Fill(Me.DsCustomer.Customer)

To write code in C#

C#	Copy Code
this.CustomerTableAdapter.Fill(this.DsCustomer.Customer);

In the general section of Form1 add the following declarations:

To write code in Visual Basic

Visual Basic	Copy Code
Dim tb As DataTable Dim borderColor As Color Dim bLeft, bTop, bRight, bBottom As Integer Dim bType As C1.Win.C1List.BorderTypeEnum

To write code in C#

C#	Copy Code
DataTable tb; Color borderColor; int bLeft, bTop, bRight, bBottom; C1.Win.C1List.BorderTypeEnum bType;

In the Form_Load event, add the following code:

To write code in Visual Basic

Visual Basic	Copy Code
tb = Me.DsCustomer.Tables(0).Copy() Me.C1List1.ItemHeight = 40 ' Fill each combo. Me.CheckBox2.Checked = True FillCombo(C1Combo1) FillCombo(C1Combo2) FillCombo(C1Combo3) FillCombo(C1Combo4) FillCombo5() ' Initialize the border size. bBottom = 1 bTop = 1 bLeft = 1 bRight = 1 bType = C1.Win.C1List.BorderTypeEnum.None

To write code in C#

C#	Copy Code
tb = this.DsCustomer.Tables[0].Copy(); this.c1List1.ItemHeight = 40; // Fill each combo. this.checkBox2.Checked = true; FillCombo(C1Combo1); FillCombo(C1Combo2); FillCombo(C1Combo3); FillCombo(C1Combo4); FillCombo5(); // Initialize the border size. bBottom = 1; bTop = 1; bLeft = 1; bRight = 1; bType = C1.Win.C1List.BorderTypeEnum.None;

Now add the functions which will fill the C1Combo boxes:

To write code in Visual Basic

Visual Basic	Copy Code
' Fill each combo with numbers from 1 to 10. Private Sub FillCombo(ByRef combo As C1.Win.C1List.C1Combo) Dim i As Integer combo.DataMode = C1.Win.C1List.DataModeEnum.AddItem For i = 1 To 10 combo.AddItem(i.ToString()) Next combo.Text = 1 End Sub Private Sub FillCombo5() With Me.C1Combo5 .DataMode = C1.Win.C1List.DataModeEnum.AddItem .AddItem("Fillet") .AddItem("Flat") .AddItem("Groove") .AddItem("Inset") .AddItem("InsetBevel") .AddItem("None") .AddItem("Raised") .AddItem("RaisedBevel") .SelectedIndex = 5 End With End Sub

To write code in C#

C#	Copy Code
// Fill each combo with numbers from 1 to 10. private void FillCombo(C1.Win.C1List.C1Combo combo) { int i; combo.DataMode = C1.Win.C1List.DataModeEnum.AddItem; for ( i =1 ; i <= 10 ; i++) { combo.AddItem(i.ToString()); } combo.Text = 1; } private void FillCombo5() { this.C1Combo5..DataMode = C1.Win.C1List.DataModeEnum.AddItem; this.C1Combo5.AddItem("Fillet"); this.C1Combo5.AddItem("Flat"); this.C1Combo5.AddItem("Groove"); this.C1Combo5.AddItem("Inset"); this.C1Combo5.AddIte("InsetBevel"); this.C1Combo5.AddItem("None"); this.C1Combo5.AddItem("Raised"); this.C1Combo5.AddItem("RaisedBevel"); this.C1Combo5.SelectedIndex = 5; }

Create a handler for the Button1_Click event which sets the color of the border using the color dialog box:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim result As DialogResult result = Me.ColorDialog1.ShowDialog() If result = DialogResult.OK Then Me.borderColor = Me.ColorDialog1.Color Me.Button1.BackColor = Me.borderColor End If UpdateBorder() End Sub

To write code in C#

C#	Copy Code
private void Button1_Click( System.object sender, System.EventArgs e) { DialogResult result; result = this.ColorDialog1.ShowDialog(); if ( result == DialogResult.OK ) { this.borderColor = this.ColorDialog1.Color; this.Button1.BackColor = this.borderColor; } UpdateBorder(); }

Include the function which updates the borders:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub UpdateBorder() If Me.C1List1.Splits(0).DisplayColumns(Me.C1List1.Col) Is Nothing Then Exit Sub End If With Me.C1List1.Splits(0).DisplayColumns(Me.C1List1.Col).Style.Borders .Color = Me.borderColor .BorderType = Me.bType .Bottom = Me.bBottom .Left = Me.bLeft .Right = Me.bRight .Top = Me.bTop End With End Sub

To write code in C#

C#	Copy Code
private void UpdateBorder() { if ( this.c1List1.Splits[0].DisplayColumns[this.c1List1.Col] == null ) { return; } CellBorders borders = this.c1List1.Splits[0].DisplayColumns [this.c1List1.Col].Style.Borders; borders.Color = this.borderColor; borders.BorderType = this.bType; borders.Bottom = this.bBottom; borders.Left = this.bLeft; borders.Right = this.bRight; borders.Top = this.bTop; }

Enter code which handles changes in the C1Combo box values:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub C1Combo1_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo1.RowChange Me.bTop = Me.C1Combo1.SelectedIndex + 1 Me.UpdateBorder() End Sub Private Sub C1Combo2_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo2.RowChange Me.bBottom = Me.C1Combo2.SelectedIndex + 1 Me.UpdateBorder() End Sub Private Sub C1Combo3_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo3.RowChange Me.bLeft = Me.C1Combo3.SelectedIndex + 1 Me.UpdateBorder() End Sub Private Sub C1Combo4_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo4.RowChange Me.bRight = Me.C1Combo4.SelectedIndex + 1 Me.UpdateBorder() End Sub Private Sub C1Combo5_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo5.RowChange Select Case Me.C1Combo5.Text Case "Fillet" Me.bType = C1.Win.C1List.BorderTypeEnum.Fillet Case "Flat" Me.bType = C1.Win.C1List.BorderTypeEnum.Flat Case "Groove" Me.bType = C1.Win.C1List.BorderTypeEnum.Groove Case "Inset" Me.bType = C1.Win.C1List.BorderTypeEnum.Inset Case "InsetBevel" Me.bType = C1.Win.C1List.BorderTypeEnum.InsetBevel Case "None" Me.bType = C1.Win.C1List.BorderTypeEnum.None Case "Raised" Me.bType = C1.Win.C1List.BorderTypeEnum.Raised Case "RaisedBevel" Me.bType = C1.Win.C1List.BorderTypeEnum.RaisedBevel End Select Me.UpdateBorder() End Sub

Visual Basic

Copy Code

Private Sub C1Combo1_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo1.RowChange 
    Me.bTop = Me.C1Combo1.SelectedIndex + 1                                                           
    Me.UpdateBorder() 
End Sub
                                                       
Private Sub C1Combo2_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo2.RowChange
    Me.bBottom = Me.C1Combo2.SelectedIndex + 1                                                           
    Me.UpdateBorder()                                                            
End Sub
                                                    
Private Sub C1Combo3_RowChange(ByVal sender As Object, ByVal e As System.EventArgs)

Handles C1Combo3.RowChange
    Me.bLeft = Me.C1Combo3.SelectedIndex + 1                                                            
    Me.UpdateBorder()                                                            
End Sub
                                         
Private Sub C1Combo4_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo4.RowChange 
    Me.bRight = Me.C1Combo4.SelectedIndex + 1                                                           
    Me.UpdateBorder()                                                            
End Sub
                                                    
Private Sub C1Combo5_RowChange(ByVal sender As Object, ByVal e As System.EventArgs) Handles C1Combo5.RowChange
    Select Case Me.C1Combo5.Text
 Case "Fillet" 
     Me.bType = C1.Win.C1List.BorderTypeEnum.Fillet 
 Case "Flat"   
     Me.bType = C1.Win.C1List.BorderTypeEnum.Flat 
 Case "Groove" 
     Me.bType = C1.Win.C1List.BorderTypeEnum.Groove 
 Case "Inset" 
     Me.bType = C1.Win.C1List.BorderTypeEnum.Inset
 Case "InsetBevel"
     Me.bType = C1.Win.C1List.BorderTypeEnum.InsetBevel
 Case "None"   
     Me.bType = C1.Win.C1List.BorderTypeEnum.None  
 Case "Raised" 
     Me.bType = C1.Win.C1List.BorderTypeEnum.Raised 
 Case "RaisedBevel" 
     Me.bType = C1.Win.C1List.BorderTypeEnum.RaisedBevel
    End Select   
    Me.UpdateBorder() 
End Sub

To write code in C#

C#	Copy Code
private void C1Combo1_RowChange( object sender, System.EventArgs e) { this.bTop = this.C1Combo1.SelectedIndex + 1; this.UpdateBorder(); } private void C1Combo2_RowChange( object sender, System.EventArgs e) { this.bBottom = this.C1Combo2.SelectedIndex + 1; this.UpdateBorder(); } private void C1Combo3_RowChange( object sender, System.EventArgs e) { this.bLeft = this.C1Combo3.SelectedIndex + 1; this.UpdateBorder(); } private void C1Combo4_RowChange( object sender, System.EventArgs e) { this.bRight = this.C1Combo4.SelectedIndex + 1; this.UpdateBorder(); } private void C1Combo5_RowChange( object sender, System.EventArgs e) { switch (this.C1Combo5.Text) { case "Fillet": this.bType = C1.Win.C1List.BorderTypeEnum.Fillet; break; case "Flat": this.bType = C1.Win.C1List.BorderTypeEnum.Flat; break; case "Groove": this.bType = C1.Win.C1List.BorderTypeEnum.Groove; break; case "Inset": this.bType = C1.Win.C1List.BorderTypeEnum.Inset; break; case "InsetBevel": this.bType = C1.Win.C1List.BorderTypeEnum.InsetBevel; break; case "None": this.bType = C1.Win.C1List.BorderTypeEnum.None; break; case "Raised": this.bType = C1.Win.C1List.BorderTypeEnum.Raised; break; case "RaisedBevel": this.bType = C1.Win.C1List.BorderTypeEnum.RaisedBevel; break; } this.UpdateBorder(); }

Copy Code

private void C1Combo1_RowChange( object sender, System.EventArgs e)                                                               
{                                                              
    this.bTop = this.C1Combo1.SelectedIndex + 1;                                                               
    this.UpdateBorder();                                                               
}                                                            
                                                                
private void C1Combo2_RowChange( object sender, System.EventArgs e)                                                                
{                                                                
    this.bBottom = this.C1Combo2.SelectedIndex + 1;                                                               
    this.UpdateBorder();                                                               
}                                                                
                                                            
private void C1Combo3_RowChange( object sender, System.EventArgs e)                                                                
{                                                                
    this.bLeft = this.C1Combo3.SelectedIndex + 1;                                                                
    this.UpdateBorder();                                                               
}                                                             
                                                            
private void C1Combo4_RowChange( object sender, System.EventArgs e)                                                                
{                                                              
    this.bRight = this.C1Combo4.SelectedIndex + 1;                                                               
    this.UpdateBorder(); 
}
                                                            
private void C1Combo5_RowChange( object sender, System.EventArgs e)
{ 
    switch (this.C1Combo5.Text)    {                                                               
 case "Fillet": 
     this.bType = C1.Win.C1List.BorderTypeEnum.Fillet;
     break;
 case "Flat":
     this.bType = C1.Win.C1List.BorderTypeEnum.Flat; 
     break; 
 case "Groove": 
     this.bType = C1.Win.C1List.BorderTypeEnum.Groove;
     break; 
 case "Inset": 
     this.bType = C1.Win.C1List.BorderTypeEnum.Inset;
     break; 
 case "InsetBevel": 
     this.bType = C1.Win.C1List.BorderTypeEnum.InsetBevel;
     break;
 case "None": 
     this.bType = C1.Win.C1List.BorderTypeEnum.None;
     break;
 case "Raised": 
     this.bType = C1.Win.C1List.BorderTypeEnum.Raised;
     break; 
 case

"RaisedBevel": 
     this.bType = C1.Win.C1List.BorderTypeEnum.RaisedBevel; 
     break; 
    } 
    this.UpdateBorder();  
}

Finally, include the code which handles the checkboxes and the C1ListBase.FetchScrollTips event which sets the ToolTip box that displays when the user is scrolling:

To write code in Visual Basic

Visual Basic	Copy Code
Private Sub CheckBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox1.Click Me.C1List1.ScrollTips = Me.CheckBox1.Checked End Sub Private Sub CheckBox2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles CheckBox2.Click Me.C1List1.ScrollTrack = Me.CheckBox2.Checked End Sub Private Sub C1List1_FetchScrollTips(ByVal sender As Object, ByVal e As C1.Win.C1List.FetchScrollTipsEventArgs) Handles C1List1.FetchScrollTips ' Set the ScrollTip depending on which scroll bar was moved. Select Case e.ScrollBar Case C1.Win.C1List.ScrollBarEnum.Horizontal e.ScrollTip = Me.C1List1.Columns(e.ColIndex).Caption Case C1.Win.C1List.ScrollBarEnum.Vertical e.ScrollTip = "Record: " & CStr(e.Row + 1) & " of " & CStr(Me.C1List1.ListCount) & vbCrLf & "Company: " & Me.tb.Rows(e.Row).Item("Company") & vbCrLf & "User Code: " & Me.tb.Rows(e.Row).Item("UserCode") End Select e.TipStyle.ForeColor = Color.Blue End Sub

To write code in C#

C#	Copy Code
private void CheckBox1_Click( object sender, System.EventArgs e) { this.c1List1.ScrollTips = this.CheckBox1.Checked; } private void CheckBox2_Click( object sender, System.EventArgs e) { this.c1List1.ScrollTrack = this.CheckBox2.Checked; } private void C1List1_FetchScrollTips( object sender, C1.Win.C1List.FetchScrollTipsEventArgs e) { // Set the ScrollTip depending on which scroll bar was moved. switch (e.ScrollBar) { case C1.Win.C1List.ScrollBarEnum.Horizontal; e.ScrollTip = this.c1List1.Columns[e.ColIndex].Caption; break; case C1.Win.C1List.ScrollBarEnum.Vertical; e.ScrollTip = "Record: " + (e.Row + 1) + " of " + this.c1List1.ListCount_ + + "\n" + "\nCompany: " + this.tb.Rows[e.Row].["Company"] + "\n" + "User Code: " + this.tb.Rows[e.Row].["UserCode"]; break; } e.TipStyle.ForeColor = Color.Blue; }

Run the program and observe the following:

C1List1 displays the data specified.
Setting ScrollTrack to True lets you see the data as it is being scrolled.
Setting C1ListBase.ScrollTips to True shows a ToolTip box with column information while the user is scrolling.

By manipulating the C1Combo boxes, and the Color Dialog, you can create a border around a column's cells and set them to a System color.

Note: When C1Combo has the focus, press F4 to open the drop-down box.

This concludes the tutorial.