Tutorial: Mostrar los datos enlazados en un control DataRepeater (Visual Studio)

Artículo
06/10/2015

Este tutorial proporciona un escenario básico de principio a fin para mostrar datos enlazados en un control DataRepeater.

Requisito previo

Este tutorial requiere la base de datos de ejemplo Northwind.

Si no tiene instalada esta base de datos en el equipo de desarrollo, puede descargarla desde el Centro de descarga de Microsoft. Para obtener instrucciones, vea Descargar bases de datos de ejemplo.

Información general

La primera parte de este tutorial consta de cuatro tareas principales:

Crear una solución.
Agregar un control DataRepeater.
Agregar un origen de datos.
Agregar controles enlazados a datos.

Nota

Es posible que tu equipo muestre nombres o ubicaciones diferentes para algunos de los elementos de la interfaz de usuario de Visual Studio en las siguientes instrucciones. La edición de Visual Studio que se tenga y la configuración que se utilice determinan estos elementos. Para obtener más información, consulte Personalizar la configuración de desarrollo en Visual Studio.

Crear una solución DataRepeater

En el primer paso, crea un proyecto y una solución.

Para crear una solución DataRepeater

En el menú Archivo de Visual Studio, haga clic en Nuevo proyecto.
En el panel Tipos de proyecto del cuadro de diálogo Nuevo proyecto, expanda Visual Basic y, a continuación, haga clic en Windows.
En el panel Plantillas, haga clic en Aplicación de Windows Forms.
En el cuadro Nombre, escriba DataRepeaterApp.
Haga clic en Aceptar.

Se abre el Diseñador de Windows Forms.
Seleccione el formulario en el Diseñador de Windows Forms. En la ventana Propiedades, establezca la propiedad Size en 800, 700.

Agregar un control DataRepeater

En este paso, agrega un control DataRepeater al formulario.

Para agregar un control DataRepeater

En el menú Ver, haga clic en Cuadro de herramientas.

Se abrirá el Cuadro de herramientas.
Seleccione la ficha Visual Basic PowerPacks.
Arrastre un control DataRepeater a Form1.
En la ventana Propiedades, establezca la propiedad Location en 0, 25.
Establezca la propiedad Size en 460, 600.

Agregar un origen de datos

En este paso, agrega un origen de datos para el control DataRepeater.

Para agregar un origen de datos

En el menú Datos, haga clic en Mostrar orígenes de datos.
En la ventana Orígenes de datos, seleccione Agregar nuevo origen de datos.
Seleccione Base de datos en la página Elegir un tipo de datos de origen y luego haga clic en Siguiente.
En la página Elegir la conexión de datos, siga uno de estos procedimientos:
- Si existe alguna conexión de datos a la base de datos de ejemplo Northwind disponible en el cuadro de lista desplegable, haga clic en ella.
  
  O bien
- Haga clic en Nueva conexión para configurar una nueva conexión de datos. Para obtener más información, vea How to: Create Connections to SQL Server Databases.
Si la base de datos requiere una contraseña, seleccione la opción para incluir datos confidenciales y, a continuación, haga clic en Siguiente.

Nota

Si aparece un cuadro de diálogo, haga clic en Sí para guardar el archivo en su proyecto.
Haga clic en Siguiente en la página Guardar la cadena de conexión en el archivo de configuración de la aplicación.
Expanda el nodo Tablas en la página Elija los objetos de base de datos.
Seleccione las casillas junto a las tablas Customers y Orders y, a continuación, haga clic en Finalizar.

NorthwindDataSet se agrega al proyecto, y las tablas Customers y Orders aparecen en la ventana Orígenes de datos.

Agregar controles enlazados a datos

En este paso, agrega controles enlazados a datos a DataRepeater.

Para agregar controles enlazados a datos

En la ventana Orígenes de datos, seleccione el nodo de nivel superior para la tabla Customers.
Cambie el tipo de colocación de la tabla a Details haciendo clic en Details en la lista desplegable del nodo de tabla.
Seleccione el nodo de tabla Customers y arrástrelo a la región de plantilla de elementos (la región superior) del control DataRepeater.

Se agrega un control BindingNavigator al formulario, y los componentes NorthwindDataSet, CustomersBindingSource, CustomersTableAdapter, CustomersBindingNavigator y TableAdapterManager a la Bandeja de componentes.
Seleccione todos los campos y sus etiquetas asociadas, y colóquelos cerca del borde izquierdo de la región de plantilla de elementos.
Seleccione los cinco últimos campos (Region, Postal Code, Country, Phone y Fax) y sus etiquetas asociadas y muévalos arriba y a la derecha de los seis primeros campos.
Seleccione la plantilla de elementos (la región superior del control).
En la ventana Propiedades, establezca la propiedad Size en 427, 170.

En este punto, tiene una aplicación operativa que mostrará una lista extensible de clientes. Puede presionar F5 para ejecutar la aplicación, cambiar los datos y agregar o eliminar los registros del cliente.

En los siguientes pasos opcionales, obtendrá información sobre cómo personalizar el control DataRepeater.

Pasos Siguientes (opcionales)

Esta parte del tutorial consta de cuatro tareas opcionales:

Cambiar la apariencia del control DataRepeater.
Impedir que los usuarios agreguen o eliminen registros.
Agregar capacidad de búsqueda al control DataRepeater.
Agregar una tabla principal y de detalle al control DataRepeater.

Cambiar la apariencia del control DataRepeater

En este paso opcional, cambia el BackColor del control DataRepeater en tiempo de diseño. También agrega código para mostrar las filas en colores alternos y cambiar de forma condicional el ForeColor de una etiqueta.

Para cambiar la apariencia del control

En el Diseñador de Windows Forms, seleccione la región principal (inferior) del control DataRepeater.
En la ventana Propiedades, establezca la propiedad BackColor en blanco.
Haga doble clic en DataRepeater para abrir el Editor de código.
En el Editor de código, en la lista desplegable de eventos, haga clic en DrawItem.

En el controlador de eventos DrawItem, agregue el código siguiente para alternar el BackColor:

' 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.
    e.DataRepeaterItem.BackColor = DataRepeater1.BackColor
End If

// 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.
    e.DataRepeaterItem.BackColor = dataRepeater1.BackColor;
}

En el controlador de eventos DrawItem, agregue el código siguiente para cambiar el ForeColor de una etiqueta que depende de una condición:

If e.DataRepeaterItem.Controls(RegionTextBox.Name).Text = "" Then
    e.DataRepeaterItem.Controls("RegionLabel").
     ForeColor = Color.Red
Else
    e.DataRepeaterItem.Controls("RegionLabel").
     ForeColor = Color.Black
End If

if (e.DataRepeaterItem.Controls[regionTextBox.Name].Text == "")
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Red;
}
else
{
    e.DataRepeaterItem.Controls["regionLabel"].ForeColor = Color.Black;
}

Presione F5 para ejecutar la aplicación y ver las personalizaciones.

Impedir que los usuarios agreguen o eliminen registros

En este paso opcional, agrega código que impide que los usuarios agreguen o eliminen registros del control DataRepeater.

Para impedir que los usuarios agreguen y eliminen registros

En el Diseñador de Windows Forms, haga doble clic en el formulario para abrir el Editor de código.

Agregue el código siguiente al evento Form_Load:

DataRepeater1.AllowUserToAddItems = False
DataRepeater1.AllowUserToDeleteItems = False
BindingNavigatorAddNewItem.Enabled = False
CustomersBindingSource.AllowNew = False
BindingNavigatorDeleteItem.Enabled = False

dataRepeater1.AllowUserToAddItems = false;
dataRepeater1.AllowUserToDeleteItems = false;
bindingNavigatorAddNewItem.Enabled = false;
customersBindingSource.AllowNew = false;
bindingNavigatorDeleteItem.Enabled = false;

En la lista desplegable Nombre de clase, haga clic en BindingNavigatorDeleteItem. En la lista desplegable Nombre de método, haga clic en EnabledChanged.
Agregue el código siguiente al controlador de eventos BindingNavigatorDeleteItem_EnabledChanged:
```
If BindingNavigatorDeleteItem.Enabled = True Then
    BindingNavigatorDeleteItem.Enabled = False 
End If
```
```
if (bindingNavigatorDeleteItem.Enabled == true)
{
    bindingNavigatorDeleteItem.Enabled = false;
}
```
Nota

Se trata de un paso necesario porque el componente BindingSource habilitará el botón DeleteItem cada vez que cambie el registro actual.
Presione F5 para ejecutar la aplicación. Observe que el botón DeleteItem está deshabilitado y que no puede eliminar elementos presionando la tecla SUPR.

Agregar capacidad de búsqueda al control DataRepeater

En este paso opcional, implementa la capacidad de búsqueda para un valor en el control DataRepeater. Si se encuentra la cadena de búsqueda, el control selecciona el elemento que contiene el valor y desplaza el elemento en la vista.

Para agregar capacidad de búsqueda

Arrastre un control TextBox desde el Cuadro de herramientas hasta el formulario que contenga el control DataRepeater.

Colóquelo bajo el control DataRepeater.
En la ventana Propiedades, cambie la propiedad Name a SearchTextBox.
Arrastre un control Button desde el Cuadro de herramientas hasta el formulario que contenga el control DataRepeater. Colóquelo bajo el control DataRepeater.
En la ventana Propiedades, cambie la propiedad Name a SearchButton. Cambie la propiedad Text a Search.

Haga doble clic en el control Button para abrir el Editor de código y agregue el código siguiente al controlador de eventos SearchButton_Click.

Dim foundIndex As Integer 
Dim searchString As String
searchString = SearchTextBox.Text
' Search for the string in the CustomerID field.
foundIndex = CustomersBindingSource.Find("CustomerID",
 searchString)
If foundIndex > -1 Then
    DataRepeater1.CurrentItemIndex = foundIndex
Else
    MsgBox("Item " & searchString & " not found.")
End If

int foundIndex;
string searchString;
searchString = searchTextBox.Text;
// Search for the string in the CustomerID field.
foundIndex = customersBindingSource.Find("CustomerID", searchString);
if (foundIndex > -1)
{
    dataRepeater1.CurrentItemIndex = foundIndex;
}
else
{
    MessageBox.Show("Item " + searchString + " not found.");
}

Presione F5 para ejecutar la aplicación. Escriba un Id. del cliente en SearchTextBox y haga clic en el botón Buscar.

Agregar una tabla principal y de detalle a DataRepeater

En este paso opcional, agrega un segundo control DataRepeater para mostrar los pedidos relacionados para cada cliente.

Para agregar una tabla principal y de detalle

Arrastre un segundo control DataRepeater desde la ficha Visual Basic PowerPacks del Cuadro de herramientas hasta el formulario.
En la ventana Propiedades, establezca la propiedad Location en 465, 25.
Establezca la propiedad Size en 315, 600.
En la ventana Orígenes de datos, expanda el nodo de tabla Customers y seleccione el nodo de detalle para la tabla Orders.
Cambie el tipo de colocación de esta tabla Orders a Detalles haciendo clic en Detalles en la lista desplegable del nodo de tabla.
Arrastre este nodo de tabla Orders a la región de plantilla de elementos (la región superior) del segundo control DataRepeater.

Se agregan unos componentes OrdersBindingSource y OrdersTableAdapter a la Bandeja de componentes.
Presione F5 para ejecutar la aplicación. Al seleccionar cada cliente en el primer control DataRepeater, los pedidos para ese cliente se muestran en el segundo control DataRepeater.