El SDK de Live nos permite hacer uso de Skydrive, los contactos y el calendario de Hotmail, podemos hacer uso del chat de Messenger y por supuesto autenticarnos en Live y acceder a algunos datos de nuestro perfil.

Bueno pues es esto último lo que voy a mostrar y posteriormente iré mostrando como hacer uso de los demás servicios. Para empezar vamos a descargar e instalar el SDK de Live a través de este link .

Una vez instalado abrimos Visual Studio y creamos un proyecto de Silverlight para Windows Phone y lo primero que tenemos que hacer es agregar las referencias a nuestro proyecto de Microsoft.Live y Microsoft.Live.Controls y añadir al ToolBox el componente que nos autentica en el servicio.

Antes de seguir construyendo el programa necesitamos un identificador para que la aplicación pueda acceder al servicio de Live, para eso vamos a ir al gestor de aplicaciones de Live Connect, donde tenemos que registrar el nombre de la aplicación, el idioma y si la aplicación que accede es movil o no. A cambio de esto obtenemos un identificador de cliente y un codigo secreto de cliente.

Ahora ya podemos añadir el componente que hemos agregado a la caja de herramientas, este componente simplifica la conexión con el servicio Connect de Live:

A continuación rellenamos el Client ID que hemos obtenido de registrar la aplicación en Live:

Podemos personalizar más cosas, una de ellas, la propiedad Scopes, esta propiedad nos permite definir el nivel de los permisos de acceso a nuestros datos que va a tener la aplicación.

Existen varios tipos de permisos según el servicio de Live que queramos utilizar pero como de momento estamos probando la autenticación y el acceso a los datos de nuestro perfil solamente tenemos que fijarnos en tres que son comunes a todos los servicios:

• wl.basic:  este permiso nos da acceso a los datos del usuario y también a su lista de contactos.
• wl.offline_access: como el anterior nos da acceso a la lectura y actualización de los datos del usuario. Si no lo usamos tenemos que iniciar sesión.
• wl.signin: inicio de sesión único, los usuarios quedan conectados para todos los servicios.

El que yo he utilizado es el básico como podéis ver en la imagen de arriba, es mas que suficiente para poder acceder a los datos del usuario.

Bueno pues ya solo queda construir la interfaz, es simplemente el botón de logueo y un par de textblocks para mostrar que estas conectando y otro para enseñar la info del usuario, quedaría de la siguiente manera:

El código en XAML sería el siguiente:

<phone:PhoneApplicationPage
    x:Class="DemoLive1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Live.Controls;assembly=Microsoft.Live.Controls">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Conectando con los servicios de Live" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="DemoLive" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <my:SignInButton Content="Button" Height="113" HorizontalAlignment="Left" Margin="102,29,0,0" Name="signInButton1" VerticalAlignment="Top" Width="264" TextType="SignIn" ClientId="000000004C07BBAD" Scopes="wl.basic" SessionChanged="signInButton1_SessionChanged" />
            <TextBlock Height="30" Name="txtStatus" Text="" Width="397" TextAlignment="Center" />
            <TextBlock Height="Auto" HorizontalAlignment="Left" Name="txtInfo" Text="TextBlock" VerticalAlignment="Top" Width="438" TextWrapping="Wrap" Visibility="Collapsed" />
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

En la parte de código, en la clase MainPage.xaml.cs vamos a utilizar dos objetos LiveConnectClient y LiveConnectSession, el primero para obtener los datos del usuario y el segundo para determinar si hemos conectado correctamente con el servicio de Live.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Live;
using Microsoft.Live.Controls;

namespace DemoLive1
{
    public partial class MainPage : PhoneApplicationPage
    {

        private LiveConnectClient client;
        private LiveConnectSession session;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void signInButton1_SessionChanged(object sender, LiveConnectSessionChangedEventArgs e)
        {
            if (e.Status == LiveConnectSessionStatus.Connected)
            {
                session = e.Session;
                client = new LiveConnectClient(session);
                txtStatus.Text = "Obteniendo información...";
                client.GetCompleted += new EventHandler<LiveOperationCompletedEventArgs>(client_GetCompleted);
                client.GetAsync("me");
            }
            else
            {
                txtStatus.Text = "No estás conectado!!";
                client = null;
            }
        }

        void client_GetCompleted(object sender, LiveOperationCompletedEventArgs e)
        {
            ocultarControles();
            txtInfo.Text = e.RawResult.ToString();
            txtInfo.Visibility = System.Windows.Visibility.Visible;
        }

        private void ocultarControles()
        {
            txtStatus.Visibility = System.Windows.Visibility.Collapsed;
            signInButton1.Visibility = System.Windows.Visibility.Collapsed;
        }
    }
}

En el evento Session_Changed comprobamos si esta conectado o no. En el caso de estar conectado mostramos un mensaje indicando que es esta obteniendo la información, una vez esté descargada ocultamos los botones de conexión y el mensaje anterior para mostrar solamente los datos del usuario.

Como podéis ver es bastante sencillo conectarse a Live y obtener los datos del usuario.

Espero que os sirva, os dejo el código de ejemplo aquí para que podáis ejecutarlo (debéis rellenar el ClientID). En el próximo post veremos ya como hacer uso de alguno de los otros servicios que nos ofrece Live.

Un saludo

Si pulsamos en uno de esos cuadrados aparece un panel con todas las letras del abecedario, seleccionando una de ellas nos posiciona en la sección que comienza por la letra que hemos pulsado.

Este componente que se llama LongListSelector también lo podemos usar en nuestras aplicaciones, para ello tenemos que instalar Silverlight Toolkit for Windows Phone disponible en la siguiente dirección: http://silverlight.codeplex.com/

LongListSelector está estructurado en siete partes (o templates) que podemos personalizar como queramos:

• ListHeaderTemplate
• ListFooterTemplate
• GroupHeaderTemplate
• GroupFooterTemplate
• GroupItemsPanel
• GroupItemTemplate
• ItemTemplate

Para que funcione necesitamos que al menos GroupHeaderTemplate, GroupItemTemplate, GroupItemsPanel e ItemTemplate sean usados, los demás dependiendo de nuestras necesidades los podemos usar o no.

Para que os hagáis una idea de a que equivale cada template aquí tenéis un par de imágenes que aclararán un poco el asunto:

Para comenzar, una vez que tenemos instalado el Toolkit, abrimos Visual Studio y creamos un nuevo proyecto de Silverlight para Windows Phone 7:

Ahora vamos a preparar las clases que necesitamos para mostrar una lista de modelos de coche agrupados por su marca.

Lo primero que necesitamos es definir la entidad que representa a un coche:

Tengo creada una clase que se llama BaseViewModel.cs de la que me sirvo para notificar los cambios en una propiedad y saber si estoy en tiempo de diseño o no.

La idea es centralizar todos los métodos o propiedades en una sola clase para no tener que reescribir el código en el resto de clases que necesiten esas funciones.

Ahora tenemos que crear la clase que va a manejar la lista de coches, en este caso se va a llamar BrandViewModel.cs.

Como podéis ver tenemos una lista ObservableCollection que nos permite aumentar o disminuir la lista de forma dinámica sin tener que volverla a construir y ¿de qué tipo? pues el tipo es una lista de coches.

Es decir, Group es una clase que os enseñare más adelante que nos permite almacenar en una lista los coches de una misma marca, por lo que al final lo que estamos haciendo es una lista BrandGroupList, que contiene varias listas Group (una por cada marca) de coches

A continuación lo que podeis ver es el método LoadExampleInfo para cargar los datos de ejemplo en una lista y a continuación ordenarlos con DoOrder.

El método DoOrder agrupa los coches en listas de tipo Group y luego los añade a la lista que vamos a enlazar con la interfaz (Brand_Group_List).

Ya solo nos queda ver lo que hace la clase Group:

Básicamente tenemos el constructor que crea la lista y dos propiedades una que será “Key” que es la clave por la que organizamos los grupos y “HasElements” que nos dice si tiene elementos un grupo o no.

La clase es genérica para poderla usar en otros proyectos y no tener que volverla a modificar

Vale, pues con esto (que no es poco) ya tenemos nuestro origen de datos y podemos comenzar a trabajar en la interfaz. Para ello tenemos que añadir la referencia al Microsoft.Phone.Controls.Toolkit en nuestro proyecto, pulsando con el botón derecho del ratón en referencias, seleccionamos agregar referencia en el menú que aparece y luego buscamos la librería en la ventana que aparece:

De tal manera que obtendremos esto en nuestro proyecto una vez pulsemos sobre OK:

Además podéis añadir el componente LongListSelector a la caja de herramientas pulsando con el botón derecho del ratón y seleccionando “Choose item” en el menú contextual, en la ventana que se abre, seleccionáis el componente pulsáis en Ok.

Ahora el componente aparece en la caja de herramientas, podéis usar el componente simplemente arrastrándolo desde la caja de herramientas a MainPage.xaml en la vista de diseño.

También se puede editar la interfaz con Expression Blend o ir trabajando directamente en XAML añadiendo los templates que deseéis usar, en cualquier caso tendréis algo parecido a esto:

Template de ListHeader:

Template de ListFooter:

Template de GroupItems:

Template de GroupItem:

Template de GroupHeader:

Template de GroupHeader:

Una vez está terminada la interfaz hay que ir al MainPage.xaml.cs y apuntar la propiedad ItemSource del componente para que cuando arranque la aplicación la lista este rellena:

Espero que esto os ayude a usar este componente, podéis acceder al código del ejemplo desde aquí

pues nada aquí estoy un sábado más con unos enlaces la mar de interesantes

• El primero de todos es Raspberry Pi, un pedazo de proyecto que promete para finales de este año un mini ordenador por 25 dolares. Se trata de una máquina justa en prestaciones pensada para la los más necesitados. Usa GNU-Linux como sistema operativo y lo mejor de todo es que el Quake III ¡¡FUNCIONA!!
• La nueva versión de Windows empieza a verse en la red y no solo trae novedades para los usuarios, sino también para los desarrolladores. Os dejo un resumen en este post escrito por Eugenio Estrada.
• Este enlace va dedicado a los profes de mi universidad que dicen “no” a usar productos de Microsoft sin dar explicación alguna. Creo que dedicare un post a esto pero de momento dejo esto: “Microsoft ha muerto“.

Un saludo

y con este post inauguro la nueva sección de mi blog “Links of the week” que intentare que aparezca los sábados con aquellos enlaces a sitios que me han llamado la atención durante la semana y que merecen la pena ser nombrados.

Los links de esta semana son:

• Saving trees for a greener City of Madrid. Aquí os dejo un artículo que habla de una herramienta que se encuentra a disposición de los habitantes de Madrid para pedir que planten arboles en su barrio, informarse de las especies de arboles plantadas en la ciudad, notificar deficiencias, etc,. Y todo ello usando Windows Azure y Silverlight
• Photoduino es una iniciativa para contruir un controlador para cámara de fotos basado en Arduino. Tiene muy buena pinta sobre todo si quieres hacer time lapses o fotografiar tormentas.
• Intervaluino este es un aparato similar a photoduino en cuanto al objetivo del proyecto pero con menos funciones que el anterior.Usa .NET y Netduino.
• El wallpaper de XP. Si quieres saber de donde ha salido entra en el enlace, es bastante curioso.
• Autopsia de un Pentium III. Creo que el título lo dice todo
• PaTTY el tester de la Surfac2.0

Espero que os resulten tan curiosos como a mi

Saludos

hace un par de días ha aparecido la versión estable del Silverlight Toolkit for Windows Phone, la última versión estable salio por febrero de este año.

Pero bueno, el caso es que ya la tenemos aquí y trae algunas novedades. Antes de nada para los que no se hallan actualizado, es necesario tener instalado la ultima versión de las herramientas de desarrollo para “Mango”.

Se han añadido algunos componentes: PhoneTextBox, DateTimePickers, LockablePivots, MultiSelectList, LongListSelector, HubTitle, ExpanderView y HeaderedItemsControl. Y como siempre se han solucionado algunos fallos y se ha optimizado el rendimiento de los componentes.

La verdad es que viene bastante completo, podeis ver la descripción de todas las novedades en el blog de Jeff Wilcox.

Y nada a parte de dejaros los enlaces correspondientes os recomiento que os bajeis el XAP de ejemplo y que lo metais en el emulador o en vuestro movil para ver como funciona

Recursos:

 Windows Phone SDK 7.1 Beta 2

Silverlight Toolkit for Windows Phone

 Saludetes

]]> http://labloguera.net/cesar/2011/08/19/wp7-nueva-version-del-toolkit-de-silverlight-para-windows-phone/feed/ 0 http://labloguera.net/cesar/2011/08/15/google-compra-la-division-de-moviles-de-motorola/ http://labloguera.net/cesar/2011/08/15/google-compra-la-division-de-moviles-de-motorola/#comments Mon, 15 Aug 2011 14:25:33 +0000 cesar http://labloguera.net/cesar/?p=88

Pues con esta interesante noticia me he levantado esta mañana.

Parece que este año nadie quiere descansar en agosto y si hace unos días se despertaban los rumores sobre la salida de Mango, la nueva versión de Windows Phone, al mercado este proximo 1 de septiembre hoy es que Google intentando plantar cara a Apple y Microsoft en el terreno de los smartphones ha comprado la división de telefonía movil de Motorola.

¿Como nos puede afectar esto? pues en primer lugar los teléfonos que van a llevar la voz cantante en cuanto a implementar nuevas caracteristicas en sus terminales serán Apple, Nokia y Motorola, además de que serán los primeros de la cola en pedir y adquirir nuevas funcionalidades el los sistemas operativos.

Eso si, aunque efectivamente Google sale reforzada en su lucha contra Apple y Microsoft por las patentes en móviles, ahora Android no resulta tan neutral ya que Motorola sera la cabeza visible en la que todo el mundo se fijara para ver el camino que sigue Android por lo que muchas empresas quizás se empiecen a plantear lazar algunos modelos más con el sistema Windows Phone de Microsoft para no quedarse en desventaja frente a Motorola.

En cualquier caso para los desarrolladores es mas lo que ganamos que lo que perdemos pues la experiencia que tiene Motorola aportada a Android seguro que hace mejorar las herramientas de desarrollo en este sistema y tanto a los demás fabricantes de móviles como a Microsoft y Apple competir más por sacar nuevas caracteristicas tanto en el hardware como en el software, que al final siempre mejora la experiencia del usuario final del teléfono.

Más opiniones en Xataka y Engadget.

En el caso de que el usuario esté escuchando música nuestra aplicación debería  pedirle permiso antes de poder cortar esa reproducción.

Detectar si se reproduce música es sencillo, simplemente vamos a añadir a la clase App.xaml.cs el namespace Microsoft.XNA.Framework.Media y así podremos hacer uso de una variable booleana MediaPlayer.GameHasControl esta variable nos dice si tu programa tiene el control sobre la reproducción de sonido.

El ejemplo que muestro a continuación lo he realizado usando Silverlight por lo que el namespace que indico arriba no viene por defecto , así que pulsamos con el botón derecho del ratón en la carpeta de referencias y pulsamos en agregar referencia y del listado que obtenemos usamos Microsoft.XNA.Framework.

Al añadir la referencia Visual Studio nos advierte de que pueden aparecer “rayos y centellas” cuando menos lo esperemos, no tengáis miedo y decidle que SI queréis continuar .

Es hora de abrir la clase App.xaml.cs y añadir el siguiente código al evento Application_Launching que ejecuta lo que sea necesario cuando se está iniciando la aplicación:

private void Application_Launching(object sender, LaunchingEventArgs e)
{
FrameworkDispatcher.Update();

if (MediaPlayer.GameHasControl==false)
{

if (MessageBox.Show(“Quieres cortar la reproducción de música en background”, “Aviso”, MessageBoxButton.OKCancel) == MessageBoxResult.Cancel)
{
Application.Current.Exit+=new EventHandler(Current_Exit);
}
}
}

Antes de nada lo primero que podéis ver es la instrucción FrameworkDispacher.Update(). En XNA la clase Game se encarga automáticamente de llamar a este método para conocer el estado de diferentes componentes del dispositivo, como el proyecto lo estamos realizando con Silverlight debemos ser nosotros quienes llamemos al método en el momento que lo necesitemos.

A continuación pregunto por el control del sonido, en el caso de que no lo tenga mi aplicación lanzo un MessageBox, si el usuario pulsa “Ok” la aplicación corta automáticamente la reproducción de sonido en background y toma el control y en el caso de pulsar “Cancel” sale de la aplicación inmediatamente.

Creo que es la forma mas sencilla que tenemos de programar nuestra aplicación para que pase este punto de la certificación.

Espero que sirva, un saludo

Voy a enumerar al menos los que conocemos los usuarios del APP Hub:

Submission in Progress

Tienes que finalizar el proceso de subida de la aplicación pulsando el botón de finalización.

Ready for Testing

La aplicación todavía no ha sido introducida en el proceso de testing.

Testing in Progress

La aplicación se encuentra en la cola de testing a la espera de que un tester se encuentre disponible.

Ready for Signing

La aplicación ha pasado las pruebas de certificación y está preparada para pasar a la fase de publicación.

Ready for Publishing

En esta fase la aplicación es publicada automáticamente en el MarketPlace si así lo hemos elegido durante el proceso de subida, sino deberemos activar la publicación manualmente.

Published to Marketplace

La aplicación se encuentra publicada, aunque algunas veces tarda un día en aparecer en el MarketPlace.

Certification Failed

La aplicación ha fallado la publicación y tienes que arreglar la parte en la que falla, para ello Microsoft proporciona un reporte bastante concreto en mi opinión sobre como debería comportarse la aplicación y como reproducir el error en nuestro ordenador.

None

Si en algún momento te encuentras tu aplicación en este estado ponte en contacto con la gente de soporte pues puede que halla ocurrido algún error durante el proceso de subida.

Por último quiero indicar que el tiempo de publicación de una aplicación en el caso de que pase la certificación oscila entre cuatro y cinco días laborables.

Espero que os sirva, un saludo y que tengáis una buena entrada y salida de año

• Launching
• Activated
• Closing
• Deactivated

Launching y Closing se producen cuando lanzamos la aplicación y cuando la cerramos, por otro lado disponemos de Activated y Deactivated que suceden cuando nos llaman al teléfono o pulsamos el botón de Volver. Voy a mostrar un ejemplo en el que persisto el texto de un textbox y donde muestro la hora a la que se desactivo la aplicación. Lo primero de todo es abrir Visual Studio y elegir un nuevo proyecto de tipo “Windows Phone Application”

Lo creamos y abrimos la clase App.xaml.cs, aproximadamente a la mitad de la clase podemos ver los eventos que os comentaba arriba. Bueno ponemos el cursor del ratón en el evento Deactivated y haciendo uso de PhoneApplicationService guardamos la hora en la que el programa se interrumpe por una llamada: privatevoid Application_Deactivated(object sender, DeactivatedEventArgs e) { PhoneApplicationService.Current.State["desactivadoHora"] = DateTime.Now; } Ahora abrimos MainPage.xaml, veremos algo como esto:

Tenemos que añadir a la interfaz un TexBox y un TexBlock para que quede de la siguiente forma:

<Grid x:Name=”LayoutRoot” Background=”Transparent”>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
<TextBlock x:Name=”ApplicationTitle” Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}”/>
<TextBlock x:Name=”PageTitle” Text=”page name” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
</StackPanel>

<!–ContentPanel – place additional content here–>
<Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
<TextBox Height=”279″ HorizontalAlignment=”Left” Margin=”36,50,0,0″ Name=”textBox1″ Text=”" VerticalAlignment=”Top” Width=”384″ TextChanged=”textBox1_TextChanged”/>
<TextBlock Height=”57″ HorizontalAlignment=”Left” Margin=”36,361,0,0″ Name=”textBlock1″ Text=”" VerticalAlignment=”Top” Width=”389″/>
</Grid>
</Grid>

Ahora en el evento TextChanged del TextBox añadimos la siguiente línea:

private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
PhoneApplicationService.Current.State["textoEscrito"] = textBox1.Text;
}

De esta manera guardamos el texto cada vez que cambia. Cuando el programa se ve interrumpido por la llamada de teléfono y volvemos a la aplicación MainPage llama automáticamente al método OnNavigatedTo  (este evento ocurre cada vez que se carga una clase que deriva de Page). Nosotros lo sobrescribimos para que cuando se ejecute cargue los datos que hemos guardado anteriormente:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
if (PhoneApplicationService.Current.State.ContainsKey(“textoEscrito”))
{
textBox1.Text = (string)PhoneApplicationService.Current.State["textoEscrito"];
}

if (PhoneApplicationService.Current.State.ContainsKey(“desactivadoHora”))
{
textBlock1.Text =”La aplicación se desactivo a las:”;
textBlock1.Text += ((DateTime)PhoneApplicationService.Current.State["desactivadoHora"]).TimeOfDay.ToString();
}
else
{
textBlock1.Text=”";
}
}

Simplemente tenemos que comprobar que existen las claves que indicamos y en caso afirmativo mostrar la información. Ahora ejecutamos el programa e introducimos texto en el TextBox, para simular la llamada de teléfono o que abrimos otro programa pulsamos la tecla de Windows.

Cuando queramos ir hacia atrás, pulsamos la tecla de Volver y veremos una pantalla en la que se está recuperando la información:

Por último aquí podéis ver la información recuperada y la hora a la que el programa quedo inactivo. Espero que os sirva a todos los que estáis programando en WP7, el código lo tenéis aquí.

Saludos

y asistiendo a eventos como el de “Coding Camp de Windows Phone 7” que organizó Microsoft hace un par de semanas entre otros.

Últimamente estoy tocando tecnologías como WPF, Silverlight (sobre todo en WP7) y con ellas algo de MVVM (Model View ViewModel). Este último tiene algo de historia hasta que te acostumbras pero poco a poco me voy haciendo a su uso.

Así que voy a colgar artículos (algo básicos al principio) sobre estas tecnologías por si pudieran ayudar a alguien a comenzar a trabajar con ellas.

El de hoy se podría decir que es un “hola mundo” en Silverlight, se trata de un reloj de agujas para el cual no nos va a hacer falta tocar demasiado código.

Lo primero de todo es abrir Expression Blend y crear un nuevo proyecto de tipo “Silverlight Application”.

A continuación vamos a añadir dos elipses (tenéis la herramienta en la parte izquierda) la primera con un ancho y alto de 260 y un borde o StrokeThickness de 3, y la segunda algo menor en sus dimensiones, asignar 240 tanto al alto y al ancho y al borde le asignáis valor 1.

Para facilitar el proceso una vez tenéis añadida la primera elipse podéis duplicarla en la vista de “Objects and Timeline” (copiando y pegando) y ya simplemente tendréis que cambiar los valores que mencione anteriormente en la vista de propiedades. Así conseguiréis que una quede dentro de la otra.

Ahora añadiremos los números al reloj, agregamos cuatro TextBlocks con el texto 3, 6, 9 y 12. Y los colocamos de la misma forma que veis en la imagen:

Para terminar vamos a añadir tres rectángulos que harán de agujas del reloj. Añadimos el primero que va a ser la aguja que cuente las horas con los siguientes parámetros, RadiusX y RadiusY a 4 y el borde a 1, el ancho de rectángulo va a ser 9 y el alto 69, y para terminar el valor de RenderTransformOrigin lo ponemos a 0,5 y 0.

El RenderTransformOrigin define el origen de las transformaciones, o lo que es lo mismo, el punto sobre el que vamos a realizar las rotaciones de las agujas del reloj.

La aguja del minutero tendrá los siguientes parámetros: RadiusX y RadiusY a 0,5 y el borde a 1, el ancho de rectángulo va a ser 1 y el alto 91, y para terminar el valor de RenderTransformOrigin lo ponemos a 0,5 y 0.

Los parámetros del segundero son exactamente iguales a los del minutero simplemente ponedla de color rojo para distinguirla. 

Algo muy importante en esta última parte es dar nombre a las agujas para distinguirlas y poderles asignar valores.

El código completo de la interfaz es este:

 1 <Grid x:Name="LayoutRoot" Background="White"> 2       <Ellipse x:Name="BordeExterior" Fill="White" Margin="194,110,186,110" Stroke="Black" StrokeThickness="3" Width="260" Height="260"/> 3       <Ellipse x:Name="BordeInterior" Margin="204,121,196,119" Stroke="Black" Width="240" Height="240"/> 4       <TextBlock Height="23" Margin="308,121,302,0" TextWrapping="Wrap" Text="12" VerticalAlignment="Top" FontSize="21.333" FontFamily="Arial Rounded MT Bold" TextAlignment="Center"/> 5       <TextBlock Height="23" Margin="308,0,302,119" TextWrapping="Wrap" Text="6" VerticalAlignment="Bottom" FontSize="21.333" FontFamily="Arial Rounded MT Bold" TextAlignment="Center"/> 6       <TextBlock Margin="0,224,196,233" TextWrapping="Wrap" Text="3" FontSize="21.333" FontFamily="Arial Rounded MT Bold" TextAlignment="Center" HorizontalAlignment="Right" Width="30"/> 7       <TextBlock Margin="207,224,0,233" TextWrapping="Wrap" Text="9" FontSize="21.333" FontFamily="Arial Rounded MT Bold" TextAlignment="Center" HorizontalAlignment="Left" Width="30"/> 8       <Rectangle x:Name="Segundos" Fill="Red" HorizontalAlignment="Right" Margin="0,238,316,151" Stroke="Red" Width="1" RenderTransformOrigin="0.5,0" RadiusY="0.5" RadiusX="0.5"/> 9       <Rectangle x:Name="Minutos" Fill="Black" HorizontalAlignment="Right" Margin="0,238,316,151" Stroke="Black" Width="1" RenderTransformOrigin="0.5,0" RadiusY="0.5" RadiusX="0.5"/>10       <Rectangle x:Name="Horas" Fill="Black" HorizontalAlignment="Right" Margin="0,237,312,174" Width="9" RenderTransformOrigin="0.5,0" RadiusY="4" RadiusX="4"/>11 </Grid>

Ahora vamos a añadir el código para que se muevan las agujas según pasa el tiempo, para ello podemos pulsar con el botón derecho sobre la solución y abrir desde Blend el VisualStudio.

Si abrimos MainPage.xaml.cs evidentemente va a estar vacío, aquí lo que vamos a hacer es crearnos un Timer que cuando “salte” actualice la rotación de las agujas.

Para ello tenemos que añadir un namespace System.Windows.Threading y declararnos un objeto global de tipo DispacherTimer. Este objeto que creamos dentro del constructor de la clase se tiene que actualizar cada segundo y cada vez que se actualice llamaremos al método correspondiente para que renueve la posición de las agujas.

 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Net; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Documents; 8 using System.Windows.Input; 9 using System.Windows.Media;10 using System.Windows.Media.Animation;11 using System.Windows.Shapes;12 using System.Windows.Threading;13 14 namespace relojDeAgujas15 {16   public partial class MainPage : UserControl17   {18         DispatcherTimer miReloj;19 20     public MainPage()21     {22       InitializeComponent();23 24             miReloj = new DispatcherTimer();25             miReloj.Interval = TimeSpan.FromSeconds(1);26             miReloj.Tick += new EventHandler(miReloj_Tick);27             miReloj.Start();28     }29 30         void miReloj_Tick(object sender, EventArgs e)31         {32             RotateTransform rotateTransform = new RotateTransform();33             rotateTransform.Angle = DateTime.Now.Second * 6 + 180;34             Segundos.RenderTransform = rotateTransform;35 36             rotateTransform = new RotateTransform();37             rotateTransform.Angle = DateTime.Now.Minute * 6 + 180;38             Minutos.RenderTransform = rotateTransform;39 40             rotateTransform = new RotateTransform();41             int lahora = Convert.ToInt32(DateTime.Now.ToString("hh"));42             rotateTransform.Angle = (lahora*30) + (DateTime.Now.Minute* 0.5) + 180;43             Horas.RenderTransform = rotateTransform;44         }45   }46 }

Para calcular los grados que tengo que avanzar cada aguja del reloj hay que tener en cuenta lo siguiente: el reloj analógico se divide en 12 partes y cada una de ellas en 5, por lo que durante una hora la aguja que la marca las horas de mueve 30 grados.

• El recorrido de 30 grados no lo hace de golpe sino que cada minuto avanza un poco, exactamente 0,5 grados (30 / 60 = 0,5).

• El minutero da la vuelta entera al reloj por lo que recorre 360 grados en una hora o lo que es lo mismo 6 grados cada minuto.

• Por último tenemos al segundero que al igual que el minutero se mueve de 6 en 6 grados pero al segundo.

Si repasamos el código que mueve el minutero y segundero lo que vemos es que hago uso de un objeto RotateTransform que me ayuda a rotar cada objeto de la pantalla. El ángulo lo obtengo multiplicando el minuto o segundo de ese instante por 6 y le sumo 180, esto último es para corregir el ángulo resultante y que aparezca en el lugar adecuado. Por ultimo aplico la transformación al objeto.

1             RotateTransform rotateTransform = new RotateTransform();2             rotateTransform.Angle = DateTime.Now.Second * 6 + 180;3             Segundos.RenderTransform = rotateTransform;4 5             rotateTransform = new RotateTransform();6             rotateTransform.Angle = DateTime.Now.Minute * 6 + 180;7             Minutos.RenderTransform = rotateTransform;

De la misma manera realizo el cálculo para la aguja de las Horas solo que debo tener en cuenta que el sistema me da las horas en formato 24H y yo necesito que me devuelva un valor que no pase del 12, para ello formateo la salida de DateTime.Now y la convierto a entero.

1             rotateTransform = new RotateTransform();2             int lahora = Convert.ToInt32(DateTime.Now.ToString("hh"));3             rotateTransform.Angle = (lahora*30) + (DateTime.Now.Minute* 0.5) + 180;4             Horas.RenderTransform = rotateTransform;

Y con estas pocas líneas tenemos nuestro primer programa en Silverlight a continuación tenéis el código disponible para descargar.