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:

1
xmlns:controls="clr-namespace:<span style="color: #006080">System.Windows.Controls;</span>assembly=System<span style="color: #cc6633">.Windows</span><span style="color: #cc6633">.Controls</span>"

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:

1
<span style="color: #0000ff">&lt;</span><span style="color: #800000">controls:Calendar</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="Calendario"</span> <span style="color: #0000ff">/&gt;</span>

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:

1
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):

1
<span style="color: #0000ff">&lt;</span><span style="color: #800000">UserControl</span> <span style="color: #ff0000">x:Class</span><span style="color: #0000ff">="CalendarDemo.MainPage"</span>


1
<span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>


1
<span style="color: #ff0000">xmlns:x</span><span style="color: #0000ff">="http://schemas.microsoft.com/winfx/2006/xaml"</span>


1
<span style="color: #ff0000">xmlns:d</span><span style="color: #0000ff">="http://schemas.microsoft.com/expression/blend/2008"</span>


1
<span style="color: #ff0000">xmlns:mc</span><span style="color: #0000ff">="http://schemas.openxmlformats.org/markup-compatibility/2006"</span>


1
<span style="color: #ff0000">xmlns:controls</span><span style="color: #0000ff">="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"</span>


1
<span style="color: #ff0000">mc:Ignorable</span><span style="color: #0000ff">="d"</span> <span style="color: #ff0000">d:DesignWidth</span><span style="color: #0000ff">="640"</span> <span style="color: #ff0000">d:DesignHeight</span><span style="color: #0000ff">="480"</span> <span style="color: #ff0000">Background</span><span style="color: #0000ff">="Transparent"</span><span style="color: #0000ff">&gt;</span>


1
<span style="color: #0000ff">&lt;</span><span style="color: #800000">StackPanel</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="LayoutRoot"</span><span style="color: #0000ff">&gt;</span>


1
<span style="color: #0000ff">&lt;</span><span style="color: #800000">TextBlock</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="fechasSeleccionadas"</span> <span style="color: #ff0000">HorizontalAlignment</span><span style="color: #0000ff">="Center"</span> <span style="color: #0000ff">/&gt;</span>


1
<span style="color: #0000ff">&lt;</span><span style="color: #800000">controls:Calendar</span> <span style="color: #ff0000">x:Name</span><span style="color: #0000ff">="calendario"</span>


1
<span style="color: #ff0000">FirstDayOfWeek</span><span style="color: #0000ff">="Monday"</span>


1
<span style="color: #ff0000">DisplayDate</span><span style="color: #0000ff">="7/1/2009"</span>


1
<span style="color: #ff0000">DisplayDateStart</span><span style="color: #0000ff">="1/1/1995"</span>


1
<span style="color: #ff0000">DisplayDateEnd</span><span style="color: #0000ff">="12/31/2015"</span>


1
<span style="color: #ff0000">DisplayMode</span><span style="color: #0000ff">="Month"</span>


1
<span style="color: #ff0000">IsTodayHighlighted</span><span style="color: #0000ff">="True"</span>


1
<span style="color: #ff0000">SelectionMode</span><span style="color: #0000ff">="MultipleRange"</span>


1
<span style="color: #0000ff">/&gt;</span>


1
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">StackPanel</span><span style="color: #0000ff">&gt;</span>


1
<span style="color: #0000ff">&lt;/</span><span style="color: #800000">UserControl</span><span style="color: #0000ff">&gt;</span>

1
<span style="color: #0000ff">public</span> <span style="color: #0000ff">partial</span> <span style="color: #0000ff">class</span> MainPage : UserControl


1
{


1
<span style="color: #0000ff">public</span> MainPage()


1
{


1
InitializeComponent();


An error has occurred. Please try again later.


1
calendario.BlackoutDates.AddDatesInPast();


1
calendario.SelectedDatesChanged +=


1
<span style="color: #0000ff">new</span> EventHandler&lt;SelectionChangedEventArgs&gt;(calendario_SelectedDatesChanged);


1
}


An error has occurred. Please try again later.


1
<span style="color: #0000ff">void</span> calendario_SelectedDatesChanged(<span style="color: #0000ff">object</span> sender, SelectionChangedEventArgs e)


1
{


1
fechasSeleccionadas.Text = <span style="color: #006080">"Fechas seleccionadas: "</span>;


1
<span style="color: #0000ff">foreach</span> (DateTime fecha <span style="color: #0000ff">in</span> calendario.SelectedDates)


1
{


1
fechasSeleccionadas.Text += fecha.ToShortDateString() + <span style="color: #006080">" "</span>;


1
}


1
}


1
}

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í.