Control NavBarControl y SplitterControl

Utilice la clase NavBarControl para agregar un control XtraNavBar a su aplicación. El control que permite mostrar una serie de enlaces agrupados. Grupos de enlaces se puede ampliar o mover con el fin de mostrar / ocultar su contenido. Puede procesar los eventos, haga clic en enlace con el fin de realizar las acciones deseadas.
El control XtraNavBar ofrece varios estilos de pintura. Puede seleccionar el estilo a través de la propiedad PaintStyleName. En tiempo de diseño, el uso de diseño del control a los estilos de pintura vista previa disponible. 
Agregar el control a nuestro formulario

 Ajustarlo en la parte izquierda del formulario mediante la propiedad Dock

Usando también el control SplitterControl

Agregamos el control SplitterControl, para que el NavBarControl sea ajustable a nuestra voluntad.

Personalizando el NavBarControl.

Hacemos clic en Run Designer

En el menú principal, seleccionamos View Chooser para ver los distintos estilos y seleccionamos el que más nos agrade y hacemos clic en Aplicar.

Para agregar Grupos e elementos a estos, hacemos clic en Groups/Items/Links

• Hacemos clic en la seccion de grupos y podemos agregar grupos
• Hacemos clic en la seccion de elementos y podremos agregar elementos.

Para asociar un elemento a un grupo, solo tendremos que arrastrarlo hacia el grupo que queramos, tal como se muestra en la siguiente imagen, así mismo para cambiar sus títulos cambiamos su propiedad Caption.

Para utilizar los eventos de este control, no vasta con hacerle doble clic como lo haríamos con un control de .NET, para eso seleccionamos primeramente el elemento y nos vamos a la pestaña de eventos y hacemos doble clic sobre el evento LinkClicked que se ejecutara cuando hagamos clic en él.

 Agregamos el siguiente código al evento.

Ejecutamos el programa y vemos los resultados. 

¿Para que agregamos el control SplitterControl?

Simplemente para que nuestro NavBarControl lo podamos redimencionar a nuestro gusto, tal como se muestra en la siguiente imagen.

Control ImageComboBoxEdit e ImageCollection

Control al estilo ComboBox de .NET, el cual nos permite insertarle imágenes.

Agregando el control

Agregamos los controles ImageComboBoxEdit e ImageCollection

Este ultimo lo llenamos de imágenes.

Ahora asociamos el  control ImageCollection al ImageComboBoxEdit mediante la propiedad SmallImages  (Properties -> SmallImages)

Editamos los elementos del ImageComboBoxEdit

Agregamos los Items y le asignamos una imagen distinta a cada uno, tal como se muestra en la siguiente imagen:

ImageComboBoxEdit en tiempo de ejecución.

Agregando imágenes en el GridControl

Entramos en el diseño del GridControl (Run designer) y agregamos la columna como lo vimos en la entrada: 


http://devexpresshispano.blogspot.com/2011/03/enlazando-el-gridcontrol-con-datos.html


En la propiedad de  la columna ColunEdit -> New seleccionamos el control PictureEdit, para que nuestro campo soporte ese tipo de datos.

 En el código, agregamos la columna en la tabla del ejemplo anterior:


TablaClientes.Columns.Add("FOTO", GetType(Byte()))


Agregamos la columna en la tabla del ejemplo anterior:



TablaClientes.Rows.Add("1", "Raciel Luis", "25", "M", imgtoarr("C:\073.png"))
TablaClientes.Rows.Add("2", "Gabriela Torres", "45", "F", imgtoarr("C:\11.png"))



Agregamos la siguiente función para que nos retorne un arreglo de tipo Byte:



    Function imgtoarr(ByVal URLimagen As String) As Byte()
        Dim img As Image = Image.FromFile(URLimagen)
        Dim ms As New System.IO.MemoryStream
        img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg)
        Return ms.ToArray()
    End Function

Ejecutar el programa y veremos que la imagen se ha agregado.

Ahora, si queremos ver la imagen más grande, solo tenemos que agregar un botón para cambiar la vista del GridControl.

El código es el siguiente:

Dim Opcion As Boolean = True 'Linea de código fuera del evento del botón

'código dentro del evento clic del botón:

   GridView1.OptionsView.RowAutoHeight = Opcion

   If Opcion Then

       Opcion = False

   Else

       Opcion = True

   End If

Resultado en tiempo de ejecución

Nota: Se debe validar que las imágenes existan ya que ocurriría una excepción en tiempo de ejecución.

Control MonthEdit y StyleController

Un control muy sencillo, pero al fin y al cabo, útil.


Descripción: Es un control estilo ComboBox de .NET el cual despliega el listado de los meses.

Agregarlo

Control en tiempo de ejecución

Para editar los elementos hacemos clic sobre el control y seleccionamos Edit items, hasta podemos agregarle una imagen desde la propiedad ImageIndex:

Ahora, si queremos agregarle un Skin al control solamente tenemos que agregar un control llamado StyleController el cual nos permite definir el estilo de Skin para después  en la propiedad StyleController del MonthEdit, seleccionar dicho control y así nuestro listado de meses se vera mas atractivo, que antes.

Como agregarlo

Seleccionando el Skin

Seleccionando el StyleController para el control MonthEdit

Control en tiempo de ejecución aun más atractivo.

Nota. El StyleController lo podemos asociar a varios controles, por lo que el diseño del cada control puede ser independiente de este control.

Enlazando el GridControl con datos

Enlazando el GridControl con datos.

La principal propiedad para enlazar la columna con datos es: FielName.

Pero para que se vea aun más decente, usaremos también las propiedades Caption y (Name), esta ultima es para tener un mejor control de las columnas, ya que cuendo son muchas es más cómodo controlarlas poniéndoles un nombre, tal como se muestra en la siguiente imagen.

Construyendo las columnas en el GridControl -> Run Designer -> Columns

Para este ejemplo crearemos cuatro columnas y las propiedades mencionadas anteriormente las estableceremos de la siguiente manera.

(name)                 FielName        Caption

colID                      ID                  Id

colNombre            NOMBRE        Nombre

colEdad                EDAD             Edad

colSexo                SEXO              Sexo

Agregar el siguiente código en el load o en el constructor.

Dim TablaClientes As New DataTable("CLIENTES")

'Las columnas deben corresponder con la propiedad FielName, y debemos 

'especificar el tipo de dato para que el GridControl controle los errores de tipos.

With TablaClientes.Columns

    .Add("ID", GetType(Integer))

    .Add("NOMBRE", GetType(String))

    .Add("EDAD", GetType(Integer))

    .Add("SEXO", GetType(String))

End With

With TablaClientes.Rows

    .Add("1", "Raciel Luis", "25", "Hombre")

    .Add("2", "Gabriela Torres", "45", "Mujer")

End With

Me.GridControl1.DataSource = TablaClientes

AddComboBoxEnGridControl() 'El codigo esta más abajo.

Nota: Cabe mencionar que si tenemos una tabla en un DataSet en nuestro diseñador de esquemas, este se puede enlazar de manera automática al control, tal como se muestra en la siguiente imagen.

GridControl en tiempo de ejecución.

Si nos damos cuenta, podemos editar los campos, para no permitir editarlos nos vamos a las propiedades de la columna (AllowEdit la establecemos como False y ReadOnly como True) para que no nos permita editar el registro de la columna deseada, en este ejemplo la columna nombre.

Como mencionaba anteriormente que de debe poner el tipo de dato de las columnas de la tabla que se asociara al control, para aprovechar las validaciones integradas del mismo control. En la siguiente imagen estamos tratando de insertar letras en el campo EDAD, lo cual va a ser incorrecto porque lo definimos como Integer. Ya sea desde codigo o desde el diseñados de esquemas (DataSet's).

Ademas podemos hacer uso de los filtros que agregamos a nuestro control, para asi evitarnos hacer consultas SQL a la base base de datos o en propio DataTable.

Insertando ComboBox en el GridControl

Tomaremos para este ejemplo el campo Sexo.

Agregamos el siguiente procedimiento, el cual lo podemos llamar después del código anterior a este.

   Sub AddComboBoxEnGridControl()        'Repositorio de Items

        Dim RepositorioItemsSexo As New DevExpress.XtraEditors.Repository.RepositoryItemLookUpEdit

        'Agregando el ComboBox en el GridControl

        Dim TablaSexo As New DataTable("SEXO")

        With TablaSexo.Columns

            .Add("IDSEXO")

            .Add("DESCRIPCION")

        End With

       TablaSexo.Columns("IDSEXO").Caption = "Id o clave"
        TablaSexo.Columns("DESCRIPCION").Caption = "Descripción"

        With TablaSexo.Rows

            .Add("M", "Masculino")

            .Add("F", "Femenino")

        End With

        With RepositorioItemsSexo

            .DataSource = TablaSexo

            .ValueMember = "IDSEXO"

            .DisplayMember = "DESCRIPCION"

        End With

        colSexo.ColumnEdit = RepositorioItemsSexo

    End Sub

Nota: para que funcione correctamente tenemos que cambiar los valores de los registros agregados a la tabla.

Quitar:

.Add("1", "Raciel Luis", "25", "Hombre")

.Add("2", "Gabriela Torres", "45", "Mujer")

Reemplazarlo por:

.Add("1", "Raciel Luis", "25", "M")

.Add("2", "Gabriela Torres", "45", "F")

Esto es porque el campo ya lo hemos enlazado a los datos de la tabla sexo.

Nota: Estos datos pueden ser obtenidos mediante una consulta a una base de datos.

Agregar un navegador de datos al GridControl.

Construyendo las columnas en el GridControl -> Run Designer -> Focus, Selection, Navigator -> Embedder Navigator 

y chequeamos la opcion UseEmbeddedNavigator

Ejecutamos la aplicación y veamos todo lo que hemos logrado con nuestro GridControl.

Pero antes de terminar con este control le voy a explicar como visualizar los datos para impresión y ademas exportarlos a distintos formatos de archivos.

Agregamos un boton en el formulario y agregamos la siguiente linea de código:

 Me.GridControl1.ShowPrintPreview()

Cuando hagamos clic veremos el preliminar de los datos.

Desde este reporteador podemos exportar la información a PDF, Excel, Word, etc.