Queremos agradecer a todos y cada uno de las personas involucradas con la comunidad y el sitio en Facebook.  Todas y cada una de sus colaboraciones han sido parte importante de la comunidad en donde todos hemos podido aprender más y más acerca de Silverlight y demás temas como XAML, Silverlight para Windows Phone 7 y 7.1, WCF RIA Services y un largo etcétera.

Algunos datos acerca de La Liga Silverlight

• La Liga Silverlight es la Primera y única comunidad en español acerca de Silverlight
• En este año se incrementaron las visitas en un 45% !
• Los países que más visitan la comunidad son México, España, Colombia, Ecuador, Argentina, Perú, Chile, Costa Rica, Venezuela, Bolivia, Estados Unidos, Uruguay y El Salvador

¿Qué viene para La Liga Silverlight?

Les puedo comentar que durante 2012 vienen una gran cantidad de noticias y recursos nuevos acerca de Silverlight y sus tecnologías relacionadas.  En estos momentos no puedo darles más detalles pero ya muy pronto sabrán de qué estamos hablando

¿Puedo participar?

¡Claro! Todo mundo puede compartir sus artículos acerca de la tecnología dentro de la comunidad.  Para mayor información escríbenos a contacto@LigaSilverlight.com o visita el sitio de Facebook.

En La Liga Silverlight – La Primera Comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas, nos hemos dado a la tarea de entrevistar a diversas personalidades y líderes de opinión en el ámbito tecnológico de Silverlight quienes nos estarán dando a conocer sus puntos de vista con respecto a este y demás temas.

Les presento: La Entrevista MVP

La Entrevista MVP

La Entrevista MVP es una entrevista (inicialmente por escrito, probablemente hagamos alguna entrevista audiovisual a mediano plazo), con periodicidad mensual, en donde podrán obtener de primera mano los puntos de vista, opiniones y comentarios de varios Profesionales Más Valiosos (MVP) de Microsoft, principalmente de Silverlight.

Hoy en día, es sumamente fácil toparnos con pseudo-periodismo digital, ignorante, mal informado y tendencioso, que lo único que hacen es confundir más a las personas que –erróneamente- los leen o escuchan, por lo que es excelente idea el tener a nuestro alcance las opiniones directas de profesionales que saben verdaderamente de lo que están hablando y que cuentan con información y argumentos privilegiados para opinar, contundentemente, acerca de la tecnología en la que son Expertos.

Las entrevistas estarán disponibles mensualmente (y si es posible, más frecuentemente) en el sitio de La Liga Silverlight y estarán completamente traducidas a nuestro bello idioma.

¿Les gusta la idea?  ¡No se pierdan esta serie, que estará bastante interesante!

Salu2!!!

El día de hoy ha sido liberado Silverlight 5 RC (Release Candidate) el cual marca un paso más en esta versión, con mejoras en rendimiento y adiciones de funcionalidad súper importantes.

Silverlight 5 RC incluye una gran cantidad de componentes y funcionalidades adicionales, entre las que podemos destacar:

• Plantillas de Datos implícitas
• p/Invoke (RC)
• Confianza Elevada en aplicaciones dentro del navegador
• Soporte para múltiples ventanas del Sistema Operativo
• Acceso al Sistema de Archivos completo en Confianza Elevada
• Soporte para breakpoints en expresiones {Binding} en XAML
• Soporte para 64 bit (RC)
• Soporte para impresión vectorial (RC)
• …y más!

Lo pueden obtener desde la página de descargas del Sitio Oficial de Silverlight. 

Nota: Esta liberación *todavía* no tiene licencia de tipo “Go Live”, hasta la versión final.  Pero si quieren construir aplicaciones con Silverlight, o migrar aplicaciones de Silverlight 2/3/4 hacia 5… este es el momento adecuado para hacerlo.

Salu2!

Como he mencionado anteriormente aquí y aquí, las aplicaciones de Silverlight pueden ser clientes de automatización, es decir, pueden invocar los servidores de automatización registrados en el sistema operativo Windows de la máquina del usuario.

Un requerimiento bastante común en aplicaciones de negocio es poder utilizar el escáner conectado desde nuestro aplicativo, para poder digitalizar una imagen y posteriormente serializarla a disco y/o presentarla en pantalla, etc.

En sistema operativo Windows contamos con WIA (Windows Image Acquisition), la cual es una plataforma que permite a nuestras aplicaciones interactuar con hardware de imágenes y también estandariza la interacción entre las aplicaciones y los escáneres, es decir, es un común denominador entre el manufacturero del dispositivo y tú como desarrollador.  WIA está presente en Windows desde Windows ME en adelante, y su versión más reciente es la 2.0.

Es importante notar que tu hardware debe ser compatible con WIA para que el código de ejemplo de este artículo funcione.  Revisa la documentación de tu escáner para conocer si existe compatibilidad.

WIA.CommonDialog

El objeto WIA.CommonDialog tiene diferentes métodos que nos ayudan a desplegar las cajas de diálogo para poder seleccionar un dispositivo de imagen, como una cámara o un escáner, y además para escanear una imagen.  Si creamos una referencia a este objeto por medio de la clase AutomationFactory, podemos fácilmente integrar capacidades de escaneo en nuestra aplicación de Silverlight.

El objeto WIA.CommonDialog tiene algunos métodos bastantes interesantes, los cuales se destacan en la siguiente tabla:

Puedes leer el artículo completo aquí

En el ejemplo, invocamos un método como cualquier otro y efectivamente obtenemos los resultados esperados, en este caso, la lista de unidades lógicas del equipo del usuario en donde está ejecutando la aplicación.  Pero ¿qué pasaría si necesitáramos manejar un evento que es disparado por el componente (tu ensamblado) de .NET?  En este caso la implementación debe cumplir con ciertos requisitos.

Atributo ComSourceInterfacesAttribute

Para que podamos exponer un evento en nuestro ensamblado, y que pueda ser manejado por la aplicación de Silverlight a través de automatización, debemos marcar nuestra clase que implementa el evento con el atributo ComSourceInterfacesAttribute, el cual indica una lista de interfaces que contienen los eventos a exponer en dicha clase.

Puedes leer el artículo completo aquí

No obstante, a partir de Silverlight 4, es posible que las aplicaciones de Silverlight sean clientes de automatización cuando ejecutan en Confianza Elevada, esto es, poder invocar los servidores de automatización registrados en el sistema operativo Windows.  Generalmente, la mayoría de ejemplos que podemos encontrar en la Web al respecto de esta característica van por el lado de invocar los servidores de automatización de Office (Outlook.Application o Excel.Application por ejemplo), pero ¿qué sucede si necesitamos invocar funcionalidad ya construida en alguno de nustros ensamblados que hayamos escrito en .NET 4.0?

Ensamblado

En esta solución crearemos dos proyectos, uno de tipo Class Library del .NET Framework 4.0 y otro proyecto será la aplicación de Silverlight.

En el proyecto de la Biblioteca de Clases escribiremos la funcionalidad para obtener la información de todas las unidades lógicas del equipo.  Tradicionalmente, esto lo podemos lograr por medio de la clase DriveInfo del espacio de nombres System.IO, pero justamente esa es una de las clases que no está en el BCL de Silverlight, por lo que crearemos un ensamblado de .NET 4.0 que regrese esa información, y la usaremos en un aplicativo de Silverlight.

La clave para lograr esto es abrir las propiedades del proyecto de la Biblioteca de Clases y seleccionar la opción “Register for COM interop” para poder exponer este ensamblado a través de COM.

Puedes leer el artículo completo aquí

Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo Better Silverlight 4.0 Installation and Upgrade Experience publicado en inglés por Andrew Tokeley el 17 de octubre del 2010.

Las apariencias son muy importantes. De hecho, la forma en que una aplicación es instalada, o actualizada, y cuánto dura en arrancar puede tener una gran influencia en el concepto que el usuario tenga de ella. Tal como viene de fábrica, Silverlight no ayuda mucho, pero tranquilos que con un poquito de esfuerzo de puede superar ese obstáculo.

La siguiente figura ilustra la serie de pruebas necesarias cuando un usuario navega a la página que contiene la aplicación de Silverlight (para una imagen más amplia le sugiero abrir la imagen en una pestaña nueva).

Verificando que Silverlight está instalado

El archivo Silverlight.js se encarga de todo esto antes de que la aplicación siquiera sea cargada, pero aun así nosotros podemos agregar un poco de magia.

Una de las primeras cosas que hay que verificar es si Silverlight está instalado en el cliente y si es la versión correcta. Hay un excelente documento que explica el proceso en todo detalle. Sin embargo creo que se puede simplificar un poco y por eso he escrito este artículo.

En el archivo estándar que Visual Studio prepara, agreguen el siguiente código en la función onSilverlightError—de otro modo no será posible determinar si se requiere actualizar la versión ya instalada de Silverlight. (Puede que esto sea una pulga, aunque todavía no lo he investigado.)

<script type="text/javascript">
    function onSilverlightError(sender, args) {

        var appSource = "";
        if (sender != null && sender != 0) {
            appSource = sender.getHost().Source;
        }

        var errorType = args.ErrorType;
        var iErrorCode = args.ErrorCode;

        // ¡AGREGUEN ESTA PARTE!
        // Por alguna razón onUpgradeRequired nunca es llamado.
        if (iErrorCode == 8001) {
            Silverlight.onUpgradeRequired();
            return;
        }

        ...
    }
...
</script>

Luego hay que añadir el siguiente código en JavaScript. Estas funciones nos permiten controlar el HTML que es desplegado dependiendo de si Silverlight está instalado y cuál es su versión.

<script type="text/javascript"
        src="scripts/plugindetect.js"></script>
<script type="text/javascript"
        src="scripts/Silverlight.supportedUserAgent.js"></script>
<script type="text/javascript">

  Silverlight.onRestartRequired = function () {
    DisplayAltenativeContent(
      "<p>¡Casi listo! Tan sólo hay que reiniciar" +
      "el navegador para usar la aplicación.</p>");
  };

  Silverlight.onUpgradeRequired = function () {
    PluginDetect.getVersion('.');
    DisplayAltenativeContent(
      "<p>La versión de Silverlight instalada es  " +
      PluginDetect.getVersion('Silverlight') + " " +
      "pero la aplicación ocupa que sea por lo menos " +
      getRequiredVersion() + ".</p>" +
      "<p>Por favor obtenga la versión más reciente " +
      "haciendo clic abajo.</p>" +
      Silverlight.buildPromptHTML(getRequiredVersion()));
  };

  Silverlight.onInstallRequired = function () {
    DisplayAltenativeContent(
      "<p>Silverlight no parece estar instalado " +
      "(o ha sido desactivado).</p>" +
      "<p>Para instalarlo por favor haga clic abajo.</p>" +
      Silverlight.buildPromptHTML(getRequiredVersion()));
  };

  DisplayAltenativeContent = function (html) {
    document.getElementById("plugin").innerHTML =
      "<div id='content'>" + html + "</div>";
  };

  getRequiredVersion = function () {
    return document.getElementById("minRuntimeVersion")
           .getAttribute("value");
  }

  checkSupported = function () {
    // Verificar si el navegador es compatible.
    if (Silverlight.supportedUserAgent()) {
      document.getElementById("unsupported").innerHTML =
        "<p>Este navegador no está listado oficialmente " +
        "como compatible con Silverlight, pero es " +
        "posible que aun así funcione bien " +
        "(<a target='_blank' href='http://www." +
        "microsoft.com/silverlight/resources/install.aspx" +
        "#sysreq'&gtmás detalles</a>).</p>";
    }
  }

  // Esta función es llamada repetidamente mientras Silverlight
  // está siendo instalado y puede usarse para actualizar un
  // control que muestre su progreso.
  onSourceDownloadProgressChanged = function (sender, eventArgs)
  {
    //var slPlugin = sender.getHost();
    //slPlugin.content.findName("progressMessage").Text =
    //  Math.round(eventArgs.progress * 100) + "%";
  };

</script>

Al cargar la página podemos entonces llamar la función checkSupported() para que le avise al usuario si el navegador no es del todo compatible. Lo importante es no dejar de intentar la instalación incluso si no está en la lista oficial de navegadores compatibles de Microsoft. Es posible que todavía se pueda ejecutar.

<body onload="javascript: checkSupported();">

Finalmente, podemos alterar el elemento object para que incluya ciertos parámetros adicionales (y algunos divs extra en mi ejemplo). Presten especial atención a onUpgradeRequired, onInstalledRequired y onRestartRequired. Estos apuntan a funciones que serán llamadas por Silverlight.js durante las diferentes etapas.

<div id="silverlight">
  <div id="plugin">
    <object data="data:application/x-silverlight-2"
            type="application/x-silverlight-2"
            width="100%" height="100%">
      <param name="source"
             value="ClientBin/ExperienciaDeInstalacion.xap"/>
      <param name="onError"
             value="onSilverlightError" />
      <param name="background" value="black" />
      <param id="minRuntimeVersion"
             name="minRuntimeVersion"
             value="9.0.50401.0" />

      <!-- Estos parámetros son para -->
      <!-- presentar la pantalla de cargado.  -->
      <param name="splashscreensource"
             value="ClientBin/splash_spinner.xaml" />
      <param name="onSourceDownloadProgressChanged"
             value="onSourceDownloadProgressChanged" />

      <!-- Estos son para la instrucciones -->
      <!-- de instalación/actualización. -->
      <param name="onUpgradeRequired"
             value="onUpgradeRequired" />
      <param name="onInstallRequired"
             value="onInstallRequired" />
      <param name="onRestartRequired"
             value="onRestartRequired" />
      <param name="autoUpgrade"
             value="false" />
    </object>
    <iframe id="_sl_historyFrame"
            style="visibility:hidden;height:0px;width:0px;border:0px">
    </iframe>
  </div>
  <div id="unsupported">
  </div>
</div>

Para probar, se puede cambiar el minRuntimeVersion a un número mayor del que está actualmente instalado causando el siguiente resultado.

Noten que he incluido PluginDetect en mi página, para poder identificar la versión instalada de Silverlight. Hay veces en que puede ser más fácil poder informar al usuario cuál versión es la que tienen y cuál es la que ocupan. Por supuesto, podemos decidir cuántos detalles mostrar mediante modificar Silverlight.onUpgradeRequired. El enlace para instalar la versión deseada es creado mediante llamar la función Silverlight.buildPromptHTML(versión) (definida en Silverlight.js).

El siguiente experimento es desactivar el plugin de Silverlight en el navegador. De esta manera se puede simular el caso de un usuario sin Silverlight en su máquina. De acuerdo con el código en Silverlight.onInstallRequired, debería verse algo como esto en la pantalla:

Otra prueba es usar un navegador que no esté en la lista de los compatibles. Volviendo la versión a la que teníamos originalmente especificada, abrimos a página en el navegador de prueba y esta vez la aplicación es cargada pero con una nota de advertencia.

También es fácil comprobar si la aplicación ha sido instalada en la computadora. Todo lo que hay que hacer es verificar la condición App.Current.InstallState == InstallState.Installed y si es cierta entonces desplegar algo como lo siguiente.

Actualizando una aplicación OOB

Si la aplicación tiene como propósito que sea eventualmente instalada en el computador y usada en fuera del navegador (OOB por sus siglas en inglés), entonces es importante asegurarse de que revise si hay actualizaciones disponibles en el servidor. Recuerden que una vez que el usuario instala la aplicación, dejará de ser actualizada automáticamente, aun habiendo nuevas versiones del XAP en el servidor.

En mi ejemplo he creado una página con el propósito específico de revisar si hay actualizaciones. La página es cargada siempre al inicio de la aplicación y le avisa al usuario si hay una actualización disponible, si no entonces pasa el mando a la página principal.

De esta manera podemos informar al usuario que la aplicación está buscando actualizaciones y presentar una animación mientras tanto.

El único código interesante de esta página es:

App.Current.CheckAndDownloadUpdateCompleted +=
    Current_CheckAndDownloadUpdateCompleted;
App.Current.CheckAndDownloadUpdateAsync();

Es no más asunto de conectar un controlador que sea ejecutado cuando complete CheckAndDownloadUpdatesAsync() y que informe al usuario si hay una nueva versión disponible. Algo como esto:

Pantalla de cargado personalizada

Finalmente, una forma efectiva de darle un aspecto profesional es evitar que esta animación aparezca:

El procedimiento es sencillo y ha sido bien explicado por Laurent Duveau y en MSDN por lo que no voy a repetirlo acá. Sin embargo, hay algunas cosas que a veces no quedan claras:

• No estoy seguro por qué, pero la pantalla de cargado no siempre aparece. En todo caso, he notado lo siguiente:
  • Chrome parece ser el mejor portado.
  • Limpien el cache del navegador para asegurarse de que de hecho están descargando algo.
  • He obtenido resultados más consistentes haciendo clic derecho en la página HTML (o aspx) y seleccionando Ver en el explorador… en vez de usar F5 para depurar.
• Si ven la animación original con las esferas azules el problema es generalmente un error ortográfico en alguno de los parámetros en el elemento object. Si ven una página en blanco si pantalla de cargado entonces probablemente la aplicación no ha sido descargada. Tal vez por estar en el cache; vean el paso anterior.
• El XAML de la pantalla de cargado es un fragmento. No necesita estar dentro de un UserControl o Page. Por ejemplo, basta con declarar un elemento Canvas o Grid y crear el contenido (ejemplos más adelante).
• Puesto que el XAML reside en la página de web, no es posible verla en el área de diseño de Blend. Lo que se puede hacer es diseñarla dentro de un proyecto de Silverlight y ya cuando está lista copiar el fragmento a la página de web.
• No es posible usar código subyacente por lo que si tienen una animación, debe ser iniciada de una manera como esta:

   

  <Grid>
  
      <Grid.Triggers>
          <EventTrigger RoutedEvent="Grid.Loaded">
              <BeginStoryboard>
                  <Storyboard>
                      ...
                  </Storyboard>
              </BeginStoryboard>
          </EventTrigger>
      </Grid.Triggers>
  
      <!-- Agregar controles animados por el guión -->
  
  </Grid>

Les muestro ahora un par de ejemplos de pantallas de cargado.

La forma más sencilla es rotar una imagen:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Name="parentCanvas"
  Background="Black" >

  <Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever">
          <DoubleAnimation
                 Storyboard.TargetName="spinnerRotation"
                 Storyboard.TargetProperty="Angle"
                 From="0" To="360" Duration="00:00:02" >
          </DoubleAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Grid.Triggers>

  <StackPanel VerticalAlignment="Center"
              HorizontalAlignment="Center">

    <Image Source="/images/spinner.png"
           Stretch="None" Margin="15" >
      <Image.RenderTransform>
        <RotateTransform x:Name="spinnerRotation"
                         Angle="0" CenterX="25"
                         CenterY="25">
        </RotateTransform>
      </Image.RenderTransform>
    </Image>
  </StackPanel>

</Grid>

Otra es usar animaciones diferidas:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Name="parentCanvas"
  Background="Black">

  <Grid.Triggers>
    <EventTrigger RoutedEvent="Grid.Loaded">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <DoubleAnimation Storyboard.TargetName="c1"
                           Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0" From="0" To="1"
                           By="0.1" Duration="0:0:0.2"
                           AutoReverse="True" >
          </DoubleAnimation>
          <DoubleAnimation Storyboard.TargetName="c2"
                           Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0.1" From="0" To="1"
                           By="0.1" Duration="0:0:0.2"
                           AutoReverse="True" >
          </DoubleAnimation>
          <DoubleAnimation Storyboard.TargetName="c3"
                           Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0.2" From="0" To="1"
                           By="0.1" Duration="0:0:0.2"
                           AutoReverse="True">
          </DoubleAnimation>
          <DoubleAnimation Storyboard.TargetName="c4"
                           Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0.3" From="0" To="1"
                           By="0.1" Duration="0:0:0.2"
                           AutoReverse="True">
          </DoubleAnimation>
          <DoubleAnimation Storyboard.TargetName="c5"
                           Storyboard.TargetProperty="Opacity"
                           BeginTime="0:0:0.4" From="0" To="1"
                           By="0.1" Duration="0:0:0.2"
                           AutoReverse="True">
          </DoubleAnimation>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Grid.Triggers>

  <TextBlock x:Name="progressMessage" Text="0%"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             FontWeight="Bold" FontSize="12"
             Foreground="#FFB3BABA">
  </TextBlock>

  <StackPanel Orientation="Horizontal" Margin="0,20,0,0"
             HorizontalAlignment="Center"
             VerticalAlignment="Center" >
    <Ellipse x:Name="c1" Fill="White" Opacity="0"
             HorizontalAlignment="Left"
             Height="4" Stroke="Black"
             VerticalAlignment="Bottom" Width="10"/>
    <Ellipse x:Name="c2" Fill="White" Opacity="0"
             HorizontalAlignment="Left"
             Height="4" Stroke="Black"
             VerticalAlignment="Bottom" Width="10"/>
    <Ellipse x:Name="c3" Fill="White" Opacity="0"
             HorizontalAlignment="Left"
             Height="4" Stroke="Black"
             VerticalAlignment="Bottom" Width="10"/>
    <Ellipse x:Name="c4" Fill="White" Opacity="0"
             HorizontalAlignment="Left"
             Height="4" Stroke="Black"
             VerticalAlignment="Bottom" Width="10"/>
    <Ellipse x:Name="c5" Fill="White" Opacity="0"
             HorizontalAlignment="Left"
             Height="4" Stroke="Black"
             VerticalAlignment="Bottom" Width="10"/>
  </StackPanel>
</Grid>

Pueden descargar el código de ejemplo acá. Mi recomendación es crear una aplicación de gran tamaño (decenas de MiB) que requiera una descarga lo suficientemente extensa como para ver la animación.

Andrew Tokeley

La migración de comentarios existentes parece haber sido un éxito.

Esperamos sea de tu agrado y cualquier duda o comentario no dudes en contactarme en twitter, correo o dejar un comentario

Recibí una pregunta pregunta en un post que había escrito previamente. La pregunta era como se puede cambiar una gráfica a la par con los datos de un DataGrid. La respuesta es ¡Con DataBinding!

Muchas gracias.

Ok ok, la explicación larga. Primero vamos a hacer un modelo para datos de prueba:

using System.ComponentModel;

namespace SilverlightApplication3
{
    public class SampleData : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get { return _name; }
            set
            { 
                _name = value;
                NotifyPropertyChanged("Name");
            }
        }

        private double _value;
        public double Value
        {
            get { return _value; }
            set 
            {
                _value = value;
                NotifyPropertyChanged("Value");
            }
        }

        public SampleData() {  }

        public void NotifyPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

Este modelo cuenta con dos propiedades (Name y Value) e implementa INotifyPropertyChanged para poder manejar el Binding de forma correcta.

Ahora creamos el ViewModel. En una aplicación real deberías obtener dichos valores desde un webservice en tu servidor, pero para efectos prácticos, aquí inicializo una lista de objetos SampleData (nuestro modelo) en el constructor del ViewModel.

using System.Collections.Generic;

namespace SilverlightApplication3
{
    public class ViewModel
    {
        public string Title { get; set; }
        public List<SampleData> Samples { get; set; } 

        public ViewModel()
        {
            Title = "Probando graficas";
            Samples = new List<SampleData>();
            Samples.Add(new SampleData() { Name = "Nombre 1", Value = 1 });
            Samples.Add(new SampleData() { Name = "Nombre 2", Value = 4 });
            Samples.Add(new SampleData() { Name = "Nombre 3", Value = 3 });
            Samples.Add(new SampleData() { Name = "Nombre 4", Value = 2 });
            Samples.Add(new SampleData() { Name = "Nombre 5", Value = 5 });
        }
    }
}

Finalmente creamos nuestra vista en XAML:

;"]<UserControl x:Class="SilverlightApplication3.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"
             d:DesignHeight="390"
             d:DesignWidth="638"
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
             xmlns:me="clr-namespace:SilverlightApplication3"
             xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">
    <UserControl.Resources>
        <me:ViewModel x:Key="model" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot"
          Background="White"
          DataContext="{Binding Source={StaticResource model}}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="237" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel>
            <TextBlock Text="{Binding Title}"
                       FontWeight="Bold"
                       Margin="0,10"
                       HorizontalAlignment="Center" />
            <sdk:DataGrid AutoGenerateColumns="False"
                          x:Name="dataGrid1"
                          VerticalAlignment="Top"
                          ItemsSource="{Binding Samples, Mode=TwoWay}"
                          Margin="10,0">
                <sdk:DataGrid.Columns>
                    <sdk:DataGridTextColumn Header="Nombre"
                                            Binding="{Binding Name}" />
                    <sdk:DataGridTemplateColumn Header="Valor"
                                                Width="150">
                        <sdk:DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Slider Value="{Binding Value, Mode=TwoWay}"
                                            Maximum="5"
                                            Minimum="0"
                                            Width="100" />
                                    <TextBlock Text="{Binding Value, StringFormat=\{0:F4\} }" />
                                </StackPanel>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellEditingTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>
        </StackPanel>
        <Grid Grid.Column="1">
            <toolkit:Chart Margin="10">
                <toolkit:ColumnSeries x:Name="columnSeries1"
                                      ItemsSource="{Binding Samples, Mode=TwoWay}"
                                      IndependentValuePath="Name"
                                      DependentValuePath="Value">
                    <toolkit:ColumnSeries.DependentRangeAxis>
                        <toolkit:LinearAxis Orientation="Y"
                                            Minimum="0"
                                            Maximum="5.5" />
                    </toolkit:ColumnSeries.DependentRangeAxis>
                </toolkit:ColumnSeries>
            </toolkit:Chart>
        </Grid>
    </Grid>
</UserControl>

En la línea 13 creamos una instancia de nuestro ViewModel y la agregamos a nuestros recursos locales. Después, en la línea 17 asignamos dicho recurso al DataContext de nuestro LayoutRoot (en este caso el Grid que contiene todos los elementos de la vista). En la línea 30 definimos la propiedad Samples de nuestro ViewModel como la fuente de datos del DataGrid. En la línea 40 definimos el binding a la propiedad Value con un slider para modificar los datos fácilmente. Las líneas 55 y 57 se encargan de hacer lo mismo para la gráfica de barras.

Nótese como los bindings se definien con el Mode=TwoWay para actualizar el ViewModel “de ida y vuelta”, es decir, que los cambios en la vista se reflejan en el ViewModel y viceversa.

Puedes ver el ejemplo corriendo aquí. Y puedes descargar el código aquí.

UPDATE: De pura casualidad encontré mi compañera Araceli Medina encontró un bug en el Silverlight Toolkit mientras jugaba con el demo. Estaba jugando con mover sliders y cambiar el tamaño de la ventana cuando noté que esto pasaba:

El borde inferior de los rectangulos no se quedaba en la parte de abajo de la gráfica. No estoy seguro a qué se deba esto pero si se vuelve a cambiar el tamaño de la ventana el problema se corrije. El bug fue dado de alta en codeplex.

[Artículo originalmente publicado en JAMolina.com]

El patrón de diseño Modelo-Vista-Modelo de vista es más una estrategia, una idea general de cómo estructurar la solución a un problema. En vez de listas de pasos, necesariamente lo que encontramos son explicaciones de los componentes principales del patrón y algunos ejemplos de su aplicación. Para los que todavía no están familiarizados con el patrón, Jeremy Likness ha escrito una muy buena introducción al tema.

Estrategia y táctica

Si bien la estrategia a utilizar es esencial, las tácticas son las que ponen en acción el plan principal. En una batalla, la estrategia puede ser ocupar cierta zona para avanzar en el territorio enemigo, pero la forma en que las fuerzas son distribuidas o los diferentes ataques individuales forman las tácticas del enfrentamiento.

En MVVM, la estrategia es dividir la solución en ciertas zonas o capas como el modelo, la vista, y el pegamento entre ambas: el modelo de vista. Las tácticas incluyen, entre muchas otras, la navegación entre vistas, el envío de datos del modelo a la vista, la comunicación entre la vista y el modelo de vista, el uso de comandos y así por el estilo.

Aunque MVVM no se presta a recetas premeditadas, sí hay gran variedad de técnicas o tácticas que pueden ser usadas en su aplicación al problema y que pueden ser bien definidas en procedimientos concretos. Por ejemplo, en las últimas semanas he estado publicando traducciones de algunos artículos que proponen métodos para resolver el problema de la asociación entre vistas y modelos de vista y el manejo de transacciones en la interfase gráfica de la aplicación.

La ventaja del sistema completo, estrategia y técnica, es que podemos escoger las que mejor se adapten a nuestras circunstancias particulares o, siendo francos, a nuestro gusto. Los siguientes artículos muestran algunas formas de resolver problemas comunes enfrentados al implementar MVVM. Los invito a leerlos y escoger los que les parezcan apropiados, elegantes, efectivos, o cualquier otro aspecto que les llame la atención.

• 5 pasos sencillos para usar comandos en Silverlight
• Sencillo localizador de modelos de vista para MVVM
• Otro patrón de localización de modelos de vista
• Transacciones en MVVM
• Ejemplo de MVVM con transacciones y localizador de modelos de vista

En un principio las publicaciones serán “back to basic” para los nuevos aventureros, pero pronto realizaré entregas sobre temas como PivotViewer, Photosynth, mejoras en la experiencia de usuario y algunos mini-proyectos para avanzar en cuanto a conocimiento se refiere. Siéntanse en todo el derecho de preguntar cualquier duda que tengan, si conozco la respuesta con gusto se las daré y sino con gusto la buscaré  

Si desean contactarme pueden hacerlo a través de este medio.

Saludos!!

Existen una gran cantidad de escenarios en donde es necesario conocer la dirección IP local de la máquina en donde está corriendo una aplicación, principalmente por cuestiones de auditoría, seguridad, etc.  A partir de Silverlight 4 contamos con la posibilidad de ejecutar las aplicaciones Afuera del Navegador en un modelo de seguridad de Confianza Elevada, es decir, rebasando las restricciones inherentes a esta tecnología Web para que los aplicativos puedan comportarse casi como si se tratasen de una aplicación de escritorio tradicional.

En el caso de aplicaciones de Silverlight tradicionales (dentro del navegador) podríamos conocer la dirección IP del usuario en el Servidor.  Pero ¿qué pasa con Aplicaciones Fuera del Navegador, en donde no tenemos la seguridad de que se cuente con acceso a un Servidor y mucho menos conectividad como tal?

En este artículo veremos cómo podemos obtener la dirección IP local del equipo desde una aplicación de Silverlight 4 que esté ejecutando en Confianza Elevada, a través del uso de WMI (acrónimo de Windows Management Instrumentation): la infraestructura de administración de datos (de hardware y software) y notificaciones en los Sistemas Operativos Windows.

Lee el artículo completo aquí

En La Liga Silverlight tenemos una gran cantidad de ideas con respecto a la comunidad durante este 2011.  No obstante, nos gustaría conocer de su propia autoría:

• ¿qué les gustaría ver en esta comunidad?
• ¿cuáles son los temas que más les interesan?
• ¿qué tipo de recursos de aprendizaje y apoyo quisieran encontrar?
• ¿qué ha sido lo más difícil para ustedes en el aprendizaje de Silverlight y tecnologías relacionadas y que quisieran tener más información en Español al respecto?

Todos los comentarios son bienvenidos!

Salu2!

Hoy 02 de diciembre 2010 se marca un hito más en la historia de Silverlight ya que durante el evento Silverlight Firestarter llevado a cabo en el campus de Microsoft y también en línea se ha dado a conocer al mundo entero las características que incluirá Silverlight 5.  Con más de 40 nuevas características, Silverlight se establece como la plataforma de desarrollo preferida para la construcción de aplicaciones de negocio de próxima generación.

Entre las características, las más destacables (a mi parecer) son:

• Texto multicolumna
• Claridad de texto mejorada
• Soporte para OpenType
• Soporte para impresión vectorial Postscript
• Soporte para depuración y breakpoints en Bindings
• DataTemplates implícitos
• Binding en Setters de Estilos
• API 3D acelerada por GPU
• Invocación de código no-administrado a través de P/Invoke
• Soporte de múltiples ventanas en Aplicaciones Fuera del Navegador
• Características de Confianza Elevada dentro del navegador (a través de una política de grupo)
• Soporte para Sistemas Operativos de 64 bits

Espero que con esto sea suficiente para terminar con todas las suposiciones que se han sucitado en las últimas semanas.  Sin duda alguna esto apenas es el comienzo de un futuro (más) brillante para la plataforma.  Los bits mostrados hoy no están disponibles aún para descarga, pero estén pendientes de más noticias al respecto en los próximos meses!

Les invito a que revivan el keynote aquí y revisen toda la información completa de características aquí.

Salu2!

Aquí se los vuelvo a poner para que lo utilicen en sus aplicativos, espero que les sirva!  Por favor comenten aquí si les sirve y para qué lo están utilizando!

El vínculo de descarga es:

http://ligasilverlight.com/codigo/Mexico.rar

Salu2!

A propósito del lanzamiento de Halo: Reach, Microsoft ha lanzado un nuevo sitio oficial para Halo en el que podrás disfrutar de una buena experiencia a través de HTML y Silverlight.

El sitio está dividido en tres vistas (cada una de ellas basadas en un rol del juego)

Desde el XBox verás la vista de Admiral, en ella podrás ver información general sobre el universo de Halo. Todo este acceso será un poco limitado en profundidad y detalle.

Desde una PC verás la vista de Ingeniero, dónde podrás visitar todos los detalles de la información.

Desde un Dispositivo Móvil verás la vista de Soldado en el Campo, ésta es una aplicación móvil que servirá como apoyo para recibir información relevante sobre el universo de Halo en tu móvil. Ésta aplicación vendrá también pre-instalada en Windows Phone 7.

Características relevantes del sitio

Navegador de videos con soporte y control a través de mouse y teclado. El streaming del video está hecho via IIS Smooth Streaming.

Una poderosa galería de medios donde podrás filtrar el contenido para ver sólo lo que a tí te interesa, además la navegación ha sido planeada para mostrar grandes cantidades de medios en un espacio cómodo de consultar.

Favoritos, si te interesa algún contenido en particular puedes marcarlo en tus favoritos y después encontrarlo de nuevo fácilmente. ¿Quiéres compartir algún contenido en particular? bien, puedes usar la característica de “deep links”.

Este sito sirve perfectamente como ejemplo de como Silverlight puede ampliar los sitios acoplándose perfectamente con HMTL trabajando en equipo. Vale la pena estudiarlo desde un punto de vista técnico.

Via alFador en punto NET

Raúl Mayo, es un Microsoft Certified Professional Developer, quien ha estado trabajando en Silverlight y Windows Phone 7, su blog lo pueden encontrar en http://geeks.ms/blogs/rmayo/ en donde podrán leer artículos de Silverlight y Windows Phone 7, entre otros temas.

Raul, agredecemos tu interes por aportar y enriquecer los contenidos de La Liga Silverlight. Estamos seguros que estos serán de gran ayuda.

Nota: si tu también estas interesado en participar en La Liga Silverlight, no dudes en enviarnos un correo a: arturo.molina@ligasilverlight.com o jorge.levy@ligasilverlight.com

Para demostrar la productividad de esta unión, vamos a crear un Webpart de basado en Silverlight.Este leerá el contenido de las diferentes listas, que contiene el sitio de SharePoint 2010 que usaremos para este artículo.

Comenzaremos accediendo a el sitio de SharePoint 2010 sobre el que vamos a trabajar a lo largo de este artículo. Dentro del mismo vamos a crear una biblioteca de documentos, en la que guardaremos el archivo .XAP. Resultante de implementar la solución desarrollada en Silverlight.

La creación de la biblioteca de documentos la realizaremos accediendo a Acciones de Sitio->Nueva Biblioteca de Documentos, como podemos observar en la siguiente imagen:

Al realizar dicha acción, nos surgirá una ventana emergente en la que introduciremos el nombre de la biblioteca de documentos.En este caso la nombraremos como StoreSilverlight el resto de opciones las dejaremos como en la siguiente imagen:

Ahora vamos a añadir una nueva WebPart con formato Silverlight. Nos situamos en Acciones del Sitio y elegimos la acción de Editar Página.

Al elegir está acción, nuestra página pasará a estado de edición. En la sección Herramientas de edición elegimos la pestana Insertar. Seguidamente seleccionamos la opción Elemento Web(Webpart).

Ahora en la sección Categorías seleccionamos Medios y Contenidos y por último elegimos Elemento Web de Silverlight y elegimos Aceptar.

Realizando la anterior acción, nos aparecerá una ventana emergente donde se pedirá la url donde vamos a situar el archivo .XAP. Elegiremos la url de la biblioteca de documentos StoreSilverlight, creada con anterioridad. En la parte final de este artículo, indicaremos al webpart el lugar y nombre exacto del archivo .XAP.

Como podéis observar se a creado el WebPart pero no tiene contenido, así que manos a la obra para crear ese contenido. Creamos un nuevo proyecto en Visual Studio 2010, la plantilla que vamos a utilizar es Visual C#->SharePoint->2010->Empty SharePoint Project. El nombre del proyecto será ImplementarSolSP.

Al crear este proyecto, se pide que apunte hacia el sitio web con el que estamos trabajando:

El siguiente paso es incluir un nuevo proyecto Silverlight, para ello nos situamos en la solución(ImplementarSolSP) con el botón derecho y elegimos Añadir nuevo proyecto. Elegimos la siguiente plantilla Visual C#->Silverlight->Silverlight Application. El nombre de el proyecto será AplicacionSilverlight. Al crear el proyecto debemos deseleccionar, la opción de crear un alojamiento de prueba para el proyecto creado como podemos observar en la siguiente imagen:

El último paso que realizaremos en nuestro proyecto Silverlight es cambiar el fondo de nuestro proyecto, para que este se distinga cuando sea implementado en el WebPart.

Accedemos al archivo MainPage.Xaml y dentro de la etiqueta Grid incluiremos el siguiente fragmento de código:

Ahora añadimos a ImplementarSolSP el módulo que consigue incluir el archivo .Xap de Silverlight en SharePoint 2010. Presionamos con el botón derecho sobre la solución ImplementarSolSP, elegimos añadir nuevo elemento y elegimos la plantilla Visual C#->SharePoint->2010->Module. El nombre del módulo será ModuloSilverlight.

Seguidamente en el explorador de soluciones de Visual Studio 2010, vamos a situarnos con el botón derecho sobre el archivo Sample.txt y elegiremos la opción borrar.

Ahora vamos a decir a nuestro proyecto SharePoint que implemente la solución a través de el modulo de Silverlight que hemos creado con anterioridad. Para ello, hacemos Click sobre ModuloSilverlight y en la sección propiedades de Visual Studio 2010, seleccionamos el botón desplegable de la propiedad Project Output References como podemos observar en la siguiente imagen:

Al presionar dicho botón aparecerá una ventana emergente en la que presionaremos sobre añadir.Al añadir un nuevo miembro debemos de elegir el tipo de implementación como ElementFile y el nombre del proyecto será AplicacionSilverlight como podemos observar en la siguiente imagen:

Presionamos Ok para realizar la correspondiente acción.

Ahora nos situamos en el archivo Elements.xml, dejando su contenido del siguiente modo:

Como podemos observar le decimos al módulo de carga que guarde el archivo .Xap en nuestra biblioteca de documentos StoreSilverlight.

Ahora solo queda construir la solución (F6 en Visual Studio 2010), después implementaremos la solución:

Finalmente comprobaremos que la solución a través del archivo AplicacionSilverlight.xap a sido añadida a la biblioteca de documentos StoreSilverlight.

Para que se cargue AplicacionSilverlight.xap en el Webpart deberemos situarnos en el WebPart y elegir la opción abre el panel de herramientas, al realizar dicha acción se desplegará el cuadro de opciones del WebPart como podemos observar a continuación:

Al presionar configurar nos pedirá una url donde está situado el archivo que va ser mostrado en la WebPart:

De esta forma podremos ver que efectivamente la solución de Silverlight se ha implementado en el WebPart:

Vamos a pasar a la segunda parte del artículo que es poder acceder a las listas de nuestro sitio  SharePoint 2010 y trabajar con su contenido a través del WebPart de Silverlight creado con anterioridad.

Abrimos la solución  ImplementarSolSP con Visual Studio 2010 y accedemos al proyecto AplicacionSilverlight. Presionando sobre referencias con el botón derecho, elegimos añadir nueva referencia.En la ventana emergente elegiremos la pestaña examinar, las librerías que queremos usar son Microsoft.SharePoint.Client.Silverlight y Microsoft.SharePoint.Client.Silverlight.Runtime, que están situadas en C:\Archivos de Programa\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin .

Ahora debemos de referenciar dichas librerías en el proyecto. Abrimos AplicacionSilverlight.xaml.cs y las referenciamos añadiendo el siguiente código:

Abriremos el archivo App.xaml.cs y referenciamos nuevamente las librerías añadiendo el siguiente código:

Nos situamos en el método Application_Startup incluyendo el siguiente código en el mismo:

De esta forma sincronizaremos SharePoint con el proyecto Silverlight.

Ahora vamos a modificar la interfaz del proyecto Silverlight. Abrimos AplicacionSilverlight.xaml e incluimos el siguiente código:

Como podemos observar hemos introducido dentro de Grid principal un objeto ListBox que cargará las diferentes listas de SharePoint y un objeto TextBox que se encargará de cargar los detalles de cada una de las listas.

Ahora situándonos en AplicacionSilverlight.xaml.cs vamos a incluir dos variables, _sitio se encarga de cargar el sitio y _list se encarga de cargar las diferentes listas del sitio.

El siguiente paso es la creación del contexto basado en el sitio que utilizamos para este artículo y cargarle las listas de este sitio. Para ello debemos introducir el siguiente código en el constructor:

A continuación vamos a agregar los dos métodos que hemos nombrado en la llamada asincrona utilizada con anterioridad:

Situándonos en el área de diseño de AplicacionSilverlight.xaml, haremos doble clic sobre el ListBox, para generar el evento de cambio de selección de Item. Al realizar dicha acción accederemos directamente a AplicacionSilverlight.xaml.cs e incluiremos el siguiente código:

Por último añado el método que mostrará los detalles de la lista seleccionada en el ListBox en el TextBox:

Para ver el efecto de todos los cambios que hemos realizado, construimos nuevamente la solución(F6 en Visual Studio 2010) e implementamos la solución. El paso definitivo es refrescar la página en la que hemos introducido la WebPart de Silverlight. El resultado es el de la siguiente imagen:

En conclusión, uniendo las dos plataformas de Microsoft podemos crear unas experiencias de usuario muy dinámicas, donde tenemos un nivel de productividad muy alto. Ahora solo queda que le deis una vuelta de tuerca a la idea inicial y conseguiréis proyectos realmente profesionales.

Espero que hayáis disfrutado de esta primera entrada y deseo que en un futuro sigáis leyendo las distintas publicaciones que realizaré.