INFORMES RDL

EN WPF

ROCÍO GÓMEZ CARO

I.E.S. FRANCISCO RODRÍGUEZ MARÍN
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Contenido
1.INTRODUCCIÓN. .................................................................................................................... 2
2.DESARROLLO........................................................................................................................... 2
2.1. BBDD SQLSERVER EN DOCKER. .................................................................................. 2
2.2. ACCESO A LA BASE DE DATOS CREADA................................................................. 3
2.3. BASE DE DATOS TestDB EN NUESTRO CONTENEDOR SQLSERVER DE DOCKER.
................................................................................................................................................... 4
2.4. CREACIÓN DEL PROYECTO WPF PARA LA REALIZACIÓN DE INFORMES. ........ 5
2.5. USO DE REPORTVIEWER EN WPF. ................................................................................ 9
2.6. CREACIÓN DEL INFORME.......................................................................................... 11
2.7. DISEÑO DEL INFORME. ............................................................................................... 17
1.Diseño de la tabla: ..................................................................................................... 18
2.Cuadro de texto:......................................................................................................... 18
3.Matriz: ............................................................................................................................. 19
4.Imágenes: ..................................................................................................................... 20
5.Diagrama de barras: ................................................................................................. 21
6. Lienzo del informe: .................................................................................................... 22
2.8. CRUD SQLSERVER. ....................................................................................................... 23
1.Código de la ventana que realiza las inserciones: .......................................... 24
2.Código de la ventana que muestra los datos( DataGrid): ............................ 26
3.Código de la ventana que elimina datos: .......................................................... 27
4.Código de la ventana que actualiza datos: ...................................................... 29
3.CONCLUSIÓN. ...................................................................................................................... 31

1
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

1.INTRODUCCIÓN.
Integrar ReportViewer en una aplicación de escritorio de WPF para mostrar informes de SQL
Server puede ser muy útil para proporcionar a los usuarios una vista clara y concisa de los datos
almacenados en la base de datos. El ReportViewer permite diseñar y visualizar informes de SQL
Server Reporting Services (SSRS) directamente en una aplicación de escritorio de WPF.

En esta tarea vamos a explicar como integraremos este elemento a nuestro proyecto WPF.
Trabajaremos con nuestra base de datos, instalada en nuestro contenedor de vps, de forma que
el informe que generaremos muestre datos relacionados con los elementos de nuestra base de
datos.

2.DESARROLLO.
2.1. BBDD SQLSERVER EN DOCKER.
Para instalar la base de datos SQLserver en Docker ejecutaremos el comando siguiente:

sudo docker run -e "ACCEPT_EULA=Y" -e "MSSQL_SA_PASSWORD=

Rociogc90#1234" -p 1433:1433 --name sql1datosDEIN --hostname sql1datosDEIN -
d mcr.microsoft.com/mssql/server:2019-latest

Este comando ejecuta un contenedor de Docker con una imagen de Microsoft SQL Server 2019.
Sus argumentos se definen de la forma siguiente:

• -e "ACCEPT_EULA=Y": Acepta el acuerdo de licencia de usuario final.

• -e "MSSQL_SA_PASSWORD= Rociogc90#1234": Establece la contraseña del usuario
"sa" (sysadmin) en " Rociogc90#1234".
• -p 1433:1433: Expone el puerto 1433 del contenedor a través del puerto 1433 del host,
lo que permite que los clientes externos se conecten a la base de datos.
• --name sql1datosDEIN: Asigna un nombre al contenedor.
• --hostname sql1datosDEIN: Establece el nombre de host del contenedor.
• -d: Ejecuta el contenedor en segundo plano.
• -mcr.microsoft.com/mssql/server:2019-latest: Especifica la imagen de Microsoft SQL
Server 2019 a utilizar.

Después de ejecutar este comando, el contenedor estará en ejecución y listo para recibir
conexiones de bases de datos. Para verificar que el contenedor está en ejecución, usaremos el
comando docker ps.

2
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.2. ACCESO A LA BASE DE DATOS CREADA.

Ahora descargaremos SQL Server Management Studio. Para ello en el enlace que se muestra a
continuación, haremos click en la opción marcada en la captura:

https://learn.microsoft.com/es-es/sql/ssms/download-sql-server-management-studio-
ssms?view=sql-server-ver15

Al hacer click en el enlace de la captura anterior, descargaremos el ejecutable.

Al ejecutarlo empezaremos con el proceso de instalación. La primera ventana nos pedirá la IP

de nuestro VPS, el Login de la base de datos y la contraseña que habíamos asignado al crearla
en el contenedor:

Tras acabar el proceso de instalación entramos en el programa:

3
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.3. BASE DE DATOS TestDB EN NUESTRO CONTENEDOR SQLSERVER DE

DOCKER.
Vamos a crear nuestra base de datos en nuestro contenedor con la herramienta Putty. Una vez
entremos en nuestro servidor VPS, ejecutamos el comando siguiente para entrar en el
contenedor en el que tenemos nuestra base de datos:

Para entrar en la base de datos deberemos ejecutar lo siguiente:

/opt/mssql-tools/bin/sqlcmd -S localhost -U SA -P "<YourNewStrong@Passw0rd>"

Este comando se usa para conectarse a una instancia local de Microsoft SQL Server mediante la
autenticación de SQL Server con la herramienta de línea de comandos de SQL Server sqlcmd.

• La opción "-S" especifica el nombre del servidor al que conectarse, en este caso
"localhost".
• La opción "-U" especifica el inicio de sesión de SQL Server que se utilizará, en este caso,
"SA".
• La opción "-P" especifica la contraseña para el inicio de sesión de SQL Server, que debe
reemplazarse con una contraseña segura de su elección.
• "<YourNewStrong@Passw0rd>" es donde vamos a insertar nuestra contraseña.

El comando CREATE DATABASE TestDB; crea una nueva base de datos llamada TestDB en la
instancia actual de SQL Server.

El comando SELECT NAME from sys.databases; enumera todas las bases de datos del servidor.

Para ejecutar los comandos ejecutaremos el comando GO:

Para usar la base de datos creada ejecutaremos USE TestDB;

Para crear la tabla STOCK con cuatro campos correspondientes a un ID de tipo entero, a una
descripción de tipo cadena de caracteres, a la cantidad de unidades también de tipo entero y el
precio de venta como un valor de tipo decimal, ejecutaremos:

CREATE TABLE STOCK (id INT, descripcion NVARCHAR(50), unidades INT, precioventa FLOAT);

Seguido en la línea siguiente por GO.

4
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Vamos a comprobar el contenido de nuestra tabla con SELECT * FROM STOCK; seguido de GO.

Ahora mismo nuestra tabla esta vacía, por lo que insertaremos tres registros con las sentencias
que en la imagen se marcan seguidas de GO, para que se ejecuten:

TRES FILAS AFECTADAS

Al igual que antes haremos SELECT * FROM STOCK; GO para ver los datos insertados en la tabal
STOCK:

2.4. CREACIÓN DEL PROYECTO WPF PARA LA REALIZACIÓN DE INFORMES.

Una vez creemos nuestro proyecto, añadiremos la extensión Microsoft RDLC Report Designer
2022. Para ello solo tendremos que hacer click en Extensiones Administrar extensiones.

Tras esto, ponemos en el buscador de extensiones RDLC y si no la tenemos instalada la

descargamos.

5
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Empezamos el proceso de instalación de la forma siguiente. Primero hacemos click en Instalar:

Pulsamos en End Tasks para evitar que la ventana se quede cargando hasta el día del fin del
mundo:

6
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Una vez comienza la instalación solo tendremos que esperar que esta termine:

Cuando haya acabado la instalación cerramos la ventana:

7
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Procederemos instalando el paquete NuGet para permitir insertar en WPF controles de

WinForms , lo cual es necesario para que el informe sea compatible con WPF.

El proceso que seguiremos para ello será hacer click en el HerramientasAdministrar paquetes
NuGet Consola del administrador de paquetes:

En la parte inferior de la ventana encontraremos la consola de estos paquetes:

Donde insertaremos lo siguiente:

NuGet\Install-Package Microsoft.ReportingServices.ReportViewerControl.Winforms -
Version 150.1537.0

Ejecutamos la sentencia y si instalarán los paquetes correspondientes:

8
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.5. USO DE REPORTVIEWER EN WPF.

En WPF no se puede utilizar directamente un control ReportViewer así que lo insertaremos
arrastrando del cuadro de herramientas, el elemento WindowsFormsHost a nuestra ventana del
xam:

Tendremos que agregar las referencias siguientes a nuestro proyecto:

9
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

La referencia será:
Microsoft.ReportViewer.WinForms

Ahora vamos a agregar la línea siguiente al diseño de la ventana:

xmlns:rv="clr-
namespace:Microsoft.Reporting.WinForms;assembly=Microsoft.ReportViewer.WinForms"

Y en la parte del Grid añadiremos lo siguiente:

<WindowsFormsHost HorizontalAlignment="Left" Height="375" Margin="20,0,0,0" Width="750" >
<rv:ReportViewer x:Name="_reportViewer"/>
</WindowsFormsHost>

Para eliminar el error solo tendremos que ejecutar la aplicación. Tras esto veremos que la línea
que nos mostraba errores ha desaparecido:

10
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.6. CREACIÓN DEL INFORME.

Para este proceso es necesario agregar a nuestra solución un nuevo elemento. Haremos click en
el nombre de la soluciónAgregarNuevo elemento:

En el cuadro de búsqueda insertaremos informes con lo que buscaremos el asistente para

informes que agregaremos al proyecto:

Esto abrirá el Asistente para informes con

el Asistente para la configuración del
origen de datos. Donde escogeremos Base
de datos como el origen de los datos y
siguiente:

En la conexión de datos, nuestra nueva conexión será Microsoft SQL Server:

11
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

A continuación, rellenaremos los datos pertinentes a nuestro servidor, usuario, contraseña

autenticación, origen de datos y el nombre de la base de datos “TestDB”. Probamos la conexión
y si todo va bien nos conectaremos a la base de datos nuestra:

Dentro de la base de datos, escogeremos la conexión de datos:

12
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Además, guardaremos la cadena de conexión que usaremos en nuestro código para poder
acceder y operar con los datos de la base de datos:

Los objetos que elegiremos son las tablas:

13
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

En nuestra base de datos esta la tabla STOCK que habíamos creado, por lo que podremos ver los
campos de la misma:

Para operar en el informe, es necesario arrastrar los campos a la cuadricula de valores.

14
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Ahí podremos escoger las operaciones que queremos realizar por campos. Como podemos ver
en la primera imagen, tenemos las operaciones suma y media de los campos id, unidades y
precioventa. Esto se hace escogiendo la función en la flecha del campo que hemos arrastrado:

En este punto, escogeremos el diseño y el informe se abrirá. Con la estructura que se muestra a
continuación, tras finalizar la configuración del informe:

Este sería el diseño inicial de nuestro informe:

15
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Para que nuestro informe tenga funcionalidad habrá que añadir al archivo .cs el código
siguiente:

Es decir, las líneas siguientes:

public MainWindow()
{
InitializeComponent();
_reportViewer.Load += ReportViewer_Load;
}
private bool _isReportViewerLoaded;

private void ReportViewer_Load(object sender, EventArgs e)

{
if (!_isReportViewerLoaded)
{
Microsoft.Reporting.WinForms.ReportDataSource reportDataSource1 = new
Microsoft.Reporting.WinForms.ReportDataSource();

TestDBDataSet dataset = new TestDBDataSet();

dataset.BeginInit();

reportDataSource1.Name = "DataSet1";
//Name of the report dataset in our .RDLC file

reportDataSource1.Value = dataset.STOCK;
this._reportViewer.LocalReport.DataSources.Add(reportDataSource1);

this._reportViewer.LocalReport.ReportPath = "../../Report1.rdlc";
dataset.EndInit();

//fill data into WpfApplication4DataSet

TestDBDataSetTableAdapters.STOCKTableAdapter accountsTableAdapter = new
TestDBDataSetTableAdapters.STOCKTableAdapter();

accountsTableAdapter.ClearBeforeFill = true;
accountsTableAdapter.Fill(dataset.STOCK);
_reportViewer.RefreshReport();
_isReportViewerLoaded = true;
}
}

16
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.7. DISEÑO DEL INFORME.

Los elementos que hemos añadido a nuestro diseño final, los hemos agregado del cuadro de
herramientas lateral:

La flecha nos marca el cuadro de propiedades desde donde configuraremos el diseño de cada
elemento:

17
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

1.Diseño de la tabla:
Arrastramos la tabla inicial hacia el centro y aplicamos las propiedades que queramos para
obtener nuestro diseño.

• En fuente le he asignado el tipo de letra, color, grosor, etc.

• En padding le he añadido los bordes y la alineación.
• En borde he asignado el tipo de borde, el color y el grosor del mismo.
• En relleno le he asignado el color lila.
• Los campos en blanco se corresponden con los datos de nuestra tabla STOCK. Esto es,
una función que tiene la tabla, del informe que hemos configurado, para que muestre
esos datos.

2.Cuadro de texto:

En el mismo lugar, hemos asignado todas las propiedades de nuestro texto.

Las lechuguitas, son dos imágenes que hemos insertado y que explicaremos en otro punto su
inserción.

La línea solo le hemos cambiado el grosor y el color.

18
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

3.Matriz:

La estética de la matriz se configura de la misma forma que hemos hecho en la tabla.

Para configurar los datos que queremos que muestren esos campos, hay una función que
podemos insertar, al hacer click en el campo.

En el desplegable podremos ver la opción expresión.

La expresión que se muestra es la correspondiente a la media de los campos de esa columna:

19
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

4.Imágenes:
Al arrastrar un elemento imagen podremos importar una dentro de el mismo.

20
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Basta con hacer click en importar e

irnos a la ruta del archivo que
queremos añadir para agregar la
imagen al elemento. En nuestro caso
son los que están dentro del proyecto.
Pero solo serán visibles si
seleccionamos Todos los archivos.

Tras abrir la imagen aceptamos y podremos ver la imagen que hayamos insertado. En nuestro
caso son 4:

5.Diagrama de barras:

21
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

En el diagrama hemos asignado los artículos y sus cantidades. Además, hemos cambiado su
estética en el panel de propiedades del gráfico, tal como hemos hecho con el resto de
elementos.

6. Lienzo del informe:

En cuanto al fondo del informe hemos cambiado su color y tamaño:

Como resultado tenemos el informe que hemos mostrado al principio:

22
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.8. CRUD SQLSERVER.

Como no queremos que nuestro programa arranque con la ventana de MainWindow,
cambiaremos su inicio en el archivo App.xaml de nuestro proyecto. Donde pone StartUpUri le
diremos que arranque con la ventana Window1:

En el archivo App.conf tendremos que añadir la línea siguiente, para que realice la conexión con
la base de datos:

Nuestra ventana Window1 tiene la estructura siguiente:

En cada botón llamaremos a una ventana para que realice las funciones del CRUD y visibilice el
informe.

23
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

1.Código de la ventana que realiza las inserciones:

El código que se ejecuta al pulsar insertar es el siguiente:

24
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

El código anterior se corresponde con un manejador de eventos que se ejecuta cuando se hace
clic en un botón llamado "Inserta". La función del botón es insertar un nuevo registro en nuestra
una tabla de la base de datos.

Desglosamos el código:

1. Esta línea obtiene la cadena de conexión a la base de datos desde el archivo de

configuración.
string ConString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;

2. Inicializa una cadena vacía que se utilizará más adelante para construir la consulta SQL.
string CmdString = string.Empty

3. La siguiente sección de código valida que los campos de entrada no estén vacíos. Si se
encuentra un campo vacío, se muestra un mensaje de error y la función devuelve.

4. La siguiente sección de código valida que los campos numéricos contengan valores válidos.
Si se encuentra un valor no numérico, se muestra un mensaje de error y la función devuelve.

5. La siguiente sección de código verifica si el ID del nuevo registro ya existe en la base de datos.
Si el ID ya existe, se muestra un mensaje de error y la función devuelve.

6. Si el ID no existe, la función continúa construyendo la consulta SQL para insertar el nuevo

registro en la base de datos.
7. La consulta SQL se ejecuta en la base de datos y se muestra un mensaje si la inserción es
exitosa. Además, los campos de entrada se borran para que se puedan ingresar nuevos
valores.

25
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

2.Código de la ventana que muestra los datos( DataGrid):

El código de la ventana que muestra los datos es el siguiente:

26
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Desglosamos el código:
1. El método primero llama al constructor de la clase "InitializeComponent", que genera
automáticamente Visual Studio y se utiliza para inicializar los componentes visuales del
formulario o ventana actual. El mismo, llama a otro método llamado "FillDataGrid" que
realiza la conexión a la base de datos y ejecuta una consulta SQL para recuperar los datos de
la tabla "STOCK".
2. El método utiliza la clase "ConfigurationManager" para obtener la cadena de conexión de la
base de datos almacenada en el archivo de configuración del proyecto. Luego, utiliza la clase
"SqlConnection" para conectarse a la base de datos y la clase "SqlCommand" para crear un
comando que ejecuta la consulta SQL.
3. La clase "SqlDataAdapter" se utiliza para llenar un objeto DataTable con los datos
recuperados de la base de datos. Por último, el método establece el origen de datos del
control "stock" en el objeto DataTable recién llenado.

Básicamente, conectamos y recuperamos los datos de nuestra base de datos SQL Server y los
mostrarmos en un control DataGridView.

3.Código de la ventana que elimina datos:

27
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

El código del evento que se produce al pulsar el botón BORRAR PRODUCTO es el siguiente:

Desglosamos el código:
Este código es un método de evento asociado al botón que realiza la acción de borrar.

Este método se encarga de borrar un registro de la tabla "STOCK" en nuestra base de datos SQL
Server, TestDB.

1. Primero, el código comprueba si el valor introducido en el campo "txID" es un valor numérico

válido. Si no lo es, muestra un mensaje de error y sale del método. Si es un valor numérico
válido, el código continúa y guarda el valor en la variable "id".

2. Luego, se crea una cadena de conexión a la base de datos y una cadena de comando SQL para
borrar un registro de la tabla "STOCK" que tenga un valor de "ID" igual a la variable "id"
obtenida anteriormente.

3. A continuación, se abre una conexión a la base de datos y se crea un objeto SqlCommand

con la cadena de comando SQL y la conexión. El valor de la variable "id" se añade como un
parámetro de la consulta SQL utilizando el método AddWithValue.

28
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

4. Se ejecuta la consulta SQL con el método ExecuteNonQuery, que devuelve el número de filas
afectadas por la consulta. Si el número de filas afectadas es mayor que cero, se muestra un
mensaje de éxito y se borra el contenido del campo "txID". Si el número de filas afectadas es
cero, significa que no se encontró ningún registro con el ID ingresado, y se muestra un
mensaje de error. Por último, se cierra la conexión a la base de datos.

4.Código de la ventana que actualiza datos:

Esta es la ultima ventana del proyecto que vamos a explicar, pues la ventana que genera el
informe ha sido desglosada a lo largo de toda la documentación de la tarea.

29
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

Por lo tanto, vamos a mostrar el código del archivo ACTUALIZA.xaml.cs de nuestra venta.

El método que a continuación se muestra, se corresponde con el evento que se desencadena al

pulsar el botón actualiza.

Desglosamos el código:
Este código genera el evento para el botón llamado ACTU, que realiza una actualización en
nuestra base de datos SQL Server.

1. La función comienza extrayendo la cadena de conexión a la base de datos desde la sección

de configuración de la aplicación. A continuación, realiza una validación para asegurarse de
que todos los campos de entrada estén completos. Si alguno de los campos está vacío, se
muestra un mensaje de error y la función se detiene.

2. A continuación, se realiza otra validación para asegurarse de que los campos numéricos
contengan valores válidos. Si alguno de los campos no contiene un valor numérico válido, se
muestra un mensaje de error y se borran los valores ingresados en los campos de entrada.

30
UD4 – PRÁCTICA 1 – INFORMES RDLC EN WPF

3. Después, la función establece una conexión con la base de datos y consulta si el ID del registro
a actualizar existe en la tabla STOCK. Si el ID existe, se actualiza el registro con los valores
ingresados en los campos de entrada y se muestra un mensaje de éxito. Si el ID no existe, se
muestra un mensaje de error. Finalmente, la función cierra la conexión con la base de datos
y borra los valores ingresados en los campos de entrada.

3.CONCLUSIÓN.
Una aplicación que genera informes y realiza operaciones CRUD en SQL Server con Docker en
WPF, que es una combinación de tecnologías que permiten crear aplicaciones de escritorio
altamente personalizables y escalables con una base de datos segura y flexible, tiene las
siguientes ventajas:

El uso de Docker como plataforma de contenedores facilita la implementación y el despliegue

de la aplicación en distintos entornos, mientras que WPF proporciona una interfaz de usuario
rica y moderna para la interacción con el usuario.

El uso de SQL Server como base de datos permite una gestión eficiente de los datos, lo que
resulta especialmente importante en aplicaciones que implican operaciones CRUD. Además, la
capacidad de generar informes puede ser muy útil para analizar y visualizar los datos de una
manera clara y concisa.

En resumen, la combinación de Docker, SQL Server y WPF permite crear aplicaciones altamente
personalizables, escalables y seguras, lo que las hace ideales para entornos empresariales o de
producción.

31