Featured Posts

Hola Windows Phone 7 Series El día de hoy, en el Mix10, se anunció la plataforma de desarrollo para el Windows Phone 7 series (de aquí en adelante WP7). Si bien desde hace varios días corría la noticia, el anuncio oficial genera...

Readmore

RIA Services en práctica Parte I – Personalizando... WCF RIA Services es una excelente herramienta que podemos utilizar en Silverlight para manejar nuestro acceso a datos. Si aún no te has introducido en el tema, te recomiendo echar un vistazo a la serie...

Readmore

El programa WebSite Spark Hace unas horas Scott Gu anunció el WebSite Spark. Este programa está diseñado para apoyar a desarrolladores y diseñadores a obtener software y recursos de Microsoft sin costo alguno durante tres años....

Readmore

  • Prev
  • Next

Silverlight Toolkit: Calendar

Posted on : 23-07-2009 | By : Arturo Molina | In : Silverlight

Tags: ,

1

Muy bien, el primer control en nuestra lista es el Calendar. Este control nos permite darle al usuario una forma visual de seleccionar una fecha.

Este control forma parte del Silverlight SDK, pero podemos tener acceso al código fuente al instalar el Toolkit. Lo primero que debemos hacer es agregar a nuestro proyecto la referencia del nombre de espacio: System.Windows.Controls. Una vez hecho esto debemos de declarar la referencia dentro de nuestro XAML:

xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

Aquí una lista de las propiedades y eventos que nos interesan:

Propiedades:

  • BlackoutDates – Los días en esta colección aparecerán tachados y no podrán ser seleccionados.
  • DisplayDate – Indica una fecha que será visible al momento de desplegarse, sin importar la fecha que esté seleccionada actualmente
  • DisplayDateStart y DisplayDateEnd – Indican el rango de fechas que serán visibles. Cualquier fecha fuera de este rango simplemente no aparecerá en el calendario.
  • DisplayMode – Modo en que empieza el calendario
    • Month – Despliega un mes con todos sus días
    • Year – Despliega el año con todos sus meses
    • Decade – Despliega la década con todos sus años
  • FirstDateOfWeek – Primer día de la semana en el calendario (Sunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday)
  • IsTodayHighlighted – Indica si queremos que el día actual esté resaltado (True/False)
  • SelectedDate – Última fecha seleccionada
  • SelectedDates – Colección de fechas seleccionadas actualmente
    • SelectionMode – Modo de selección de fechas:
    • MultipleRange – Varias fechas salteadas
    • None – No se puede seleccionar ninguna fecha
    • SingleDate – Una sola fecha es seleccionable
    • SingleRange – Un rango de fechas contiguas

Eventos:

  • DisplayDateChanged – Dependiendo del DisplayMode actual, se dispara cuando cambiamos de mes, año ó década.
  • DisplayModeChanged – Se dispara cuando cambiamos el DisplayMode
  • SelectedDatesChanged – Se dispara cuando se cambia de fecha(s)seleccionada(s)

En su forma más sencilla, podemos agregar el calendario con tan solo escribir:

<controls:Calendar x:Name="Calendario" />

Así obtenemos un calendario en modo Mes, con la fecha del día de hoy seleccionada, la opción de elegir una sola fecha a la vez, que muestra todas las fechas y en el que todas las fechas son seleccionables.

La propiedad BlackoutDates es de tipo CalendarBlackoutDatesCollection nos permite añadir o remover fechas o rangos de fechas no disponibles como cualquier otra ObservableCollection pero además nos permite agregar todas las fechas anteriores al día actual de una manera muy sencilla:

calendario.BlackoutDates.AddDatesInPast();

Vamos a ver un ejemplo sencillo en donde podemos ver las fechas elegidas actualmente en un calendario (noten como las fechas en XAML se escriben en formato MM/DD/AA):

<UserControl x:Class="CalendarDemo.MainPage"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

             mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Background="Transparent">

  <StackPanel x:Name="LayoutRoot">

        <TextBlock x:Name="fechasSeleccionadas" HorizontalAlignment="Center" />

        <controls:Calendar x:Name="calendario"

                           FirstDayOfWeek="Monday"

                           DisplayDate="7/1/2009"

                           DisplayDateStart="1/1/1995"

                           DisplayDateEnd="12/31/2015"

                           DisplayMode="Month"

                           IsTodayHighlighted="True"

                           SelectionMode="MultipleRange"

                           />

    </StackPanel>

</UserControl>

public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

            calendario.BlackoutDates.AddDatesInPast();

            calendario.SelectedDatesChanged +=

                new EventHandler<SelectionChangedEventArgs>(calendario_SelectedDatesChanged);

        }

        void calendario_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)

        {

            fechasSeleccionadas.Text = "Fechas seleccionadas: ";

            foreach (DateTime fecha in calendario.SelectedDates)

            {

                fechasSeleccionadas.Text += fecha.ToShortDateString() + " ";

            }

        }

    }

Otro punto a notar es que la clase SelectionChangedEventArgs nos permite incluye las colecciones AddedItems y RemovedItems que contiene las fechas que fueron añadidas y removidas al momento de disparse ese evento.

Pueden ver el ejemplo en línea aquí y pueden descargarse el proyecto aquí.

  • Share/Bookmark

Comments (1)

[...] Silverlight Toolkit: Calendar Muy bien, el primer control en nuestra lista es el Calendar. Este control nos permite darle al usuario una forma visual de seleccionar una fecha. Este control forma parte del Silverlight SDK, pero podemos… [...]

Write a comment