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

  • Article

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.

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.

    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 =
 PowerPacks.DataRepeaterLayoutStyles.Vertical Then
    DataRepeater1.LayoutStyle =
     PowerPacks.DataRepeaterLayoutStyles.Horizontal
Else
    DataRepeater1.LayoutStyle =
     PowerPacks.DataRepeaterLayoutStyles.Vertical
End If

    // 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.

Example

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 Sub DataRepeater1_LayoutStyleChanged(ByVal sender As Object,
 ByVal e As System.EventArgs) Handles DataRepeater1.LayoutStyleChanged
    ' Call a method to re-initialize the template.
    DataRepeater1.BeginResetItemTemplate()
    If DataRepeater1.LayoutStyle =
     PowerPacks.DataRepeaterLayoutStyles.Vertical Then 
        ' Change the height of the template and rearrange the controls.
        DataRepeater1.ItemTemplate.Height = 150
        DataRepeater1.ItemTemplate.Controls(TextBox1.Name).Location =
         New Point(20, 40)
        DataRepeater1.ItemTemplate.Controls(TextBox2.Name).Location =
         New Point(150, 40)
    Else 
        ' Change the width of the template and rearrange the controls.
        DataRepeater1.ItemTemplate.Width = 150
        DataRepeater1.ItemTemplate.Controls(TextBox1.Name).Location =
         New Point(40, 20)
        DataRepeater1.ItemTemplate.Controls(TextBox2.Name).Location =
         New Point(40, 150)
    End If 
    ' Apply the changes to the template.
    DataRepeater1.EndResetItemTemplate()
End Sub

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();
}

See Also

Tasks

Troubleshooting the DataRepeater Control (Visual Studio)

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

Reference

DataRepeater

LayoutStyle

BeginResetItemTemplate

EndResetItemTemplate

Concepts

Introduction to the DataRepeater Control (Visual Studio)