Creación de Controles en CF .NET

Por Unai Zorrilla Castro

 Descargar ejemplos de este artículo (88 KB).

Contenido

 Introducción
 Controles Personalizados
 Creando un componente con diseñador
 Relación entre los Assemblies en “Run-Time” y “Design-Time”
 Instalando el Control
 Añadiendo el Control a la Caja de Herramientas de Visual Studio .NET
 Conclusiones
 Referencias

Introducción

A la hora de empezar un desarrollo para dispositivos móviles como PocketPc, debemos tener presente el desarrollo de controles personalizados para nuestras aplicaciones, la paleta de controles que ofrece Visual Studio quizás no nos proporcione todo lo que desearíamos, si bien la infraestructura del Compact Framework nos facilita la tarea de desarrollar nuestros propios controles.

A través de este artículo veremos cómo crear controles para nuestros desarrollos en PocketPC o SmartPhone de una manera sencilla y rápida. Primeramente veremos cómo crear un control y luego veremos los pasos para crear un diseñador y poder alojar estos controles dentro de la paleta de controles de Visual Studio.

Controles Personalizados

Los controles personalizados se fundamentan en la clase Control, contenida en el espacio de nombres System.Windows.Forms.

Control nos servirá de clase base para nuestros controles personalizados, nos proporcionará toda la base para alojar controles y realizar operaciones de diseño sobre él.

Empezaremos por crear un nuevo proyecto de Visual Studio para SmartDevice y seleccionando en el asistente de aplicaciones “Biblioteca de clases para PocketPC” (Ver Figura 1):

Figura 1. Volver al texto.

El siguiente paso será agregar las referencias a System.Windows.Forms y System.Drawing, con lo que la estructura de nuestro control será:

using System;
using System.Data;
using System.Windows.Forms;
using System.Drawing;
namespace SmartDeviceControl
{
      /// <summary>
      /// Descripción breve de ControlPersonalizado.
      /// </summary>
      public class ControlPersonalizado : Control
      {
            public ControlPersonalizado()
            {
                  //
                  // TODO: agregar aquí la lógica del constructor.
                  //
            }
      }
}

Ahora ya tenemos la estructura básica para empezar a trabajar en nuestro control personalizado. Podemos establecer el tamaño del mismo y la posición por defecto del control estableciendo las propiedades Size y Location; para ello crearemos un método de inicialización:

private void Init()
{
      //Inicializacion del tamaño por defecto
      this.Size = new System.Drawing.Size(30,30);
      //Inicializacion de la posicion por defecto
      this.Location = new System.Drawing.Point(50,75);
}

La clase Control es una clase contenedora de objetos por lo que podemos agregar otros controles dentro del nuestro, de manera sencilla. Además, nos permite sobrescribir el evento OnPaint; de esta forma podremos usar GDI+ para pintar en la superficie del mismo.

protected override void OnPaint(PaintEventArgs e)
{
      //pintamos el borde del control y una elipse
 
      Rectangle rect = new Rectangle(0,0,this.Width -1 , this.Height -1 );
      e.Graphics.DrawRectangle(new Pen(System.Drawing.Color.MidnightBlue),rect);
      e.Graphics.FillEllipse(new SolidBrush(System.Drawing.Color.Red),rect);
      base.OnPaint (e);
} 

Una vez hecho esto, ya tenemos todo lo necesario para realizar nuestros controles personalizados, veremos a continuación cómo mostrar nuestro control en un formulario.

private void btMostar_Click(object sender, System.EventArgs e)
{
      this.Controls.Add(MiControl);
      MiControl.Show();
}

El resultado será el siguiente (Ver Figura 2):

Figura 2. Volver al texto.

Creando un componente con diseñador

Al contrario que en los controles de .NET Framework, Visual Studio .NET no soporta automáticamente un diseñador para los controles de Compact Framework, en el resto de este artículo veremos cómo realizar dicha tarea. Como ejemplo se ha creado un control, SelectDirectoryControl, a través del cual podremos seleccionar de una forma rápida un directorio del cliente PocketPC.

Crearemos una solución que contendrá los siguientes proyectos:

El proyecto SelectDirectoryControl.Design simplemente ejecutará un comando de compilación para generar el diseñador de nuestro control. Se define en la constante de compilación NETCFDESIGNTIME, la cual nos permitirá establecer propiedades de diseño para nuestro control. En nuestro ejemplo tenemos:

#if NETCFDESIGNTIME
 
            [System.ComponentModel.Browsable(true)]
            [System.ComponentModel.Category("Appearance")]
            [System.ComponentModel.Description("Establece un valor que indica si el control se minimiza o se
 cierra")]
            [System.ComponentModel.DefaultValue(true)]
 
#endif
 
            public bool Minimize
            {
                  get
                  {
                        return this._abMinimize;
                  }
                  set
                  {
                        this._abMinimize = value;
                  }
            }

Las opciones de compilación para el proyecto SelectDirectoryControl.Design son:

Relación entre los Assemblies en “Run-Time” y “Design-Time”

SelectDirectoryControl y SelectDirectoryControl.Design son dos assemblies no relacionadas montadas en el mismo código fuente. La assembly de “ Design-Time” es añadida al cuadro de herramientas de Visual Studio sin embargo Visual Studio no sabrá situar el assembly “Run-Time” por lo que se agrega el código siguiente a AssemblyInfo.cs.

#if NETCFDESIGNTIME
[assembly: System.CF.Design.RuntimeAssembly("SelectDirectoryControl, Version=1.0.0.0, Culture=neutral,
 PublicKeyToken=null")]
#endif

Incluyendo el atributo NETCFDESIGNTIME en el bloque de compilación, la cualidad RuntimeAssembly dice a Visual Studio que SelectDirectoryControl es un assembly real y que SelectDirectoryControl.Design solamente se utiliza en tiempo de diseño.

Instalando el Control

La instalación del SelectDirectoryControl únicamente requiere establecer los assemblies en la posición adecuada.

Para simplificar esta instalación se crea un proyecto de Setup en el que se crea un Archivo de instalación (.msi) para realizar esta tarea.

Añadiendo el Control a la Caja de Herramientas de Visual Studio .NET

Una vez que tenemos las assemblies en los directorios adecuados agregaremos el control a la barra de herramientas, para ello seguiremos los siguientes pasos (Ver Figura 3):

Figura 3. Volver al texto.

Añadir/Quitar Elementos en la Caja de Herramientas

En Examinar navegaremos hasta SelectDirectorControl.Design.dll y lo seleccionaremos (Ver Figura 4):

Figura 4. Volver al texto.

Ahora las propiedades que hemos establecido para el diseñador las podremos ver en la caja de propiedades del control (Ver Figura 5):

Figura 5. Volver al texto.

Conclusiones

Hemos visto que aunque la caja de herramientas de Visual Studio .NET para desarrollos en Compact Framework es posible que no nos ofrezca toda la riqueza de controles que desearíamos, la infraestructura sí nos proporciona toda la funcionalidad para el desarrollo de nuestros propios controles.

Unai Zorrilla Castro está radicado en Ourense, España; es Analista Programador de soluciones .NET especializado en aplicaciones C# y actualmente se encarga del desarrollo de componentes y herramientas .net orientadas al desarrollo de aplicaciones para la gestión y manejo de comunicaciones (IVR, FOIP, VOIP, TTS).