July 2009 - Posts

Ya comente hace un tiempo aquí, la existencia de una herramienta para inspeccionar aplicaciones Silverlight en cualquier web.

Ha salido la versión beta de Silverlight Spy 3, con muchas novedades y mejoras, que hacen de esta aplicación una herramienta indispensable para cualquier desarrollador.

La nueva versión es compatible con Silverlight 3 RTW y puede coexistir con Silverlight Spy 2.

La beta será funcional hasta el 31 de Agosto, luego de esta fecha caducará.

Pueden visualizar las novedades aquí y pueden descargar la aplicación para probarla aquí.

Silverlight Toys es un sitio que nos muestra ejemplos de sitios que utilizan las nuevas características de Silverlight 3 de manera creativa. Pueden ver ejemplos de NavigationFramework, Perspective 3D, Pixel Shaders, Frame Capture y muchos más.

Pueden visitar el sitio aquí.

Esta para ir visualizando el nuevo sitio oficial de Silverlight, todavía en beta. Mucho más limpio y claro, creo que es un avance muy bueno.

Pueden visitar el sitio aquí.

Para estar en sintonía con el lanzamiento de Expression Studio 3, se ha liberado la versión definitiva de Deep Zoom Composer, la herramienta que nos permite  desarrollar de manera sencilla aplicaciones Deep Zoom.

Las novedades que trae esta versión las pueden revisar aquí.

Pueden descargar la aplicación aquí.

Ya se liberó la versión definitiva de Expression Studio 3, donde vamos a poder acceder a 4 herramientas de diseño para la creación de aplicaciones.

Las herramientas que incluye son

  • Expression Web 3 – incluye SuperPreview
  • Expression Blend 3 + SketchFlow
  • Expression Design 3 – mejora en la importación desde Photoshop
  • Expression Encoder 3

Pueden descargar las versiones de prueba aquí.

Les paso un link más que interesante, una entrevista en Visual Studio Magazine a Scott Guthrie sobre el porque Silverlight 3 es una alternativa para los desarrolladores de aplicaciones de negocio.

La entrevista esta en inglés y pueden leerla aquí.

Ya se encuentra disponible para descargar la versión offline de la documentación de Silverlight 3. Es ideal para cuando no tengamos conexión además de se más rápido y tener un índice.

Pueden descargar la documentación aquí.

IMPORTANTE

Si tienen problemas para abrir el archivo, deben ir a Propiedades del mismo y clickear en “Unblock o ”“Desbloquear”.

Se ha lanzado una nueva versión de los controles Blacklight, de los cuales ya  había hablado anteriormente aquí.

La nueva versión se centra en los siguiente ítems

  • Actualización de código a Silverlight 3
  • Nuevos controles RangeSlider y WatermarkedTextBox
  • Arreglo de errores
  • Actualización del showcase

image_thumb

2 Pueden visitar el showcase aquí o descargarse los controles aquí.

Al crear una aplicación siempre tenemos que tener presente la performance de la misma, en este sentido el hecho del uso del procesador es una cuestión más que importante.

La clase Analytics nos permite conocer en el momento que necesitemos, cual es el uso de CPU que tiene actualmente la máquina y cuanto esta siendo utilizado por nuestra aplicación.

La clase tiene dos propiedades

  • AverageProcessLoad – el uso de CPU de todos los procesos
  • AverageProcessorLoad – el uso de CPU de la aplicación

La clase además tiene una colección que nos proporciona la información de los procesadores GPU. Este objeto GpuInformation contiene las siguientes propiedades

  • DeviceId – ID del dispositivo GPU
  • VendorId – Proveedor del dispositivo GPU
  • DriverVersion – Versión del driver del dispositivo GPU

De esta manera podemos visualizar información relacionada con la performance directamente en nuestra aplicación.

Vamos a mostrar como podemos implementarlo.

Primero generamos un XAML donde vamos a mostrar todos los datos de la clase Analytics.

<Grid x:Name="LayoutRoot" Background="#FFDCC2C2">
  
  <Grid.RowDefinitions>
      <RowDefinition Height="75"/>
      <RowDefinition Height="75"/>
    <RowDefinition Height="150"/>
  </Grid.RowDefinitions>
 
    <StackPanel Grid.Row="0" Background="#FF9B6666">
        <TextBlock Text="Uso total de CPU" FontSize="22"/>
        <TextBlock x:Name="txtCPULoad" FontSize="30"/>            
    </StackPanel>
 
    <StackPanel Grid.Row="1" Background="#FF507244">
        <TextBlock Text="Uso de App Silverlight" FontSize="22"/>
        <TextBlock x:Name="txtSLCPULoad" FontSize="30"/>
    </StackPanel>
  
    <StackPanel Grid.Row="2" Background="#FF7F8EA9">
        <TextBlock Text="Device" FontSize="15"/>
        <TextBlock x:Name="txtGPUDevice" FontSize="15"/>
        <TextBlock Text="Vendor" FontSize="15"/>
        <TextBlock x:Name="txtGPUVendor" FontSize="15"/>
        <TextBlock Text="DriverVersion" FontSize="15"/>
        <TextBlock x:Name="txtGPUDriverVersion" FontSize="15"/>
    </StackPanel>
 
</Grid>

Ahora vamos a lo importante que es el código fuente. Vamos a definir una variable del tipo Analytics que es la que vamos a utilizar en nuestra aplicación.

private Analytics performanceAnalytics;

Luego, al inicializarse la aplicación, creamos la clase y generamos un DispatcherTimer que vaya indicando cada 1 segundo la performance.

performanceAnalytics = new Analytics();
 
txtGPUDevice.Text = performanceAnalytics.GpuCollection[0].DeviceId.ToString();
txtGPUVendor.Text = performanceAnalytics.GpuCollection[0].VendorId.ToString();
txtGPUDriverVersion.Text = performanceAnalytics.GpuCollection[0].DriverVersion;
 
DispatcherTimer timerTest = new DispatcherTimer();
 
timerTest.Interval = TimeSpan.FromSeconds(1);
timerTest.Tick += new EventHandler(timerTest_Tick);
 
timerTest.Start();
Vemos que también ya agregamos la información del GPU.

Ahora agregamos la función que cada 1 segundo muestra el uso de CPU.

private void timerTest_Tick(object sender, EventArgs e)
{
    txtCPULoad.Text = string.Concat(performanceAnalytics.AverageProcessorLoad.ToString(), "%");
    txtSLCPULoad.Text = string.Concat(performanceAnalytics.AverageProcessLoad.ToString(), "%");
}

Les muestro un screen de la aplicación.

1Pueden descargar el proyecto aquí.

Una de las grandes novedades y además de las más solicitadas que trajo Silverlight 3 RTW, es el soporte a la “ruedita” del mouse o mejor conocido como MouseWheel.

Voy a mostrar un sencillo ejemplo de cómo implementar esta nueva funcionalidad.

Vamos a empezar teniendo una imagen en nuestra aplicación a la cual le vamos a cambiar la escala cada vez que hagamos scroll con el mouse.

Primero agregamos la imágen al XAML, y ya vamos a tener la propiedad que vamos a modificar que es ScaleTransform.

<UserControl x:Class="MouseWheel.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" Width="600" d:DesignHeight="600">
    <Grid x:Name="LayoutRoot" Background="Gray">
 
        <Border CornerRadius="5"
                BorderBrush="DarkGray"
                BorderThickness="2"
                Background="White"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
 
            <Grid Margin="10" Width="100" Height="100">
                <Image Source="/images/silverlight.jpg"></Image>
            </Grid>
 
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ZoomScaleTransform" />
                </TransformGroup>
            </Border.RenderTransform>
 
        </Border>
 
    </Grid>
</UserControl>

 Ahora vamos a lo interesante, que es agregar el handler del evento, el cual es MouseWheelEventHandler.

LayoutRoot.MouseWheel += 
                new MouseWheelEventHandler(LayoutRoot_MouseWheel);

 Lo que hicimos fue agregar un evento que se llama cada vez que hacemos scroll con el mouse, mientras el foco lo tenga la aplicación.

Ahora vamos a ver el evento que tiene la funcionalidad.

public void LayoutRoot_MouseWheel(object sender, MouseWheelEventArgs e)
{
    if (e.Delta > 0)
    {
        ZoomScaleTransform.ScaleX = ZoomScaleTransform.ScaleX + 0.1;
        ZoomScaleTransform.ScaleY = ZoomScaleTransform.ScaleY + 0.1;
    }
    else
    {
        ZoomScaleTransform.ScaleX = ZoomScaleTransform.ScaleX - 0.1;
        ZoomScaleTransform.ScaleY = ZoomScaleTransform.ScaleY - 0.1;
    }
} 
Como vemos, la propiedad más importante es Delta, que nos indica el tipo de scroll que hicimos.

Luego con ese valor podemos hacer lo que queramos, en este caso modificamos la escala según si agrando o achico la imágen.

Pueden descargar el proyecto aquí.

More Posts Next page »