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

 

Updated: July 20, 2015

For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.

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.

System_CAPS_ICON_note.jpg Note

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.

    System_CAPS_ICON_note.jpg Note

    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;
                }
                else
                {
                    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.
            dataRepeater1.BeginResetItemTemplate();
            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);
            }
            else
            {
                // 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.
            dataRepeater1.EndResetItemTemplate();
        }

DataRepeater
LayoutStyle
BeginResetItemTemplate
EndResetItemTemplate
Introduction to the DataRepeater Control
Troubleshooting the DataRepeater Control
How to: Change the Appearance of a DataRepeater Control

Show: