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:

 

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
               assembly=Microsoft.Phone.Controls.Toolkit"

 

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:

 

<Rectangle Width="100"
           Height="100"
           Fill="Red">
  <toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
      <toolkit:MenuItem Header="este es el elemento 1"
                        Click="MenuItem_Click" />
      <toolkit:MenuItem Header="este es el elemento 2"
                        Click="MenuItem_Click" />
      <toolkit:MenuItem Header="este es el elemento 3"
                        Click="MenuItem_Click" />
    </toolkit:ContextMenu>
  </toolkit:ContextMenuService.ContextMenu>
</Rectangle>

 

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

 

<Rectangle Width="100"
           Height="100"
           Fill="Blue">
  <toolkit:GestureService.GestureListener>
    <toolkit:GestureListener DoubleTap="GL_DoubleTap"
                             Tap="GL_Tap"
                             Hold="GL_Hold"
                             DragStarted="GL_DragStarted"
                             DragDelta="GL_DragDelta"
                             DragCompleted="GL_DragCompleted"
                             Flick="GL_Flick"
                             PinchStarted="GL_PinchStarted"
                             PinchDelta="GL_PinchDelta"
                             PinchCompleted="GL_PinchCompleted"
                             />
  </toolkit:GestureService.GestureListener>
</Rectangle>

 

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:

 

<toolkit:ToggleSwitch Header="Actualizaciones automáticas" />

 

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

 

<toolkit:ToggleSwitch Header="12:02 AM">
  <toolkit:ToggleSwitch.HeaderTemplate>
    <DataTemplate>
      <ContentControl Content="Binding"
              Foreground="{StaticResource PhoneForegroundBrush}"
              FontSize="{StaticResource PhoneFontSizeLarge}" />
    </DataTemplate>
  </toolkit:ToggleSwitch.HeaderTemplate>
  <toolkit:ToggleSwitch.ContentTemplate>
    <DataTemplate>
      <StackPanel>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Alarma: "
               FontSize="{StaticResource PhoneFontSizeSmall}" />
          <ContentControl HorizontalAlignment="Left"
                   FontSize="{StaticResource PhoneFontSizeSmall}"
                   Content="{Binding}" />
       </StackPanel>
       <TextBlock Text="dias entre semana"
                FontSize="{StaticResource PhoneFontSizeSmall}"
                Foreground="{StaticResource PhoneSubtleBrush}" />
      </StackPanel>
    </DataTemplate>
  </toolkit:ToggleSwitch.ContentTemplate>
</toolkit:ToggleSwitch>

 

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.

 

<toolkit:WrapPanel>
  <Button Width="75" Height="75" Content="1" />
  <Button Width="75" Height="75" Content="2" />
  <Button Width="75" Height="75" Content="3" />
  <Button Width="75" Height="75" Content="4" />
  <Button Width="75" Height="75" Content="5" />
  <Button Width="75" Height="75" Content="6" />
  <Button Width="75" Height="75" Content="7" />
  <Button Width="75" Height="75" Content="8" />
  <Button Width="75" Height="75" Content="9" />
  <Button Width="75" Height="75" Content="10" />
  <Button Width="75" Height="75" Content="11" />
  <Button Width="75" Height="75" Content="12" />
</toolkit:WrapPanel>

 

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