Custom Control II

En el artículo anterior Custom Control I ya vimos como empezar a crear un control compuesto y de que clases teníamos que heredar para dotarle de toda la funcionalidad necesaria.

Ahora seguiremos creando las propiedades para que el usuario pueda personalizar la apariencia entre otras cosas.

La primera propiedad que veremos será la de poder elegir el Nº de calendarios que queremos ver en el control.

[Bindable(true)]
[Category("Datos")]
[DefaultValue(1)]
[Description(" Número de Calendarios a mostrar")]
public int Calendarios
{
     get
     {
         object s = ViewState["Calendarios"];
         return ((s == null) ? 1 : (int)s);
     }
     set
     {
         ViewState["Calendarios"] = value;
     }
}

Como podéis comprobar es una propiedad muy simple que mantiene la información entre postbacks en el estado del control, por defecto siempre mostrará 1 calendario. Siguiendo esta técnica podremos crear otras propiedades como:

  • Nº de Filas int: Nº de filas en los que se repartirán los calendarios.
  • Fecha inicial DateTime: Fecha inicial para calcular el mes inicial del control.
  • Fechas Seleccionadas list<DateTime>: Lista de Datetimes con las fechas seleccionadas en los Calendarios.

Como se verán estas propiedades en tiempo de diseño.

Siguiendo con las propiedades crearemos otro grupo para el formato del control.

[Bindable(true)]
[Category("Formato")]
[DefaultValue(typeof(System.Drawing.Color), "Green")]
[Localizable(true)]
[Description("Color de Fondo de la fecha seleccionada")]
public System.Drawing.Color ColorFondo
{
    get
    {
        object s = ViewState["ColorFondo"];
        return ((s == null) ?
          System.Drawing.Color.Green :
            (System.Drawing.Color)s);
    }

    set
    {
        ViewState["ColorFondo"] = value;
    }
}
  • Titulo string: Titulo que se mostrará en la cabecera del control.
  • TxTSiguiente string: Texto para mostrar el link Siguiente.
  • ImgSiguiente string: Si preferimos podemos mostrar una imagen como botón Siguiente.
  • TxtAnterior string: Texto para mostrar el link Siguiente.
  • ImgAnterior string: Si preferimos podemos mostrar una imagen como botón Siguiente.
  • ColorFondo Color: Color de fondo de la fecha seleccionada por el usuario.
  • ColorTexto Color: Color del texto de la fecha seleccionada por el usuario.

 

Como podéis comprobar es muy fácil crear nuestras propiedades que son soportadas en tiempo de diseño, el entorno nos permite trabajar con algunos tipos como Colors y enumeraciones.

Para terminar con las propiedades de nuestro control porque no le damos la posibilidad de personalizar los estilos!!.

private TableItemStyle selectedDayStyle;

[Category("Css")]
[DefaultValue("")]
[Description("Clase CSS día seleccionado.")]
[PersistenceMode(PersistenceMode.InnerProperty)]
public TableItemStyle SelectedDayStyle
{
    get
    {
        if (selectedDayStyle == null)
        selectedDayStyle = new TableItemStyle();

        if (IsTrackingViewState)
        ((IStateManager)selectedDayStyle).TrackViewState();

        return selectedDayStyle;
    }
}

Para esta propiedad utilizamos la Clase TableItemStyle que representa las propiedades de estilo de un elemento de un control que se representa como un TableRow o un TableCell.

Para dotar de todos los estilos necesarios a nuestro control crearemos estas propiedades:

  • OtherMonthDayStyleEstilo de los días que no pertenecen al mes actual.
  • SelectedDayStyle: Estilo de los días seleccionados.
  • WeekendDayStyle: Estilo para los días de fin de semana.
  • TodayDayStyle: Estilo para el día de hoy.
  • DayHeaderStyle: Estilo para los nombres de los días de la semana.
  • SelectorStyle: Estilo para los selectores de semana y de mes.
  • DayStyle: Estilo para los días del calendario.
  • TitleStyle: Estilo para la cabecera del control.

Bueno, ya tenemos todos los controles secundarios que necesitamos y las propiedades para el buen funcionamiento del control, pero aún nos quedan un par de cosas que podemos hacer para que nuestro calendario funcione al 100%.

Por eso lo dejaremos para el siguiente artículo, espero que os haya gustado.

User Control I    –    User Control II  –  User Control III

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s