Que tal, espero que estén muy bien, por mi parte, achaques de salud por la aproximación a mis 30 años, 6 de septiembre (por si alguien quiere saludar). Pero bueno, vamos a ver lo que nos convoca.
En el pequeño articulo Creando un Gadget para Vista y Silverlight, vimos lo básico para crear estos componentes para nuestra barra. Ahora veremos como hacer un gadget que permita la escritura con el mouse o mejor aún para ser utilizado en tablet PC.
PANTALLA PRINCIPAL DEL GADGET
Elegir el PNG
Vamos a elegir un buen png para el fondo de nuestro gadget, despues de poco buscar encontré esta imagen que me gusto :
Para esto, al igual que antes, vamos a utilizar Microsoft Expression Blend 2.0, también podemos probar el mismo (de forma de una página web normal) para ir depurando nuestro super gadget.
Diseño y Dimensiones.
Vamos a diseñar el gadget con dimensiones de ancho 130px y alto de 182px (recuerda que es un tamaño aceptable considerando que es un gadget sobre el sidebar).
El cuadro de es tipo InkPresenter que nos va a permitir la escritura en este cuadro de texto, además el fondo es «transparent». El código XAML de la página sería el siguiente:
<Canvas
xmlns=«http://schemas.microsoft.com/client/2007«
xmlns:x=«http://schemas.microsoft.com/winfx/2006/xaml«
Width=«130« Height=«182«
x:Name=«Page« Loaded=«root_Loaded« >
<Image Canvas.Left=«-48« Width=«200« Height=«200« Source=«img/file.png« Stretch=«Fill« Canvas.Top=«-6«/>
<InkPresenter
x:Name=«CuadroTinta«
Background=«transparent«
Width=«130« Height=«182«
MouseMove=«LapizMouseMove«
MouseLeftButtonDown=«LapizMouseDown«
MouseLeftButtonUp=«LapizMouseUp« Canvas.Top=«2«/>
</Canvas>
Creando el comportamiento del Gadget
Si analizamos un poco este código, nos damos cuenta que el elemento InkPresenter tiene seteado tres manejadores de eventos:
MouseMove=«LapizMouseMove«
MouseLeftButtonDown=«LapizMouseDown«
MouseLeftButtonUp=«LapizMouseUp«
Estas funciones son llamadas desde el Default.aspx la cual hace referencia al archivo tintas.js y que contiene:
// Captura la posición del mouse y crear el Stroke, con el color
function LapizMouseDown(sender,args)
{ inkPresenter.CaptureMouse();
newStroke = silverlight.content.createFromXaml(‘<Stroke/>’);
newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
newStroke.DrawingAttributes.Color = color;
newStroke.DrawingAttributes.Width = 2;
newStroke.DrawingAttributes.Height = 2;
inkPresenter.Strokes.Add(newStroke);
}
// Mientras el mouse se va moviendo, vamos agregando puntos al stroke
function LapizMouseMove(sender,args)
{
if (newStroke != null)
{
newStroke.StylusPoints.AddStylusPoints(args.GetStylusPointsinkPresenter));
}
}
// Soltamos el boton del mouse
function LapizMouseUp(sender,args)
{
newStroke = null;
}
PANTALLA DE SETTING
Diseño
Lo primero es crear los cuadros de colores, que servirán para que el usuario pueda seleccionar el color de la línea que desea dibujar, el texto tiene un pequeño efecto de «reflexión», este efecto se logra utilizando la herramienta flip 
y luego ocupamos el alpha en el texto (para que se vea borroso). Los cuadros, tienen por nombre el color (en inglés) al cual representan, y esto tiene una razón de ser, debido a que vamos a utilizar el nombre de los cuadros como argumentos de funciones que setean los colores de la línea.
Las animaciones básicamente generan el aumento de tamaño de cada uno de los cuadros:
Recuerda utilizar el Copiar la animación y luego hacer la reversa, te ahorras bastante trabajo en los (On-Off)
Comportamiento de la Pantalla de Configuración
Recuerda que debes agregar las siguientes líneas en el archivo html que representa a la pantalla de inicio de gadget «Default.html»
System.Gadget.onSettingsClosed = SettingsClosed;
System.Gadget.settingsUI = «Setting.html»;
En el archivo Setting.XAML tenemos que cada cuadro llama llama a las funciones para crear la animación:
MouseEnter=«amarilloOn« MouseLeave=«amarilloOff« MouseLeftButtonDown=«amarilloClick« Cursor=«Hand«>
Las Siguientes funciones sirven para activar las animaciones (…On) en el evento MouseEnter
// desactivar (..Off) activa la animación cuando se hace MouseLeave sobre el cuadro y
// (…Click) cuando se hace click sobre el cuadro.
// Para hacerlo más fácil los x:Name de los elementos tienen el nombre del color
// para que pasemos como argumento el Name del sender a la función marcador.
function negroOn(sender, args)
{sender.findName(«negroOn»).Begin(); }
function negroOff(sender, args)
{sender.findName(«negroOff»).Begin(); }
function negroClick(sender, args)
{marcador(sender.Name, sender); }
y las funciones adiciones nos sirve para aumentar el borde del cuadro del color seleccionado para hacerlo más rápido en términos de programación, volvemos el StrokeThickness de todos los elementos a 1, y luego cambiamos el StrokeThickness del objeto seleccionado. Con la línea color=objeto seteamos la variable color para que cuando se ejecute la función asociada a onSettingsClosing se escriba en el gadget el valor del color seleccionado.
function marcador(objeto, sender) {
sender.findName(«yellow»).StrokeThickness = «1»;
sender.findName(«blue»).StrokeThickness = «1»;
sender.findName(«red»).StrokeThickness = «1»;
sender.findName(«black»).StrokeThickness = «1»;
sender.findName(«green»).StrokeThickness = «1»;
sender.findName(objeto).StrokeThickness = «3»;
color = objeto;
}
Cuando se cierra la ventana, y es por que presionaron el botón Aceptar
System.Gadget.onSettingsClosing = function(event) {
if (event.closeAction == event.Action.commit) {
if (color != «») {
System.Gadget.Settings.write(«color», color);
}
event.cancel = false;
}
}
Recuerda también que cuando se cierra esta ventana, hay que pasar los valores para que se actualice el valor en la pantalla principal, es aquí en donde utilizamos la siguiente línea de código:
System.Gadget.onSettingsClosed = SettingsClosed;
Es decir, cuando se cierre la ventana de setting, se ejecuta la función SettingsClosed.
Finalizando
Una vez configurado el Manifiesto XML del Gadget solo nos queda ejecutar nuestro Gadget, te dejo algunas imágenes.
Te dejo el Gadget para que lo descargues , si quieres ver los archivos y programación, tienes que ir a:
C:Program FilesWindows SidebarGadgetsTinta.Gadget
( o Archivos de Programa, según el idioma de tu navegador)
DESCARGA EL GADGET ACA!! (QUE ES EL PROPIO CODIGO FUENTE, SI NO LO SABIAS)
Nada más que queda agradecerte es leer este artículo, como vez, se pueden lograr cosas interesantes mezclando tecnologías verdad?
Saludos,
Gonzalo
Los videos están almacenados en 
