Archive

Posts Tagged ‘Silverlight Toolkit’

DataGrid, ColumnSeries y un toque de MVVM

March 17th, 2011 12 comments

image

Recibí una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los datos de un DataGrid. La respuesta es ¡Con DataBinding!

Muchas gracias.

Ok ok, la explicación larga. Primero vamos a hacer un modelo para datos de prueba:

 

Este modelo cuenta con dos propiedades (Name y Value) e implementa INotifyPropertyChanged para poder manejar el Binding de forma correcta.

Ahora creamos el ViewModel. En una aplicación real deberías obtener dichos valores desde un webservice en tu servidor, pero para efectos prácticos, aquí inicializo una lista de objetos SampleData (nuestro modelo) en el constructor del ViewModel.

 

Finalmente creamos nuestra vista en XAML:

 

En la línea 13 creamos una instancia de nuestro ViewModel y la agregamos a nuestros recursos locales. Después, en la línea 17 asignamos dicho recurso al DataContext de nuestro LayoutRoot (en este caso el Grid que contiene todos los elementos de la vista). En la línea 30 definimos la propiedad Samples de nuestro ViewModel como la fuente de datos del DataGrid. En la línea 40 definimos el binding a la propiedad Value con un slider para modificar los datos fácilmente. Las líneas 55 y 57 se encargan de hacer lo mismo para la gráfica de barras.

Nótese como los bindings se definien con el Mode=TwoWay para actualizar el ViewModel “de ida y vuelta”, es decir, que los cambios en la vista se reflejan en el ViewModel y viceversa.

Puedes ver el ejemplo corriendo aquí. Y puedes descargar el código aquí.

UPDATE: De pura casualidad encontré mi compañera Araceli Medina encontró un bug en el Silverlight Toolkit mientras jugaba con el demo. Estaba jugando con mover sliders y cambiar el tamaño de la ventana cuando noté que esto pasaba:

image_thumb[2]

El borde inferior de los rectangulos no se quedaba en la parte de abajo de la gráfica. No estoy seguro a qué se deba esto pero si se vuelve a cambiar el tamaño de la ventana el problema se corrije. El bug fue dado de alta en codeplex.

[Artículo originalmente publicado en JAMolina.com]

31 días de Windows Phone | Día #21: El juego de herramientas de Silverlight para Windows Phone

December 21st, 2010 No comments

Codeplex hace disponible un proyecto llamado Juego de Herramientas de Silverlight para Windows Phone, que provee controles adicionales con funciones muy útiles. Jeff Blankenburg describe cinco de esos controles.

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #21: Silverlight Toolkit for Windows Phone por Jeff Blankenburg publicado el 21 de octubre del 2010

 

Este artículo es el Día #21 de una serie llamada los 31 días de Windows Phone.

Tras discutir el control Map ayer, se me ocurrió que tal vez no estén enterados que hay una TONELADA de controles disponibles en el juego de herramientas de Silverlight. El artículo de hoy trata específicamente sobre el Juego de herramientas de Silverlight para Windows Phone, pero échenle también un vistazo a la demostración del Juego de herramientas para Silverlight 3.

 

¿Qué es un juego de herramientas?

El juego de herramientas original para Silverlight 3 contenía una pila de controles adicionales para usar en nuestros proyectos. Iban desde acordeones y seleccionadores de fechas, hasta campos de autocompletado. Lo que es súper pura vida es que ese juego de herramientas es cien por ciento compatible con nuestras aplicaciones de Windows Phone basadas en Silverlight.

El Juego de herramientas de Silverlight para Windows Phone es un concepto similar, pero incluye solamente controles dedicados a aplicaciones de Windows Phone. Incluye:

  • ContextMenu
  • DatePicker y TimePicker
  • GestureListener
  • ToggleSwitch
  • WrapPanel

Voy a dedicar el resto del artículo a mostrar ejemplos de cada uno de los controles, pero los animo a examinar también el Juego de Herramientas para Silverlight 3. Tiene gran cantidad de controles, ejemplos y código que pueden usar en sus proyectos. Más adelante en la serie voy a cubrir los controles para gráficas de ese paquete, pero si son impacientes, pueden experimentar con ellos desde ahora.

 

Control ContextMenu

Si han anclado algo a la página de inicio entonces ya han viso el ContextMenu en acción. Así se ve cuando trato de fijar Internet Explorer al menú de inicio en el emulador (para ver el menú hay que tocar y sostener el toque en la pantalla):

 

Menú de contexto en el emulador.

 

Para usar este menú necesitamos el control ContextMenu del Juego de herramientas de Silverlight. Tal como en otros casos, hay que añadir el ensamblaje del juego de herramientas al proyecto. Aquí lo pueden ver:

 

Agrgegando la referencia del ensamblaje del juego de herramientas.

 

Luego ternemos que añadir el espacio de nombres al contexto de la página XAML. Para eso, agreguen lo siguiente al elemento <phone:PhoneApplicationPage> al comienzo del archivo:

 

 

Ya estamos listos para empezar. Usaremos un control para el que posiblemente queramos ofrecer más opciones: el rectángulo (Rectangle). Tal vez tenemos una figura, imagen, ícono, o así por el estilo, con el que nuestros usuarios necesiten interaccionar. Supongamos que hay más de una operación para este rectángulo (es decir, requiriendo un menú de clic derecho). Si añadimos un ContextMenu al rectángulo podemos abrir un menú cuando el usuario sostiene el toque en ese objeto. Esto incluye CUALQUIER elemento en XAML, así que puede aplicar incluso al fondo de la aplicación, a una porción de un Panorama, o hasta un botón. Aquí muestro cómo usarlo en XAML:

 

 

Al añadir un ContextMenu al control lo que hacemos básicamente es asociarlo con el ContextMenuService. Se puede ver que cada elemento tiene un evento Click para conectarlo al código. Esta es una captura de pantalla de mi ContextMenu:

 

Menú de click derecho usando el control ContextMenu.

 

Si prueban el código en el emulador verán que el contenido de la pantalla disminuye un poco de tamaño, como pasando a segundo plano, haciendo que el menú  sea el centro de atención. En caso que no les guste eso, se puede desactivar usando el atributo IsZoomEnabled. Si lo configuran como falso, la animación no ocurrirá.

Así de simple es implementar el equivalente del clic derecho en nuestros elementos XAML. Lo más probable es que este sea el control más usado (a menos que GestureService se vuelva más popular).

 

Controles DatePicker y TimePicker

Estos dos controles fueron un reto para mí mientras preparaba este artículo. Son TAN simples de usar que no podía encontrar qué es lo que estaba haciendo mal. Al final, lo que pasó es que hay un poquito de magia envuelta. Les explico en un momento. Primero, veamos cómo incluirlos en la página. Esa es la parte fácil:

 

Seleccionadores de fecha y hora.

 

Y ahora paso a los desconcertantes problemas que tuve. Como notarán en la ilustración arriba, los seleccionadores tienen una barra de aplicaciones (ApplicationBar) con dos íconos sin imagen. Luego de darme de cabezazos contra el escritorio por varios minutos, logré ver que eran botones para Done y Cancel. (Es posible también descubrir esto haciendo un clic en los puntos suspensivos (…) y haciendo que la barra enseñe las etiquetas de texto.)

Para que los íconos tengan imágenes se requiere seguir la siguientes instrucciones al pie de la letra:

  1. Agreguen una carpeta a la raíz del proyecto llamada “Toolkit.Content”
  2. Agreguen dos imágenes a la carpeta con los siguientes nombres:
    1. Application.Bar.Cancel.png (descárguenlo acá)
    2. Application.Bar.Check.png (descárguenlo acá)
  3. Asegúrense de que la acción de compilación de las imágenes es “Contenido”. Si no lo han hecho antes, se consigue con un clic en la imagen y haciendo el cambio en la pestaña Propiedades.

 

La imagen debe tener una acción de complación de Contenido.

 

Tras seguir las instrucciones, ¡TRABAJA COMO POR MAGIA! Quisiera que todo esto fuera hecho automáticamente, pero por lo menos ya sabemos cómo. Y saber algo es la mitad de la batalla, ¿no es cierto?

(MD: según el código fuente del control, las imágenes no son incluidas automáticamente por asuntos de licencias.)

Veámoslos ya arreglados:

 

Seleccionadores con los íconos en la barra de aplicaciones ya arreglados.

 

Control GestureListener

Puede que durante todo este tiempo en en los 31 días de Windows Phone se hayan estado preguntando cuándo iban a aprender cómo interpretar gestos del usuario en sus aplicaciones. ¡Al fin, hoy es el día! (CLARIFICACIÓN: esta es sólo “una” forma de hacerlo. Hay muchas otras maneras de interpretar gestos, pero esta es la más fácil siendo, para los que han venido leyendo, el camino seguido por esta serie. Siempre buscando la forma más fácil de lograr algo en el Windows Phone, conscientes de que a veces puede que no sea la práctica recomendada para uso frecuente.)

Bueno, ya con eso claro, examinemos el GestureListener. Tal como con el ContextMenu, vamos a crear un GestureListener, asociarlo con el GestureService, y crear controladores para los gestos en los que estamos interesados. Hay que tener en mente que es a nivel de elemento XAML, así que los gestos son reconocidos sólo en el control al que el elemento es aplicado. Los gestos que el GestureListener entiende son:

  • Toque (tap)
  • Doble toque (double tap)
  • Sostener (hold)
  • Hojeo (flick)
  • Pellizco o pinzado (pinch)
  • Arrastre y suelte (drag and drop)

Todos están implementados de manera que es casi DEMASIADO fácil usarlos. El pinzado y el arrastre conllevan algunos detalles técnicos adicionales (básicamente el delta entre las posiciones de inicio y final). Veamos el XAML (usado en otro rectángulo):

 

 

Como pueden ver sólo tengo que declarar los gestos que deseo reconocer y asignarles controladores de eventos. Así puedo fácilmente pasarlos al código subyacente. La demostración del juego de herramientas en línea tiene un excelente ejemplo de cómo interpretar cada evento.

 

Control ToggleSwitch

Puede que ya hayan visto este control si han intentado cambiar la configuración de la fecha y hora en el emulador. Les muestro un ejemplo:

 

El commutador (ToggleSwitch) en la configuración de fecha del sistema.

 

Colocarlo en una página es simple:

 

 

En la imagen anterior donde dice “Configurar automáticamente” diría “Actualizaciones automáticas” con este ejemplo. Sin ningún otro cambio, en vez de Activado/Desactivado, el texto es On/Off, pero cambiarlo es fácil.  El control tiene una plantilla para el título (HeaderTemplate) y otra para el contenido (ContentTemplate) con lo que podemos personalizarlo. También tiene eventos Checked y Unchecked que son disparados al manipular el conmutador. Este es un ejemplo de cómo usar esos atributos (y del control enlazado a una fuente de datos):

 

 

Finalmente, tenemos el WrapPanel. Si bien su propósito parece obvio, brilla por su ausencia en la lista de controles estándar del juego original.

 

Control WrapPanel

Un WrapPanel es básicamente un StackPanel con algo más de versatilidad. Hace algunos meses estaba diseñando un juego y necesitaba una pantalla con 30 botones. Como fue antes de que el WrapPanel estuviera disponible, tuve que crear una cuadrícula en tiempo de ejecución y añadir botones en cada celda. Demasiado trabajo tan sólo para colocar 30 botones en un arreglo de 5×6. Ese es exactamente el problema resuelto por el WrapPanel.

En ejemplo siguiente creo un WrapPanel con 12 botones.

 

 

En la captura abajo verán que el panel decide de manera dinámica cómo ajustar las filas de manera que se alineen correctamente. No hay traslape (similar al StrackPanel), y tampoco tiene el problema de que el tamaño del contenido arruine la distribución de los componentes:

 

EL WrapPanel automáticamente se encarga de la distribución de sus componentes. 

 

En el código de ejemplo también se nota que he asociado controladores a los eventos de los botones #1 y #2. Lo que hacen es aumentar o reducir el tamaño de los botones. Experimentando con este ejemplo se muestra cómo el WrapPanel se encarga de mantener la correcta distribución de los componentes, aun en tiempo de ejecución. La imagen abajo es del mismo ejemplo pero con los botones de tamaño mucho mayor:

 

Si los componentes cambian de tamaño, el WrapPanel los redistribuye.

 

¡Y eso es todo! Cubrimos cinco de los nuevos controles disponibles en el Juego de herramientas de Silverlight para Windows Phone. Asegúrense de descargarlo hoy porque de fijo los van a necesitar muy pronto.

 

Descargando el código

En este ejemplo encontrarán una muestra simple de cada control en el juego de herramientas. En el día #31 vamos a cubrir el Juego de herramientas para Silverlight 3 y cómo usar los controles de gráficas que contiene en nuestra aplicaciones de WP7.

 

Jeff Blenkenburg

 

Ocultando las líneas del control Chart

December 28th, 2009 12 comments

[Post original]

El control Chart, incluído en el Silverlight Toolkit, nos permite mostrar datos de forma gráfica. Recientemente mi amigo Jorge Levy tuvo la necesidad de hacer una gráfica de barras sin las líneas de fondo mostradas por default:

Gráfica de barras con líneas horizontales

Resultó que esto es algo muy sencillo de hacer, pero no tan obvio:

Aquí podemos observar que de la línea 3 a la 6 definimos la propiedad Axes de nuestro control Chart. Estamos indicando que tendremos un LinearAxis con orientación “Y” (las líneas muestran los valores para los datos en dicho eje) y definimos ShowGridLines como falso para evitar que aparezcan. El resultado es:

Gráfica de barras sin líneas horizontales

Categories: General Tags: ,

Webcast: Silverlight Toolkit Parte 2

November 4th, 2009 2 comments

LogoLigaSilverlightLos invito a todos al Webcast que se llevará a cabo el día de mañana a las 6:30 de la tarde. Este Webcast continuará con el tema del Silverlight Toolkit, esta  vez conoceremos a detalle controles que nos dan una gran funcionalidad con muy poco código: El DataGrid y el DataForm. También tocaremos un poco el tema de la nueva versión recién liberada el pasado 19 de octubre, específicamente, la funcionalidad Drag and Drop en el DataGrid.

Tema: Silverlight Toolkit Parte II

Fecha: 05 de Noviembre 2009

Hora: 6:30 – 7:30PM (-6 GMT)

Orador: Arturo Molina

Regístrate aquí.

Habilitar Assembly Caching en Silverlight 3

October 22nd, 2009 No comments

Una de las muchas nuevas caracteristicas de Silverlight 3, es la posibiildad de habilitar la caracteristica Assembly Caching, la cual nos permite indicarle al navegador que cargue los ensamblados que nuesta aplicación necesita(archivo .xap) bajo demanda y no todos al cargar la página, como funcionaba en la versión 2.0.

Para lograr esto, solo debe seleccionarse la opción “Reduce XAP size by using appication library caching”, en el apartado de propiedades de nuestro proyecto Silverlight. También debemos notar como ahora se crean archivos con extensión.zip para cada uno de los ensamblados que la aplicación ocupa y que serán descargados bajo demanda.  Como se puede observar a continuación:

Cuando la opción no es seleccionada, el archivo resultante xap, es más grande que cuando la opción es seleccionada. Como se puede ver en las siguientes imágenes comparativas.

Opción NO habilitada

Opción habilitada

Pongamos especial atención en el archivo AppManifest.xaml y la sección Deployment.ExternalPart, en la cual se indica cuales son los ensamblados que nuestra aplicación referencia y que serán descargados cuando así se requiera, estos son los ensamblados “cacheados”. Sin embargo noten que hay algunos ensamblados que no son marcados para ser cacheados, como: CachedAssembly.dll o los ensamblados del silverlight toolkit.

Para que esto suceda se debe crear el archivo XXXX.extmap.xml. Y después de crearlo recompilar el proyecto, y automáticamente se creara el archivo XXXX.zip, el cual será copiado a la carpeta ClientBin de la aplicación ASP.Net.  Para facilitar un poco esto, puedes ocupar la utilería Emm, la cual crea automáticamente el archivo XXXX.extmap.xml a partir de tu ensamblado ejecutando un comando como el siguiente:

Nota, para el correcto funcionamiento de esta utilería, el ensamblado debe tener un SN (strong name)

Además también se puede usar para los ensamblados del Silverlight Toolkit, de esta forma solo se descargaría en primera instancia nuestro ensamblado y todos los demás ensambados seria descargados “on demand”. Ejemplo:

En resumen, esta característica es muy poderosa para el mejor desempeño de tus aplicaciones silverlight.

Descargar solución de Ejemplo

Happy Coding!

Silverlight Toolkit Octubre 2009

October 20th, 2009 2 comments
Ya está disponible la última actualización del silverlight toolkit de Octubre del 2009, y como cada release trae nuevas y llamativas funcionalidades, y esta no se podía quedar atrás. Las nuevas características, por mencionar algunas:

  • Soporte para Visual Studio 2010, que por cierto se acaba de liberar el día de ayer la beta 2.
  • Todas las clases base del namespace Data Visualization han sido “unsealed”, es decir, ya es posible heredar de ellas y así extender su funcionalidad.
  • La interface ISeries ahora es la interface base de todos los tipos de series para las graficas.
  • Se ha agregado el assembly System.Windows.Controls.Data.Toolkit y el assembly System.Reactive
  • Soporte para Drag and Drop para elementos tales ListBox, TreeView, DataGrid y DataPointSeries.

A continuación una pequeña demostración de esta última característica, realmente es muy fácil su uso y es mucho el valor que agrega a nuestros desarrollos.

Aquí algunos recursos de donde pueden profundizar en el tema:
Silverlight Toolkit de Octubre 2009
Drag and Drop Support

De aquí pueden descargar el código completo.

Happy Coding!

Categories: General Tags:

Ya está disponible Silverlight Toolkit October 2009

October 20th, 2009 No comments

Ya esta disponible para descargar la versión de Octubre 2009 de Silverlight Toolkit, la colección de recursos y herramientas para Silverlight 3.

Como temas importantes trae soporte para Drag & Drop para ListBox, DataGrid, Charts, etc, además de traer soporte para Visual Studio 2010 con una interfaz mucho más amigable.

SI desean leer todos los cambios y mejoras pueden hacerlo aquí.

Pueden descargarlo aquí.

Categories: General Tags:

Próximos eventos de La Liga Silverlight

October 6th, 2009 No comments

La Liga Silverlight - Logo

Les invito a todos y a todas a las próximas reuniones virtuales que tendrá La Liga Silverlight: la primera comunidad MSDN en español acerca de Silverlight y tecnologías relacionadas:

Tema: Comportamientos

Fecha: 20 de Octubre 2009

Orador: Rodrigo Díaz Concha

Registro

Tema: Silverlight Toolkit Parte II

Fecha: 05 de Noviembre 2009

Orador: Arturo Molina

Registro

Tema: SketchFlow

Fecha: 19 de Noviembre 2009

Orador: Arturo Molina

Registro

Tema: RIA Services Parte I

Fecha: 02 de Diciembre 2009 09 de Diciembre 2009

Orador: Jorge Levy

Registro

Tema: RIA Services Parte II

Fecha: 16 de Diciembre 2009

Orador: Jorge Levy

Registro

Por favor regístrense en las ligas arriba indicadas.  Nos dará mucho gusto que nos acompañen!

¡Salu2!

Silverlight Toolkit: GridSplitter

August 10th, 2009 No comments

Seguimos con esta serie de posts acerca del Silverlight Toolkit. En esta ocasión veremos el GridSplitter, un control muy útil al momento de diseñar interfaces personalizables en nuestra aplicación de Silverlight.

Propiedades

  • PreviewStyle – Maneja el estilo usado para la vista previa de los cambios
  • ShowsPreview – Indica si se mostrará una vista previa a los cambios

El GridSplitter se coloca en cualquier celda de un Grid y dependiendo de los valores que asignemos a sus propiedades HorizontalAlignment y VerticalAlignment es la forma en que se comportará:

HorizontalAlignment VerticalAlignment Resultado
Stretch Otra Redimensiona filas
Otra Stretch Redimensiona columnas
Stretch Stretch Redimensiona columnas si ActualHeight es mayor o igual que ActualWidth. De otra forma, redimensiona filas.

 

Para usar este control necesitamos por lo menos dos controles Grid. En este ejemplo vamos a construir un layout de una aplicación con sus paneles de tamaño personalizable:

image

En este caso, solo usaremos ShowsPreview en el panel inferior del centro (el amarillo). Como siempre, debemos comenzar por agregar la referencia de System.Windows.Controls a nuestro proyecto y luego la agregamos a nuestro MainPage.xaml:

Después procedemos a definir nuestras columnas y filas para crear el layout mostrado en la imagen de arriba:


 

Podemos ver como el primer GridSplitter se coloca en la primera celda del grid principal, ahí le indicamos que se alinea a la derecha horizontalmente y que abarque todo su espacio verticalmente, lo que provoca que el usuario pueda redimensionar el espacio de la columna de la izquierda y la central.

Lo mismo pasa con el resto de los separadores. Un caso a notar es el del último GridSplitter, donde usamos ShowsPreview. Cuando tratamos de redimensionar el panel amarillo, observamos una línea horizontal que actúa como vista previa, en vez de cambiarlo en tiempo real como el comportamiento de el resto de los separadores.

Como podemos ver, este control es una gran herramienta para proveer al usuario final una interfaz personalizable de manera sencilla.

Pueden ver el demo en línea aquí o descargarse el proyecto aquí.

Silverlight Toolkit: DatePicker

July 28th, 2009 4 comments

DatePicker es un control conformado de un campo de texto y un calendario. Esto le da al usuario final la flexibilidad de escribir la fecha en el campo de texto o seleccionarla desde un calendario como el del post pasado. De hecho, muchas de las propiedades del DatePicker son para manejar el calendario de la misma manera en que manejamos el control Calendar.

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.
  • FirstDateOfWeek – Primer día de la semana en el calendario (Sunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday)
  • IsDropDownOpen – Indica si el calendario esta abierto
  • IsTodayHighlighted – Indica si queremos que el día actual esté resaltado (True/False)
  • SelectedDate – Fecha seleccionada
  • SelectedDateFormat – Formato de la fecha
    • Short – 27/07/2009
    • Long - lunes, 27 de julio de 2009
  • SelectionBackground – El color de fondo de la fecha seleccionada en el campo de texto
  • Text – Contenido del campo de text

Eventos:

  • CalendarClosed – Se dispara cuando el calendario se cierra
  • CalendarOpened – Se dispara cuando el calendario se abre
  • DateValidationError – Ocurre cuando el valor insertado en el campo de texto no puede ser interpretado como una fecha
  • SelectedDatesChanged – Se dispara cuando se cambia de fecha(s)seleccionada(s)

Nuevamente, debemos comenzar por agregar la referencia System.Windows.Controls a nuestro proyecto. Además de ponerla en nuestro MainPage.xaml:

Para ejemplificar las distintas propiedades y eventos del DatePicker, vamos a contruir un pequeño control que nos permita escoger dos fechas para reservar un boleto de avión. Primero, usamos Blend 3 para hace rápidamente una pequeña interfaz de usuario:

image

A continuación vamos a escribir toda lafuncionalidad en el archivo de código de nuestro control, en este caso, MainPage.cs. Vamos a bloquear las fechas anteriores al día actual:

Cuando se selecciona la fecha de Salida queremos asegurarnos de que la fecha de Regreso sea igual o mayor. Para esto, agregamos un delegado al evento SelectedDateChanged del DatePick de salida:

En dicho delegado reiniciamos el mensaje de error y las blackoutDates a los valores originales. Hacemos una validación para asegurarnos que si la fecha de Regreso ya había sido seleccionada y es menor a la nueva fecha de Salida, será reseteada a nulo. Agregamos a la colección BlackoutDates un rango de fechas entre el día actual y el día de Salida seleccionado menos uno (para no excluirlo). Nótese el uso de GetValueOrDefault() para la propiedad SelectedDate, esto es debido a que dicha propiedad es de tipo DateTime?, osea que es Nullable, y queremos asegurarnos de obtener un valor válido:

El siguiente paso es lidiar con fechas no válidas. Debido a que el usuario puede escribir cualquier cosa en el campo de texto, hay probabilidades de que la fecha escrita no pueda ser interpretada como fecha y por tanto debemos lidiar con ello. Agregamos los delegados de la siguiente manera:

Y lidiamos con errores así:

Finalmente, lidiamos con otros detalles como el evento del botón, limpiar errores, etcétera. El resultado final pueden verlo aquí y puden bajarse la solución aquí.

Dudas y comentarios, no duden en contactarme.

¡Saludos!

Silverlight Toolkit: Calendar

July 23rd, 2009 2 comments

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:


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:


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:


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















































































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

Categories: General Tags: ,

Recordatorio: Webcast: Silverlight 3 Toolkit

July 20th, 2009 No comments

image

Este post es para recordarles que el día de hoy 21 de Julio del 2009 a las 7pm será la siguiente reunión virtual de La Liga Silverlight en donde un servidor les platicará sobre algunos controles del Silverlight 3 Toolkit.

Pueden registrarse aquí.

¡Hasta pronto!

Categories: Eventos Tags: ,