Export (0) Print
Expand All

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

Updated: July 2008

The DataRepeater control can be displayed in either a vertical (items scroll vertically) or horizontal (items scroll horizontally) orientation. You can change the orientation at design time or at run time by changing the LayoutStyle property. If you change the LayoutStyle property at run time, you may also want to resize the ItemTemplate and reposition the child controls.


If you reposition controls on the ItemTemplate at run time, you will need to call the BeginResetItemTemplate and EndResetItemTemplate methods at the beginning and end of the code block that repositions the controls.

To change the layout at design time

  1. In the Windows Forms Designer, select the DataRepeater control.


    You must select the outer border of the DataRepeater control by clicking in the lower region of the control, not in the upper ItemTemplate region.

  2. In the Properties window, set the LayoutStyle property to either Vertical or Horizontal.

To change the layout at run time

  1. Add the following code to a button or menu Click event handler:

    // Switch the orientation. 
    if (dataRepeater1.LayoutStyle == DataRepeaterLayoutStyles.Vertical)
        dataRepeater1.LayoutStyle = DataRepeaterLayoutStyles.Horizontal;
        dataRepeater1.LayoutStyle = DataRepeaterLayoutStyles.Vertical;
  2. In most cases, you will want to add code similar to that shown in the Example section to resize the ItemTemplate and rearrange controls to fit the new orientation.

The following example shows how to respond to the LayoutStyleChanged event in an event handler. This example requires that you have a DataRepeater control named DataRepeater1 on a form and that its ItemTemplate contain two TextBox controls named TextBox1 and TextBox2.

private void dataRepeater1_LayoutStyleChanged_1(object sender, EventArgs e)
    // Call a method to re-initialize the template.
    if (dataRepeater1.LayoutStyle == DataRepeaterLayoutStyles.Vertical)
    // Change the height of the template and rearrange the controls.
        dataRepeater1.ItemTemplate.Height = 150;
        dataRepeater1.ItemTemplate.Controls["TextBox1"].Location = new Point(20, 40);
        dataRepeater1.ItemTemplate.Controls["TextBox2"].Location = new Point(150, 40);
        // Change the width of the template and rearrange the controls.
        dataRepeater1.ItemTemplate.Width = 150;
        dataRepeater1.ItemTemplate.Controls["TextBox1"].Location = new Point(40, 20);
        dataRepeater1.ItemTemplate.Controls["TextBox2"].Location = new Point(40, 150);
    // Apply the changes to the template.




July 2008

Added topic.

SP1 feature change.

Community Additions

© 2014 Microsoft