How to: Change the Appearance of a DataRepeater Control (Visual Studio)

You can change the appearance of a DataRepeater control at design time by setting properties or at run time by handling the DrawItem event.

Properties that you set at design time when the item template section of the control is selected will be repeated for each DataRepeaterItem at run time. Appearance-related properties of the DataRepeater control itself will be visible at run time only if a part of the container is left uncovered (for example, if the Padding property is set to a large value).

At run time, appearance-related properties can be set based on conditions. For example, in a scheduling application, you might change the background color of an item to warn users when an item is past due. In the DrawItem event handler, if you set a property in a conditional statement such as If…Then, you must also use an Else clause to specify the appearance when the condition is not met.

To change the appearance at design time

1. In the Windows Forms Designer, select the item template (upper) region of the DataRepeater control.

2. In the Properties window, select a property and change the value. Common properties that affect appearance include BackColor, BackgroundImage, BorderStyle, and ForeColor.

To change the appearance at run time

1. In the Code Editor, in the Event drop-down list, click DrawItem.

2. In the DrawItem event handler, add code to set the properties:

   ' Set the default BackColor.
   e.DataRepeaterItem.BackColor = Color.White
   ' Loop through the controls on the DataRepeaterItem. 
   For Each c As Control In e.DataRepeaterItem.Controls
       ' Check the type of each control. 
       If TypeOf c Is TextBox Then 
           ' If a TextBox, change the BackColor.
           c.BackColor = Color.AliceBlue
       Else 
           ' Otherwise use the default BackColor.
           c.BackColor = e.DataRepeaterItem.BackColor
       End If 
   Next
   

   // Set the default BackColor.
   e.DataRepeaterItem.BackColor = Color.White;
   // Loop through the controls on the DataRepeaterItem. 
   foreach (Control c in e.DataRepeaterItem.Controls)
   {
       // Check the type of each control. 
       if (c is TextBox)
       // If a TextBox, change the BackColor.
       {
           c.BackColor = Color.AliceBlue;
       }
       else
       {
           // Otherwise use the default BackColor.
           c.BackColor = e.DataRepeaterItem.BackColor;
       }
   }
   

Example

Some common customizations for the DataRepeater control include displaying the rows in alternating colors and changing the color of a field based on a condition. The following example shows how to perform these customizations. This example assumes that you have a DataRepeater control that is bound to the Products table in the Northwind database.

Private Sub DataRepeater1_DrawItem(ByVal sender As Object, ByVal e _
 As Microsoft.VisualBasic.PowerPacks.DataRepeaterItemEventArgs) _
 Handles DataRepeater1.DrawItem
    ' Alternate the back color. 
    If (e.DataRepeaterItem.ItemIndex Mod 2) <> 0 Then 
        ' Apply the secondary back color.
        e.DataRepeaterItem.BackColor = Color.AliceBlue
    Else 
        ' Apply the default back color.
        DataRepeater1.ItemTemplate.BackColor = Color.White
    End If 
    ' Change the color of out-of-stock items to red. 
    If e.DataRepeaterItem.Controls(UnitsInStockTextBox.Name).Text _
     < 1 Then
        e.DataRepeaterItem.Controls(UnitsInStockTextBox.Name). _
         BackColor = Color.Red
    Else
        e.DataRepeaterItem.Controls(UnitsInStockTextBox.Name). _
         BackColor = Color.White
    End If 
End Sub

private void dataRepeater1_DrawItem(object sender, 
    Microsoft.VisualBasic.PowerPacks.DataRepeaterItemEventArgs e)
{
    // Alternate the back color. 
    if ((e.DataRepeaterItem.ItemIndex % 2) != 0)
    // Apply the secondary back color.
    {
        e.DataRepeaterItem.BackColor = Color.AliceBlue;
    }
    else
    {
        // Apply the default back color.
        dataRepeater1.ItemTemplate.BackColor = Color.White;
    }
    // Change the color of out-of-stock items to red. 
    if (e.DataRepeaterItem.Controls["unitsInStockTextBox"].Text == "0")
    {
        e.DataRepeaterItem.Controls["unitsInStockTextBox"].BackColor = Color.Red;
    }
    else
    {
        e.DataRepeaterItem.Controls["unitsInStockTextBox"].BackColor = Color.White;
    }
}

Note that for both of these customizations, you must provide code to set the properties for both sides of the condition. If you do not specify the Else condition, you will see unexpected results at run time.

See Also

Tasks

Troubleshooting the DataRepeater Control (Visual Studio)

How to: Display Bound Data in a DataRepeater Control (Visual Studio)

How to: Display Unbound Data in a DataRepeater Control (Visual Studio)

How to: Display Item Headers in a DataRepeater Control (Visual Studio)

Concepts

Introduction to the DataRepeater Control (Visual Studio)

Reference

DataRepeater

DrawItem

Change History

Date	History	Reason
July 2008	Added topic.	SP1 feature change.