Cliente de Twitter en Silverlight 3 – Primera parte

Primera Parte

Segunda Parte

Primero abrimos el Expression Blend 3 y elegimos nuevo proyecto de Silverlight 3 para crear lo que será el marco de nuestra aplicación de twitter que había pensado en crear una aplicación sencilla q nos sirve de widget para el escritorio y poder estar al tanto de todas nuestras lecturas como el plugin de RSS que viene en las barras de Windows Vista y 7, pero ya que no nos permite que una aplicación de Silverlight se personalicen los bordes de la ventana (Esperaremos a la versión 4) voy a hacer un simple control para integrar en cualquier aplicación web. (Veremos si luego hacemos una exportación a WPF.

Ahora bien, si queremos que además pueda ser una aplicación de escritorio, hay que indicarle que pueda correr fuera del navegador, así que para ello vamos a Project, Silverlight Project Options y activamos Enable Application Out of Browser, aunque como ya he comentado haremos un simple widget para nuestra web, pero no esta de mas saberlo.

Empezamos, primero añadimos una base para nuestro formulario principal, añado un rectángulo al cual le redondeo los bordes para darle un aspecto mas moderno

Aplico un Brush (Pincel) de tipo degradado de arriba hacia abajo, y le pongo como transparencia 90% para que se vean ligeramente los elementos del escritorio sin llegar a molestar a la hora de leer. Para cambiar del color de un extremo al otro deberemos pulsar

Para icono de la aplicación he encontrado un icono de twitter que me ha hecho gracia pero como esta en JPG, tiene un fondo blanco que queda muy mal, así que lo vamos a hacer transparente con el Photoshop y guardarlo en PNG.

Seleccionamos la barita mágica y pulsamos sobre cualquiera de las esquinas blancas y se seleccionara todo el cuadrado blanco y así podremos dejar la imagen con los bordes redondeados (Acordaros de duplicar la capa de fondo y eliminar la protegida sino se seguirá quedando el fondo).

Seleccionamos archivo, guardar para web para optimizar el tamaño del icono para que el tamaño sea el optimo para web.

Insertamos nuestro icono de twitter con bordes transparente y lo colocamos en la esquina derecha, añadiendo un control de tipo Image en nuestro proyecto de Expression Blend.

Ahora vamos a colocar un Stackpanel, que será donde se irán agregando nuestros Tweets en nuestro widget, nos fijamos que en Layout ponga orientation vertical y la llamaremos pnlContent

Si en algún momento no vamos bien a la hora de diseñar como al centrar el icono de cerrar bien en la esquina, Expression Blend trae un zoom para poder ampliar la vista actual, esta situado en la esquina inferior izquierda de nuestro panel.

Ahora añadimos un campo de texto con el titulo del nuestro widget que sera la cuenta en la cual nos hayamos logueado.

Y así es como queda por ahora nuestra aplicación, en la siguiente parte crearemos la arquitectura de nuestro proyecto y obtendremos los datos de Twitter.

Un saludo