Pero esta vez, Arcade Fire y Google van mucho más alla, haciendo el video de la canción “We used to wait” un experimento con html5 que muestra el potencial de esta tecnología que si bien no cuenta con una especificación terminada, ya está dando muestras del poder con el que cuenta.

En la página en cuestión (que por cierto, recomiendan altamente el uso de Google Chrome) tu puedes escribir la dirección del barrio donde creciste (yo tuve que insertar una dirección en Estados Unidos pues la de México no me funcionó). Después de un tiempo de carga un poco largo (pero que vale la pena) podrás ver como se desarrolla el video en distintas ventanas, algunas de las cuales muestra imágenes y vistas de la dirección que escribiste.

Qué bueno ver a grupos rompiendo esquemas en una época donde la industria musical está en decadencia y que bueno ver el potencial de html5 en acción.

En vísperas de dichos aconteciemientos en La Liga Silverlight estamos organizando un evento para dar a conocer las herramientas de desarrollo para el Windows Phone 7. Aquí la información:

Agenda:

Tema	Expositor
Introducción a Windows Phone 7: Una propuesta diferente y una gran oportunidad (Intoducción y Market place)	Jorge Levy
Arquitectura y desarrollo de Aplicación en Windows Phone 7 con Silverlight	Arturo Molina
Desarrollo de juegos para Windows Phone con XNA Framework	Tarcisio de la Vega

Puedes registrarte aquí (La fecha y la hora están mal en esa liga, pero si es ahí donde tienes que registrarte).

• Habilidad para agregar una nueva fila al control DataGrid
• Mejoras el tiempo de carga de las aplicaciones
• Soporte para la rueda del mouse en las aplicaciones fuera del navegador para Mac
• Se arreglaron unos bugs relacionador con el uso de DRM para contenido multimedia
• Se arregló una fuga de memoria relacionada con el uso de MouseCapture
• Se arregló una fuga de memoria relacionada con el uso de DataTemplate

Aquí los pasos para bajar la nueva versión:

Para usuarios finales

Lo recomendado en el post de Tim Heuer es modificar el tag de object que hospeda nuestro xap dentro de nuestra página:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
  width="640" height="400">
    <param name="source" value="YOUR_PATH_TO_XAP" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="4.0.50826.0" />
    <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156&amp;v=4.0.50826.0" style="text-decoration: none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight"
          style="border-style: none" />
       </a>
</object>

La clave aquí están en las líneas 5 y 6, minRuntimeVersion indica que la versión mínima requerida para correr la aplicación y autoupgrade le pedirá permiso al usuario para actualizar la aplicación si la versión de Silverlight instalada es menor a la requerida.

Para desarrolladores

Debes actualizar tanto el developer runtime como el SDK (preferentemente en ese orden). Aquí las ligas para realizarlo:

• Windows developer runtime
• Mac developer runtime
• Silverlight 4.0.50826.0 SDK

Una vez instalados el runtime y el SDK puedes crear un nuevo proyecto de Silverlight y el tag de object reflejará automáticamente la nueva versión:

Puedes leer más información en el post de Tim Heuer y en el Knowledge Base de la actualización (KB2164913).

ASP.NET MVC3 Preview 1 – Índice

1. Introducción
2. Datos de la Vista dinámicos

NOTA: Este post es sobre una versión muy temprana de lo que será MVC3. Todo lo que está aquí esta sujeto a cambios drásticos mientras no se indique lo contrario.

Anteriormente, MVC nos permitía mandar cierta información del controlador a la vista usando un diccionario de tipo ViewDataDictionary que permitía almacenar todo tipo de información.

Dicho diccionario se llenaba como cualquier otro diccionario en el controlador:

ViewData["MensajeViewData"] = "Mensaje desde ViewData";

Y se accedia de la misma manera en la vista:

<%: ViewData["MensajeViewData"] %>

Ahora bien, lo nuevo en MVC3 es una nueva variable que en el controlador podemos es llamada ViewModel y es de tipo dinámico, osea, podemos asignar un valor del siguiente modo:

ViewModel.MensajeViewModel = "Mensaje desde ViewModel";

Y accederlo desde la vista de la siguiente manera:

<%: View.MensajeViewModel %>

¿En qué beneficia esto? Pues quizá no parezca mucho, pero nos ahorra 3 caracteres por casa variable que usamos (usar los dos corchetes y las comillas vs solo usar un punto).

¿Por qué no se llama igual la variable en el controlador (ViewModel) y en la vista (View)? De acuerdo con Phil Haack, el problema fue que cuando estaban implementando esta funcionalidad, lo hicieron primero en la vista, y escogieron el nombre View por ser corto y claro. El problema fue cuando portaron la funcionalidad a la clase Controller ya contenía un método llamado View, por lo que tuvieron que usar un nombre disponible como ViewModel que es más largo y va en contra de su objetivo de hacernos teclear menos. En mi humilde opinión, el hecho de que los datos introducidos en ViewData y ViewModel en el controlador pueden ser accedidos por medio de View (y ViewData para el caso), el nombre View está bien, pero puede haber quien encuentre esto un tanto confuso.

Otra cosa interesante es que el tipo dynamic nos permite almacenar no sólo objetos sino también funciones. Por ejemplo:

public ActionResult Index(){    ViewModel.MensajeViewModel = "Pasando una función";

    Func<int, int, string> funcionEsMayorQue =         (operador1, operador2) =>             operador1 > operador2 ? "Es mayor" : "No es mayor";

    ViewModel.EsMayorQue = funcionEsMayorQue;

    return View();}

Definimos una expresión lambda, en la cuál se recibirán dos enteros y se regresará un string indicando si el primer entero es mayor al primero o no (me rompí la cabeza pensando en este ejemplo). Esta función puede ser invocada en la vista de la siguiente manera:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    <h2><%: View.MensajeViewModel %></h2>

    <p>23 <%: View.EsMayorQue(23,7) %> que 7</p></asp:Content>

Lo cuál nos resulta en algo como esto:

Esto fué un pequeño vistazo a esta la nueva funcionalidad de MVC3 para usar datos de la vista almacenados en una variable de tipo dynamic, la cuál no sólo nos permite almacenar objetos sino también funciones.

Si tienes 3 minutos, puedes contestar la encuesta en su sitio para hacerle saber qué es lo que mejor funciona para ti.

¡Gracias! y por favor corran la voz.

ASP.NET MVC3 Preview 1 – Índice

1. Introducción
2. Datos de la Vista dinámicos

NOTA: Este post es sobre una versión muy temprana de lo que será MVC3. Todo lo que está aquí esta sujeto a cambios drásticos mientras no se indique lo contrario.

Para poder jugar con este Preview, pueden descargar un pequeño instalador que incluye las DLLs y plantillas requeridas.

Si bien en el diálogo de Nuevo Proyecto existe una plantilla para el View Engine de ASPX y otro para Razor (la nueva View Engine cuyo propósito es ser menos ceremonial y escribir menos caracteres de sintáxis), la idea es tener una sola plantilla y luego escoger el View Engine. Algo como lo que observamos al agregar una vista nueva:

Es importante mencionar que aquí se podrán integrar otros View Engines que no son de Microsoft como Spark, NHaml, NDjango y muchas otras.

En las próximas semanas estaré escribiendo sobre algunas de las nuevas características incluídas (y no incluídas) en este release.

Hace unos meses, decidieron abrir su plataforma para quien lo quisiera de manera gratuita. Esto quiere decir, que por medio de un proceso definido en Area51, la gente puede crear propuestas para tener un sitio muy similar, pero de temas diferentes (cocina, construcción, etc.). En conjunto con David Mora y Rodrigo Díaz, decidimos mandar nuestra propuesta para un sito como StackOverlfow, pero en español.

¿Por qué en español? Segun Wolpram Alpha, El español es hablado por unos 417 millones de personas (6.2% de la población mundial) y es el 3er idioma más hablado en el mundo (diferentes fuentes difieren en si es la 2da o 3ra lengua más hablada). Sin embargo, muchos recurrimos a sitios en inglés porque ser un idioma universal en el rubro.

La idea de este sitio es formar un espacio para desarrolladores de cualquier lenguaje de programación (C, C++, C#, Java, Ruby, Phyton, Javascript, Visual Basic, LISP, etc…), así como frameworks, librerías y herramientas de los mismos (LINQ, jQuery, ADO.NET, Drupal, etc…).

Si estás interesado, por favor apoya la propuesta en Area51 y corre la voz. ¡Muchas gracias!

UPDATE: Estoy consciente de la existencia de una página similar llamada YoProgramo.NET, la cuál me parece buena propuesta, pero me parece que tener el respaldo de un sitio ya establecido, con mayor funcionalidad y gente dedicada a desarrollar más funcionalidad, le daría mejor continuidad al proyecto. Además, no dependería de un pequeño grupo de personas, sino de una comunidad comprometida.

UPDATE 2: Para apoyar la propuesta, sólo tienen que “seguirla” (osea, darle Follow). Los sitios de StackExchange usan OpenID, por lo que si ya tienen cuenta en google, yahoo, blogger, wordpress, etc… no necesitan registrarse.

Pero no hay por que entrar en pánico, aquí una pequeña receta para crear tu propio archivo jquery-1.4.2-vsdoc.js

1. Descargar la versión minificada y/o la comprimida, así como también la documentación para Visual Studio de la versión 1.4.1 (en el caso de Visual Studio 2010, las plantillas de proyectos como MVC2 ya traen esa versión de la documentación)
2. Agregar los scripts a la solución
3. Renombrar jquery-1.4.1-vsdoc.js a jquery-1.4.2-vsdoc.js
4. Abrir el archivo renombrado y buscar la variable donde se define la versión de la librería (línea 225)
5. Como se puede ver en el log de cambios, esta versión agrega dos métodos: delegate() y undelegate(), así que sólo tenemos que agregar la documentación de dichos métodos después de documentación de unbind(), esto en la línea 2937

A continuación la documentación completa a agregar:

delegate: function( selector, types, data, fn ) {
/// <summary>
///   Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. See also "live".
/// </summary>
/// <param name="selector" type="String">
///     An expression to search with.
/// </param>
/// <param name="types" type="String">
///     A string containing a JavaScript event type, such as "click" or "keydown".
/// </param>
/// <param name="data" type="Object">
///     A map of data that will be passed to the event handler.
/// </param>
/// <param name="fn" type="Function">
///     A function to execute at the time the event is triggered.
/// </param>
    return this.live( types, data, fn, selector );
},
undelegate: function( selector, types, fn ) {
/// <summary>
///   Remove a handler from the event for all elements which match the current selector, now or in the future, based upon a specific set of root elements. See also "die".
/// </summary>
/// <param name="selector" type="String">
///     An expression to search with.
/// </param>
/// <param name="types" type="String">
///     A string containing a JavaScript event type, such as "click" or "keydown".
/// </param>
/// <param name="data" type="Object">
///     A map of data that will be passed to the event handler.
/// </param>
/// <param name="fn" type="Function">
///     A function to execute at the time the event is triggered.
/// </param>
    if ( arguments.length === 0 ) {
            return this.unbind( "live" );

    } else {
        return this.die( types, null, fn, selector );
    }
},

¡Listo! Ya tienen Intellisense en Visual Studio. No olviden agregar la referencia a la librería:

<script src="/Scripts/jquery-1.4.2.js" type="text/javascript"></script>

Referencia: StackOverflow

En dicho evento tuve la oportunidad de dar dos presentaciones:

• Stay in the zone. En donde se muestran las nuevas herramientas para ayudar al desarrollador a mantenerse enfocado (o recuperar la concentración) en lo que realmente importa. Muchos detalles que por pequeños que sean hacen una gran diferencia. Este ejemplo fue hecho con ASP.NET MVC, lo cuál lo hizo más interesante aún.
• Windows Phone 7 + Azure. Aquí se mostró Silverlight como plataforma de desarrollo para el nuevo sistema operativo de smartphones. Además las capacidades y facilidad de uso de Windows Azure.

La respuesta de la gente fue buena. Unas 50 personas en total aunque iban y venian . Y como siempre me agradó platicar con la audiencia sobre dudas y nuevas tecnologías.

El siguiente evento se llevará a cabo mañana jueves 15 de abril en el CUCEI:

Centro de Ciencias Exactas e Ingenierías, UdG
Fecha: jueves, 15 de abril de 2010
Hora: de 11:30 a.m. a 2:00 p.m.
Lugar: Auditorio Antonio Alatorre, CUCEI

Registro para evento CUCEI

¡Los esperamos!

Si ya tienen el SDK instalado, solo necesitan bajar la siguiente imagen, ya sea directamente aquí o por torrent aquí. [NOTA: Yo bajé el archivo directamente, no me hago responsable del torrent ]

Una vez que tienen la imagen, hay que colocarla en C:\Program Files\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images. Es muy recomendable respaldar la imagen que ya se encuentra ahí (por ejemplo, agregarle la extensión .old o algo por el estilo) ya que al parecer la imagen completa no permite instalar aplicaciones para debugear. Finalmente solo renombran la imagen descargada a WM70C1.bin

Ahora solo entramos a Visual Studio 2010 y creamos un proyecto nuevo, de cualquier tipo pero que sea para Window Phone, presinamos F5 y ¡Listo!

Lamentablemente, yo no pude logearme a ninguna de mis cuentas para tratar de tener la experiencia completa. Pero por lo menos uno puede darse una idea más completa de lo que será.

En La Liga Silverlight y La Comunidad Guadalajara.NET estamos organizando diferentes eventos de lanzamiento de Visual Studio 2010 y Azure, en la ciudad de Guadalajara tendremos dos eventos con la siguiente agenda:

• Stay in the zone: Mejoras del producto para que el desarrollador no tenga que salir fuera de VS para conseguir lo que necesita para trabajar. Esto incluye mejoras de la interfaz, Extension Manager y Code Snippets.
• Desarrollo para Windows7: VS2010 permite crear aplicaciones para aprovechar todas las mejoras que Windows7 tiene de manera rápida. Esto incluye soporte multitouch, ribbon, animaciones.
• Desarrollo para Sharepoint: Las nuevas herramientas de Visual Studio para ayudar a desarrollar sobre esta plataforma tan popular
• Phone+Azure: Herramientas para crear aplicaciones de Windows Phone Series 7 con Silverlight y utilizar servicios en Windows Azure para que tu aplicación se conecte con otros usuarios.
• Team Collaboration: Mejoras para la colaboración del equipo, esto incluye, Team Foundation Client como parte de VS profesional además de Team Explorer en la web, diagramas de arquitectura para entender el código que otros desarrolladores escribieron, utilizar información recolectada automáticamente por los testers para corregir defectos en el código y nuevas gráficas creadas automáticamente para visualizar el progreso del equipo.

Para el evento en el Centro de Software un servidor estará dando las pláticas de Stay in The Zone y Phone + Azure. Estaremos dando un par de obsequios (no, lo siento, no habrá licencias gratis)

Para más información y otros eventos en México entra a: http://www.tuvidaencodigo.com

1. Visual Studio 2010 RC
2. Silverlight 4 Tools para VS2010. Esto incluye el runtime, SDK, herramientas para VS y WCF RIA Services
3. Silverlight Toolkit release de Marzo 2010 (Opcional, disponible próximamente)
4. WCF RIA Services toolkit (Opcional, son controles extras a los incluídos en la instalación de SL4 Tools)
5. Expression Blend 4 (Opcional)
6. Herramientas para el desarrollo de Windows Phone 7 (WP7)
7. Add-in para desarrollo de Windows Phone en Blend y SDK Preview para Windows Phone en Blend (WP7)

Próximamente estaremos publicando artículos sobre las novedades de esta versión los cambios. Si no pueden esperar, les recomiendo ver los posts de Tim Heuer y René Schulte sobre Silverlight 4 y el de Christian Schormann sobre Blend 4.

Por lo pronto ya contamos con un pequeño Hola Mundo para Windows Phone 7.

En esta ocasión, les voy a presentar el típico “Hola Mundo” versión WP7. Necesitarán:

• Visual Studio 2010 RC
• Windows Phone Developer Tools CTP

Ó en su defecto, la versión gratuita Visual Studio 2010 Express for Windows Phone.

Una vez instaladas las herramientas requeridas, abrimos Visual Studio 2010 (VS2010) y creamos un nuevo proyecto. Podemos ver que tenemos 2 nuevas secciones en nuestra ventana:

Seleccionamos Windows Phone Application bajo la sección Silverlight for Windows Phone y nombramos el proyecto.

Obtenemos el siguiente template por default:

Vamos a hacer unas modificaciones a nuestro XAML, donde cambiaremos los título que aparecen de forma predeterminada y agregaremos al ContentGrid un TextBox y un Button:

<Grid x:Name="LayoutRoot"
      Background="{StaticResource PhoneBackgroundBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <!--TitleGrid is the name of the application and page title-->
    <Grid x:Name="TitleGrid"
          Grid.Row="0">
        <TextBlock Text="HOLA MUNDO"
                   x:Name="textBlockPageTitle"
                   Style="{StaticResource PhoneTextPageTitle1Style}" />
        <TextBlock Text="Hola Mundo"
                   x:Name="textBlockListTitle"
                   Style="{StaticResource PhoneTextPageTitle2Style}" />
    </Grid>

    <!--ContentGrid is empty. Place new content here-->
    <Grid x:Name="ContentGrid"
          Grid.Row="1">
        <TextBox Height="72"
                 HorizontalAlignment="Left"
                 Margin="6,6,0,0"
                 Name="txtNombre"
                 Text=""
                 VerticalAlignment="Top"
                 Width="468" />
        <Button Content="Saluda"
                Height="70"
                HorizontalAlignment="Left"
                Margin="146,84,0,0"
                Name="button1"
                VerticalAlignment="Top"
                Width="160"
                Click="button1_Click" />
    </Grid>
</Grid>

Además en el evento del botón tendremos este sencillo código:

private void button1_Click(object sender, RoutedEventArgs e)
{
    this.textBlockListTitle.Text = "Hola " + txtNombre.Text;
}

Ahora solo tenemos que correr la aplicación para ver el resultado en el emulador:

Es importante hacer notar que el emulador tiene muchas funciones, como cambiar la orientación, capturar el teclado y simular multitouch (con monitores que lo soporten claro está).

También hay que considerar que esto es un CTP (Community Technical Preview). En mi caso el emulador es muy lento de cargar y me salian errores de repente. Sin embargo, vale la pena empezar a conocer las herramientas de desarrollo para el WP7.

El otro día mi amigo Jorge Levy estaba desarrollando una aplicación de Silverlight para una empresa de Tamales. Dicha aplicación cuenta con una página de contacto, donde muestra un control de Bing Maps y una opción para ver la fachada del local. Lo malo de esto es que para ver la fachada, el link te lleva a la página de Photosynth donde puedes ver el synth del local.

Me pareció una buena idea, pero no me gustó el hecho de que no pudieras ver el synth dentro de la aplicación. Me di a la tarea de investigar una forma de hacer esto. Primero pensé, en Silverlight 4 beta es posible poner contenido HTML, pero esto tiene dos problemas actualmente. Primero, ¡Es BETA! por lo que para ver la página estarías obligando al usuario a buscar el runtime de SL4Beta (pues en la página te dan la liga para instalar la última versión estable). Segundo, esta funcionalidad solo funciona fuera del navegador, lo cuál tampoco queremos, pues no queremos forzar al usuario a instalar una appliación nada más para esto.

Pues bien, después de buscar y buscar, encontré este post donde aprendí sobre la existencia de un control gratuito llamado HtmlHost. Todo lo que hay que hacer es descargar el zip y descomprimirlo en su lugar predilecto para librerías.

Para una pequeña demostración, vamos a crear un proyecto nuevo de Silverlight, y vamos a agregar como referencia el emsamblado que acabamos de descargar: Divelements.SilverlightTools.dll

Después abrimos MainPage.xaml en Blend para hacer una layout rápido:

Aquí tenemos una versión resumida del XAML:

<UserControl x:Class="PhotosynthDemo.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"
     xmlns:divel="clr-namespace:Divelements.SilverlightTools;assembly=Divelements.SilverlightTools"
     mc:Ignorable="d"
     d:DesignWidth="640"
     d:DesignHeight="480">

    <Grid x:Name="LayoutRoot"
          Background="#FF293949">

        <Border BorderBrush="#FF9A0707"
                BorderThickness="3"
                Margin="82,88,90,120">
            <divel:HtmlHost Name="htmlHost" />
        </Border>

    </Grid>
</UserControl>

En la línea 6 estamos agregando el namespace del control HtmlHost y en la línea 17 es donde colocamos y nombramos nuestro control.

Ahora necesitamos asignar un valor a la propiedad SourceHtml del HtmlHost. Vamos a usar el mismo código que nos da Photosynth como si lo fueramos a poner en una página Html común y corriente:

Y en el code behind vamos a asignar esa cadena a la propiedad antes mencionada:

namespace PhotosynthDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
            htmlHost.SourceHtml = "<iframe frameborder='0' src='http://photosynth.net/embed.aspx?cid=e9f3bd27-c3f5-4e2e-8022-3a746a4b3119&delayLoad=false&slideShowPlaying=false' width='100%' height='100%'></iframe>";
        }
    }
}

Como podemos ver tuvimos que hacer unos cambios a la cadena, primero tenemos que cambiar todas las comillas dobles, por comillas sencillas. También cambiamos el parámetro delayLoad a false y el with y height a 100%.

Si en este momento corren el proyecto, funcionará bien, pero verán un cuadro de dialogo con la siguiente advertencia:

Para corregir esto solo tenemos que ir a nuestro aspx de nuestro proyecto web:

Y en la sección del div llamado silverlightControlHost vamos a agregar un parámetro:

<param name="windowless" value="true" />

Pueden ver un demo en vivo aquí y descargar el código aquí.

• GetChildrenCount – Obtiene el número de Hijos que tiene el UIElement
• GetChild – Obtiene un hijo del UIElement

NOTA: El propósito del siguiente ejemplo es ilustrar el uso del VisualTree. Hay muchas maneras de hacer lo siguiente, como cambiar directamente la fuente de datos para reflejar los cambios en la Interfaz de Usuario. De hecho, si no se usa adecuadamente, el VisualTreeHelper puede hacer nuestra aplicación lenta.

Primero, vamos a usar una clase llamada ListInfo. Esta clase implementa la interfaz INotifyPropertyChanged y tiene solo dos propiedades: Name y Check. Además cuenta con un método estático llamado getInfo() que devuelve una ObservableCollection de 3 elementos:

public class ListInfo : INotifyPropertyChanged
{
    private string name;
    public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            NotifyPropertyChange("Name");
        }
    }

    private bool check;
    public bool Check
    {
        get
        {
            return check;
        }
        set
        {
            check = value;
            NotifyPropertyChange("Check");
        }
    }

    public static ObservableCollection<ListInfo> getInfo()
    {
        ObservableCollection<ListInfo> data = new ObservableCollection<ListInfo>();
        data.Add(new ListInfo { Name = "Texto", Check = true });
        data.Add(new ListInfo { Name = "Qwerty", Check = false });
        data.Add(new ListInfo { Name = "Asdf", Check = true });

        return data;
    }

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

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

A continuación tenemos nuestro XAML, que es un simple ListBox con un ItemTemplate definido:

<StackPanel x:Name="LayoutRoot">
    <ListBox x:Name="myList"
             Width="450"
             SelectionChanged="myList_SelectionChanged">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <CheckBox IsChecked="{Binding Check, Mode=TwoWay}"
                              IsEnabled="True"
                              Content="{Binding Name, Mode=TwoWay}"
                              Margin="5,0,0,0" />
                    <TextBlock Text="Al cambiar el elemento cambia nuestro CheckBox"
                               Margin="5,0,0,0"
                               Foreground="Blue" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</StackPanel>

Finalmente, nuestro CodeBehind:

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(MainPage_Loaded);
    }

    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        myList.ItemsSource = ListInfo.getInfo();
    }

    private void myList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ListInfo current = myList.SelectedItem as ListInfo;

        List<UIElement> checkBoxes = new List<UIElement>();
        getChildTypes(myList, typeof(CheckBox), ref checkBoxes);

        foreach (UIElement element in checkBoxes)
        {
            CheckBox checkBox = (CheckBox)element;
            if (checkBox.Content.ToString() == current.Name)
            {
                checkBox.IsChecked = !checkBox.IsChecked;
            }
        }
    }

    public void getChildTypes(UIElement parent, Type elementType, ref List<UIElement> items)
    {
        int count = VisualTreeHelper.GetChildrenCount(parent);
        if (count > 0)
        {
            for (int i = 0; i < count; i++)
            {
                UIElement child = VisualTreeHelper.GetChild(parent, i) as UIElement;
                if (child.GetType() == elementType)
                {
                    items.Add(child);
                }
                getChildTypes(child, elementType, ref items);
            }
        }
    }
}

El método que nos interesa es getChildTypes. En este caso le mandamos el padre de los elementos que estamos buscando, en este caso, el ListBox myList. Después el tipo de elementos que queremos que nos regrese, osea, ChecBox. Finalmente le mandamos un valor de referencia de tipo List<UIElement>, en el cuál obtendremos nuestros resultados.

La lógica es sencilla, es un método recursivo que recorre todos los hijos y va agregando a la lista todos los que coindicen con el tipo indicado por elementType.

Pueden ver el resultado aquí.

Aquí una lista de los temas (que pueden ver en su post arriba mencionado):

Introducción

Introducción y Bienvenida al Curso de Introducción de Silverlight 4 creado por Rodrigo Díaz Concha, MVP de ASP.NET, fundador de La Liga Silverlight, Orador de INETA Latam y Master Instructor del Silverlight Tour para Latinoamérica y España.

Este curso introductorio a Silverlight 4 te permitirá comprender los conceptos básicos y diversas funcionalidades con las que cuenta esta fabulosa plataforma de desarrollo. Esta primera parte del curso consta de 12 videos y 1 práctica que refuerza los conceptos vistos en la serie de screencasts.

Silverlight es una plataforma de desarrollo para construir aplicaciones enriquecidas para Internet (RIA por sus siglas en inglés) que cada vez está siendo más usada como opción tecnológica en aplicativos modernos.

Una confusión que se tiene hoy en día es que se relaciona únicamente a Silverlight con el sistema operativo Windows, pero lejos de eso, las aplicaciones de Silverlight pueden ejecutar en Mac OS, Linux y Windows.

En este screencast veremos una introducción a la plataforma de desarrollo Silverlight, sus herramientas, aplicaciones reales y los requisitos necesarios para poder comenzar a construir aplicaciones con esta tecnología. Para más artículos acerca de Silverlight totalmente en español visita La Liga Silverlight: La Primera Comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas (http://blogs.LigaSilverlight.com).

1. Fundamentos

   Una vez instaladas las herramientas de Silverlight para Visual Studio .NET es hora de poner manos a la obra, asimismo es muy importante tener en cuenta algunos conceptos fundamentales acerca de la construcción de soluciones en esta tecnología. En este capítulo veremos conceptos fundamentales en el desarrollo de aplicaciones de Silverlight como las plantillas de Visual Studio .NET, el diseñador, el empaquetado XAP y el hospedaje en la página. Para más artículos acerca de Silverlight totalmente en español visita La Liga Silverlight: La Primera Comunidad MSDN en Español acerca de Silverlight y tecnologías relacionadas (http://blogs.LigaSilverlight.com).

2. Xaml

   Xaml (acrónimo de Extensible Application Markup Language) es el lenguaje de marcación utilizado por Silverlight (y también por su hermano mayor WPF) para poder definir las interfaces de usuario de nuestras aplicaciones.  Toda aplicación de Silverlight implica código de Xaml ligado a código en .NET. Por esta razón en este capítulo veremos conceptos básicos acerca de Xaml, sus elementos básicos y transformaciones.

3. Animaciones

   Para darle vida a nuestras aplicaciones de Silverlight podemos hacer uso entre otras cosas de las Animaciones. Las Animaciones son un mecanismo para cambiar el valor de las propiedades de los elementos y transformaciones conforme pasa un tiempo determinado. En este capítulo describiremos de manera rápida y sencilla el uso y creación de Animaciones dentro de Silverlight.

4. Expression Blend

   Todo desarrollador de Silverlight debe tener en su cinturón de herramientas Expression Blend, ya que nos ayuda de gran manera a hacer más rápido, efectivo y divertido nuestro trabajo al momento de construir soluciones con la plataforma de desarrollo Silverlight. En este capítulo apreciaremos en conjunto el uso de Expression Blend como herramienta de edición nativa de Xaml  además describiremos las opciones más importantes de la herramienta.

5. Recursos y Estilos

   Los recursos son un concepto básico para poder crear aplicaciones que reutilicen elementos ya que permiten ser un almacenaje de objetos de cualquier tipo para poder reusar en cualquier parte de nuestras aplicaciones. Los estilos son elementos que podemos  guardar en el diccionario de Recursos para poder aplicarlos y lograr así una apariencia estándar en la aplicación. En este capítulo describiremos el concepto de Recursos y también describiremos la creación y utilización de Estilos para controles y elementos.

6. Controles y Plantillas

   Silverlight cuenta con una gran cantidad de controles que podemos utilizar en nuestras aplicaciones y la gran mayoría soporta el cambio o modificación de su Plantilla.  En este capítulo mostraremos la manera de cómo cambiar la Plantilla en los controles básicos de Silverlight.

7. MediaElement

   Silverlight ha sido utilizado como aplicación cliente en la transmisión de importantes eventos en los últimos meses: la toma de poder de Barack Obama, el Memorial de Michael Jackson, los Juegos Olímpicos de Beijing , etc. Debido a su extraordinaria calidad en la reproducción de audio y video Silverlight está siendo la plataforma favorita para sitios multimedia. En este capítulo veremos la utilización del elemento MediaElement, el cual nos permite reproducir audio y video en nuestros aplicativos y apreciaremos la manera tan sencilla de incorporar esta características en nuestras propias aplicaciones.

8. Impresión

   Una de las características más esperadas y solicitadas por la comunidad de Silverlight es el soporte de impresión dentro de las aplicaciones, esto es, la capacidad de poder mandar a imprimir el contenido que estemos viendo en la aplicación ya sea una lista de datos de un DataGrid o ListBox o simplemente tomarle una “foto” a la pantalla y enviarla a papel o alguna de las impresoras virtuales instaladas en nuestros equipos (por ejemplo: OneNote, XPS, PDF, etc.).  Silverlight 4 incluye esta característica a través de un modelo de clases muy sencillo.

   En este capítulo mostraremos el uso de la clase PrintDocument para poder crear documentos de impresión a través de nuestras aplicaciones de Silverlight 4.

9. Webcam

   Con la llegada de Silverlight 4 también ha llegado a nosotros la posibilidad de implementar en nuestras aplicaciones la capacidad de tomar video a través de la Webcam y capturar audio por medio del micrófono del equipo.  Este fue una de las peticiones más fuertes en Silverlight 3 y la espera ha terminado.  En este capítulo del curso veremos cómo fácilmente podemos utilizar la Webcam para poder realizar capturas de fotografías con el video.

10. Drag and Drop

    Silverlight 4 cuenta con soporte de arrastrar uno o varios archivos desde afuera de la aplicación hacia adentro de ella y soltarlo(s) para poder leer su información y contenido.  Esta característica nos permite como desarrolladores crear mejores Experiencias para los Usuarios ya que evitan el número de cajas de diálogo y clics para abrir o leer un archivo o conjunto de archivos. En este capítulo del curso veremos cómo aplicar esta sencilla pero poderosa funcionalidad en nuestras propias soluciones.

11. OpenFileDialog

    De manera predeterminada, Silverlight requiere el permiso explícito del usuario para poder leer el Sistema de Archivos ya que ejecuta en Confianza Parcial. La caja de diálogo OpenFileDialog nos brinda un mecanismo para permitir a los usuarios que accedan a sus archivos desde las aplicaciones con Silverlight. En este capítulo del curso describiremos el uso de la caja de diálogo OpenFileDialog para poder leer archivos del equipo del usuario.

12. Clic Derecho

    Tradicionalmente al hacer clic derecho sobre una aplicación de Silverlight nos muestra un menú con la opción de abrir la caja de diálogo con información del plugin (como la versión, las cuotas para el almacenamiento aislado, etc.). Ahora en Silverlight 4 podemos capturar el evento de clic derecho del mouse para crear nuestra propia Interface de Usuario y código relacionado. En este capítulo describiremos el manejo de esta característica para poder crear menús contextuales en nuestras aplicaciones de Silverlight.

Llevaba varios días tratando de encontrar la opción para cambiar el navegador predeterminado de Visual Studio, sabía que era posible porque así lo tengo en la computadora del trabajo, pero en mi computadora personal (que había sido recientemente formateada) nada más no recordaba la opción (revisé tooooodas las opciones de personalización y nada).

Hoy por fin la encontré y aunque para muchos es obvia, la voy a posterar nada más para que cuando se me olvide encontrarla fácil (que es uno de mis principales propósitos de tener este blog).

Paso 1. Dar clic derecho sobre un aspx como Default.aspx y seleccionar Browse with

Paso 2. En el cuadro de dialogo, elegir Internet Explorer y dar clic en el botón “Set as Default”

Y ¡Listo!. Nada más que dar clic en Cancel y Debugear con otro navegador.

Nota. Por alguna razón, aquí no aparece mi otro navedagor Google Chrome, no estoy seguro a que se deba, si alguien sabe, por favor deje un comentario.

No duden en echarle un vistazo.

Esta serie de posts pretende ser un poco menos introductoria y más enfocada a hacer una aplicación real, pero sencilla.

Vamos a realizar una aplicación para ayudar en un intercambio de regalos (si, este post llega un poco tarde, pero por lo menos espero que sea ilustrativo).

NOTA: Aunque este ejemplo estará hecho en Visual Studio 2010 beta 2 + SL4 Tools Beta, la mayoría de las cosas puede ser hecha en VS2008 SP1 con WCF RIA Services Beta. En caso contrario, se hará notar para evitar confusiones.

Lo primero que debemos hacer es crear una nueva aplicación de tipo Silverlight Business Application, la cual nombraremos “Intercambios”:

Si corremos nuestro proyecto tal y como está, obtenemos el template base de RIA Services:

Ahora, vamos a personalizar un poco nuestro proyecto. Para esto iremos a la Galería de Microsoft Expression, en donde buscaremos un tema para nuestra aplicación. Nuestro tema será Lime Shocker de Tim Heuer.

Bajamos el tema y extraemos los archivos en un directorio de nuestra elección. A continuación, buscamos en nuestro proyecto la carpeta Assets (en este caso Intercambios\Intercambios\Assets) y renombramos el archivo Styles.xaml (por ejemplo: Styles.xaml.old) y finalmente copiamos el que descargamos. Si volvemos a correr nuestro proyecto, ahora obtenemos algo como esto:

Ahora, debido a que Shock Limer fue hecho para una versión anterior de RIA Services, debemos de cambiar un par de cosas en nuestro Styles.xaml. Primero, debemos agregar a las nuestras referencias (al inicio del archivo) la siguiente linea:

xmlns:loginWindow="clr-namespace:Intercambios.LoginUI"

Después tenemos que encontrar el estilo encabezado con el comentario “<!– LoginRegistration Window Style –>” y reemplazarlo por el de nuestro archivo Styles.xaml.old (osea, nuestro archivo original). Esto debido a unos estados nuevos incluídos en esta versión de WCF RIA Services.

Vamos a personalizar un poco el tema, para que luzca un poco más navideño (o cualqueir otra festividad que se ajuste más a la época en que nos encontremos). Abrimos nuestro proyecto en Blend Preview for .NET 4 (o Blend 3 esta bien si estan trabajando en VS2008). y con nuestro MainPage.xaml abierto abrimos el panel de Resources. Vamos a modificar dos de nuestras brochas: NavigationBackgroundColorBrush y HighLightColorBrush a Rojo y un Verde más obscuro respectivamente:

Ahora agregamos un par de imagenes al proyecto, un árbol de navidad para nuestra página de bienvenida y unos bastones de caramelo para decorar un poco nuestro borde:

Regresamos a Visual Studio. Dentro de la carpeta de Assets, hay otra que se llama Resources, y ahí encontramos un archivo de recursos llamado ApplicationStrings.resx. Este archivo nos permite personalizar distintos textos que aparecen en nuestra aplicación. Vamos a dejarlo algo así:

Corremos nuestro proyecto y obtenemos algo como esto:

Puedes descargar el proyecto aquí.

Resultó que esto es algo muy sencillo de hacer, pero no tan obvio:

<chartingToolkit:Chart Margin="109,62,116,64"
                       Title="Chart Title">
    <chartingToolkit:Chart.Axes>
        <chartingToolkit:LinearAxis Orientation="Y"
                                    ShowGridLines="False" />
    </chartingToolkit:Chart.Axes>
    <chartingToolkit:Chart.DataContext>
        <PointCollection>
            <Point>1,10</Point>
            <Point>2,20</Point>
            <Point>3,30</Point>
            <Point>4,40</Point>
        </PointCollection>
    </chartingToolkit:Chart.DataContext>
    <chartingToolkit:ColumnSeries DependentValuePath="X"
                                  IndependentValuePath="Y"
                                  ItemsSource="{Binding}" />
</chartingToolkit:Chart>

Aquí podemos observar que de la línea 3 a la 6 definimos la propiedad Axes de nuestro control Chart. Estamos indicando que tendremos un LinearAxis con orientación “Y” (las líneas muestran los valores para los datos en dicho eje) y definimos ShowGridLines como falso para evitar que aparezcan. El resultado es:

Tema: SketchFlow

Fecha: 19 de Noviembre 2009

Hora: 6:30 – 7:30PM (-6 GMT)

Orador: Arturo Molina

Regístrate aquí.

Tema: Silverlight Toolkit Parte II

Fecha: 05 de Noviembre 2009

Hora: 6:30 – 7:30PM (-6 GMT)

Orador: Arturo Molina

Regístrate aquí.

class Program
{
    static void Main(string[] args)
    {
        string className = "Tester.SpanishGreeter";

        Assembly assembly = Assembly.GetExecutingAssembly();

        object o = assembly.CreateInstance(className);

        IGreeter test = (IGreeter)o;
        test.sayHello();
        Console.ReadLine();
    }
}

interface IGreeter
{
    void sayHello();
}

class SpanishGreeter : IGreeter
{
    public void sayHello()
    {
        Console.WriteLine("Hola");
    }
}

class EnglishGreeter : IGreeter
{
    public void sayHello()
    {
        Console.WriteLine("Hello");
    }
}

class DanishGreeter : IGreeter
{
   public void sayHello()
   {
       Console.WriteLine("Hej");
   }
}

Fácilmente el nombre de la clase lo podríamos obtener de una entrada del usuario, archivo de configuración o base de datos. Después obtenemos el ensamblado que se está ejecutando actualmente, de ahí podemos crear una instancia de object llamando al método CreateInstance() y enviando el nombre de la clase (namespace incluído). De ahí todo lo que tenemos que hacer es castear el objecto a nuestra clase y ¡Listo! Podemos hacer uso de cualquiera de nuestras implementaciones de la interfaz IGreeter.

• 3 licencias de Visual Studio 2008 Professional Edition
• 1 licencia de Epression Studio 3 (Incluyendo Blend, Sketchflow y Web)
• 2 licencias de Expression Web 3
• 4 licencias por procesador de Windows Web Server 2008 R2
• 4 licencias pro procesador de SQL Server 2008 Web Edition
• Panel de Control DotNetPanel

Las licencias de Windows Server y SQL Sever pueden usarse tanto para ambientes de desarrollo como de producción.

Todo lo que necesitan es ser desarrolladores independientes o ser una compañía de 10 o menos empleados.

Después de 3 años, no tiene olbigación alguna de pagar el software, solo un cargo de $100 dlls al final del programa. Si deciden seguir en el programa, este tendrá un costo de $999 dlls por año. Alternativamente, pueden quedarse sólo con las licencias de producción (una de Windows Web Server y otra de SQL Server) por $199 dlls al año.

Para enrolarse solo necesitan entrar a la página del programa en donde se les solicitará unos datos sobre su compañía y un referal code que pueden solicitar a webspark@microsoft.com

No lo duden más y ¡enrólense!

Lo primero que vamos a hacer es diseñar la interfaz de nuestra aplicacción. Esta puede ser tan sencilla como quieran, por lo menos necesitamos 2 TextBlock y un Button (liga al código al final del post):

Los TextBlock en los que estamos interesados por el momento son los que en la imagen vemos con la palabra “NO” en rojo. Uno lo llamaremos txtOOB que indicará si la aplicación se encuentra fuera del navegador y el otro txtConexion que indicará si la aplicación cuenta con conexión disponible.

A continuación, vamos a crear un pequeño método para ayudarnos a cambiar el estado de dichos TextBlock.

public void cambiaEstado(TextBlock texto, bool estado)

{

    if (estado)

    {

        texto.Text = "Si";

        texto.Foreground = new SolidColorBrush(Colors.Green);

    }

    else

    {

        texto.Text = "No";

        texto.Foreground = new SolidColorBrush(Colors.Red);

    }

}

Este método nos permite mandar el TextBlock correspondiente y el valor que le será asignado. Si es verdadero, entonces el TextBlock mostrará la palabra “Si” en verde, si es falso, mostrará la palabra “No” en rojo.

Para la siguiente función declaramos el nombre de espacio System.Net.NetworkInformation. Aquí está contenida la clase NetworkInterface que nos permitirá saber si tenemos una conexión disponible:

private void ActualizarEstados()

{

    cambiaEstado(txtOOB, App.Current.IsRunningOutOfBrowser);

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Podemos ver GetIsNetworkAvailable() nos regresa un booleano indicando el estado de la conexión. Además, la propiedad App.Current.IsRunningOutOfBrowser nos indica si la aplicación está corriendo fuera del navegador. Solo necesitamos añadir la llamada a ActualizarEstados() en el constructor de nuestra clase MainPage. Al ejecutar nuestra aplicación vemos lo siguiente:

Ahora pasamos a la funcionalidad del botón. Queremos dos cosas: primero crearemos una función que inicialice el botón, dependiendo de si la aplicación está o no fuera del navegador y si está o nó instalada. Segundo, programaremos la funcionalidad de dicho botón, también en función de si está o no fuera del navegador. Veamos primero el método de inicialización:

private void inicializarBoton()

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        btnAccion.Content = "Actualizar";

    }

    else

    {

        if (App.Current.InstallState == InstallState.NotInstalled)

        {

            btnAccion.Content = "Instalar";

        }

        else

        {

            btnAccion.Content = "Aplicación instalada";

            btnAccion.IsEnabled = false;

        }

    }

}

El primer if determina si la aplicación está fuera del navegador, de ser así, el botón simplemente muestra “Actualizar”. Si estamos dentro del navegador, entonces debemos determinar si la aplicación está o no instalada, si no es así, el botón despliega el mensaje “Instalar” y si ya está instalada, mostramos “Aplicación Instalada” y deshabilitamos el botón para evitar una posible excepción. Este método lo mandamos a llamar también en el constructor y además agregamos el un manejador del evento clic:

public MainPage()

{

    // Required to initialize variables

    InitializeComponent();

    btnAccion.Click += new RoutedEventHandler(btnAccion_Click);

    NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

    ActualizarEstados();

    inicializarBoton();

}

Aquí además agregamos un manejador al evento NetworkAddressChanged, con el propósito de actualizar el txtConexion. Y ahora, el código de los manejadores de eventos:

void btnAccion_Click(object sender, RoutedEventArgs e)

{

    if (App.Current.IsRunningOutOfBrowser)

    {

        App.Current.CheckAndDownloadUpdateCompleted += new CheckAndDownloadUpdateCompletedEventHandler(Current_CheckAndDownloadUpdateCompleted);

        App.Current.CheckAndDownloadUpdateAsync();

    }

    else

    {

        App.Current.Install();

    }

}

void Current_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)

{

    if (e.UpdateAvailable)

    {

        MessageBox.Show("La applicación ha sido actualizada, por favor reinicia");

    }

    else

    {

        MessageBox.Show("No hay actualizaciones disponibles");

    }

}

void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)

{

    cambiaEstado(txtConexion, NetworkInterface.GetIsNetworkAvailable());

}

Si la aplicación está dentro del navedador (código en el bloque else) llamamos al método Install(). Cabe mencionar que este método solo funciona cuando es causado por una acción del usuario, si ustedes lo ponen en el constructor por ejemplo, no funcionará. Si la aplicación ya se encuentra fuera del navegador, entonces procedemos a checar si hay actualizaciones disponibles. Primero añadimos un manejador al evento CheckAndDownloadUpdateCompleted y después mandamos a llamar CheckAndDownloadUpdateAsync(). Éste método va y revisa si hay actualizaciones, si las hay las descarga y las instala cuando la aplicación es reiniciada.

En el manejador del evento de CheckAndDownloadUpdateCompleted revisamos nuestro parámetro de tipo CheckAndDownloadUpdateCompletedEventArgs para ver si hay una actualización disponible. Si la hay mostramos un cuadro de dialogo pidiendo al usuario que reinicie para que se instale la nueva versión.

Por cuestiones de ilustración, este demo tiene la funcionalidad de revisar actualizaciones incluída en una acción de un botón. En una aplicación de verdad, quizá sería prudente hacerlo en el constructor de nuestra clase App por ejemplo.

Finalmente el manejador de NetworkAddressChanged simplemente tiene que mandar a llamar a nuestro primer método para revisar si la conexión está disponible.

¡Nuestra aplicación está casi lista! Solo nos queda habilitarla para instalarla fuera del navegador. Para esto nos vamos a las propiedades de nuestro proyecto, nos aseguramos de que Enable running application out of the browser y damos clic en el botón Out-of-Browser Settings:

Aparecerá un cuadro de dialogo donde podemos definir distintas cosas:

• Window Title: El título de la ventana de la aplicación
• Width y Heigh: Ancho y Alto de la ventana
• Shortcut name: Nombre que llevará el acceso directo
• Download description: Texto que se mostrará en un tooltip al posicionar el cursor sobre el acceso directo de la aplicación.
• Icons: Imágenes que harán de ícono de la aplicación (deben ser parte del proyecto de la aplicación de Silverlight)

Una vez que llenamos la información que queremos se genera un arhivo xml (dentro de la carpeta de propiedades del proyecto) llamado OutOfBrowserSettings.xml, el cúal es muy sencillo y hasta podemos editarlo manualmente (aunque el cuadro de dialogo es más cómodo).

<OutOfBrowserSettings ShortName="OOB Demo" EnableGPUAcceleration="False" ShowInstallMenuItem="True">

  <OutOfBrowserSettings.Blurb>Demo de aplicación fuera del navegador. JAMolina.com</OutOfBrowserSettings.Blurb>

  <OutOfBrowserSettings.WindowSettings>

    <WindowSettings Title="OOB Demo" Height="250" Width="300" />

  </OutOfBrowserSettings.WindowSettings>

  <OutOfBrowserSettings.Icons>

    <Icon Size="16,16">Icons/Logo16.png</Icon>

    <Icon Size="32,32">Icons/Logo32.png</Icon>

    <Icon Size="48,48">Icons/Logo48.png</Icon>

    <Icon Size="128,128">Icons/Logo128.png</Icon>

  </OutOfBrowserSettings.Icons>

</OutOfBrowserSettings>

¡Listo! Nuestra aplicación está lista. Para probar la funcionalidad de actualización pueden barjarse el proyecto para correrla localmente, instalarla y luego modificar algún valor (por ejemplo, algún valor del XAML de la interfaz), compilan y abren la aplicación previamente instalada para probar la actualización.

El resto de la funcionalidad puede ser probada con el demo que pueden encontrar aquí. El código fuente lo pueden descargar de aquí.

Leyendo o viendo un video de Jesse Liberty (lo siento, no recuerdo donde fué) descubrí una opción fantástica dentro de Visual Studio. Para activarla pueden entrar a Tools –> Options (Lo siento, solo tengo el VS en inglés).

Una vez dentro bajan por las siguientes categorías: Text Editor –> XAML –> Formatting –> Spacing y seleccionan la opción Position each attribute on a separate line:

Además, pueden eligir cuando quieren que el auto-formato se active:

Para XAML existente pueden usar la opción de copiar y pegar todo el código y el IDE se encargará de darle el formato deseado, o pueden usar la herramienta de formato incluída en la barra HTML Source Editing:

De esta forma podemos cambiar algo como esto:

A algo como esto:

¿Más leible no creen?

Espero que les sea de utilidad.

Para lograr esto lo primero que necesitamos es la dirección del video (ojo, no de la página donde esta el video). YouTube guarda distintas versiones del mismo video, incluyendo algunas versiones en HD.

Para obtener una dirección de un video de YouTube podemos instalar el popular plugin para FireFox llamado GreaseMonkey, después descargamos el script para este plugin llamado YouTube HD Ultimate. Este script carga automáticamente la versión HD de un video cuando está disponible. Además nos muestra las ligas de las diferentes versiones del video.

Nosotros vamos a escoger la versión “hd mp4”, así que damos clic derecho y elegimos copiar e url destino. En este caso:

http://www.youtube.com/get_video?video_id=IClBpch9vmM&t=vjVQa1PpcFPq3EX07r_nTWsOLK6onBcN-RrZbXR6KuU%3D&fmt=22

Ahora bien, nos vamos a Expression Blend y colocamos un control MediaPlayer en nuestra applicación (Recuerden que tenemos que tener instalado Expression Encoder para que este control aparezca).

Después nos vamos al panel de propiedades y en la sección de Media creamos un nuevo Playlist.

Una vez, creado el Playlist damos clic en el botón de la colección de elementos (mostrado arriba). En la ventana de edición de elementos elegimos Agregar Otro Elemento y al elemento nuevo solo tenemos que definir su propiedad MediaSource con la dirección del video.

¡Listo! Solo nos queda presionar F5 para ejecutar nuestra aplicación y distrutar de nuestro video de YouTube HD desde Silverlight.

Pueden descargarse el proyecto aquí.

No olviden dejar sus comentarios. Por su atención, ¡Gracias!

Propiedades

• PreviewStyle – Maneja el estilo usado para la vista previa de los cambios
• ShowsPreview – Indica si se mostrará una vista previa a los cambios

El GridSplitter se coloca en cualquier celda de un Grid y dependiendo de los valores que asignemos a sus propiedades HorizontalAlignment y VerticalAlignment es la forma en que se comportará:

Para usar este control necesitamos por lo menos dos controles Grid. En este ejemplo vamos a construir un layout de una aplicación con sus paneles de tamaño personalizable:

En este caso, solo usaremos ShowsPreview en el panel inferior del centro (el amarillo). Como siempre, debemos comenzar por agregar la referencia de System.Windows.Controls a nuestro proyecto y luego la agregamos a nuestro MainPage.xaml:

 xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

Después procedemos a definir nuestras columnas y filas para crear el layout mostrado en la imagen de arriba:

<Grid x:Name="LayoutRoot">

      <Grid.ColumnDefinitions>

          <ColumnDefinition Width="0.208*"/>

          <ColumnDefinition Width="0.578*"/>

          <ColumnDefinition Width="0.214*"/>

      </Grid.ColumnDefinitions>

      <Canvas x:Name="panelIzquierdo" Background="#FF0E3EA3"/>

      <Canvas x:Name="panelDerecho" Grid.Column="2" Background="#FFC11B1B"/>

      <controls:GridSplitter Width="10"

                             Grid.Column="0"

                             VerticalAlignment="Stretch"

                             HorizontalAlignment="Right"

                             Margin="0,0,-5,0"

                             Background="Transparent"/>

      <controls:GridSplitter Width="10"

                             Grid.Column="2"

                             VerticalAlignment="Stretch"

                             HorizontalAlignment="Left"

                             Margin="-5,0,0,0"

                             Background="Transparent"/>

      <Grid x:Name="panelCentral" Grid.Column="1">

          <Grid.RowDefinitions>

              <RowDefinition Height="0.179*"/>

              <RowDefinition Height="0.652*"/>

              <RowDefinition Height="0.169*"/>

          </Grid.RowDefinitions>

          <Canvas x:Name="panelCentralSuperior" Background="#FF24C504"/>

          <Canvas x:Name="panelCentralInferior" Grid.Row="2" Background="#FFB1DA00"/>

          <Canvas x:Name="panelCentralCentral" Grid.Row="1" Background="#FFD2A819"/>

          <controls:GridSplitter Height="10"

                                 Grid.Row="1"

                                 Margin="0,-5,0,0"

                                 VerticalAlignment="Top"

                                 HorizontalAlignment="Stretch"

                                 Background="Transparent" />

          <controls:GridSplitter Height="10"

                                 Grid.Row="2"

                                 VerticalAlignment="Top"

                                 HorizontalAlignment="Stretch"

                                 Background="Transparent"

                                 Margin="0,-5,0,0"

                                 ShowsPreview="True"/>

        </Grid>

    </Grid>

Podemos ver como el primer GridSplitter se coloca en la primera celda del grid principal, ahí le indicamos que se alinea a la derecha horizontalmente y que abarque todo su espacio verticalmente, lo que provoca que el usuario pueda redimensionar el espacio de la columna de la izquierda y la central.

Lo mismo pasa con el resto de los separadores. Un caso a notar es el del último GridSplitter, donde usamos ShowsPreview. Cuando tratamos de redimensionar el panel amarillo, observamos una línea horizontal que actúa como vista previa, en vez de cambiarlo en tiempo real como el comportamiento de el resto de los separadores.

Como podemos ver, este control es una gran herramienta para proveer al usuario final una interfaz personalizable de manera sencilla.

Pueden ver el demo en línea aquí o descargarse el proyecto aquí.

Propiedades:

• BlackoutDates – Los días en esta colección aparecerán tachados y no podrán ser seleccionados.
• DisplayDate – Indica una fecha que será visible al momento de desplegarse, sin importar la fecha que esté seleccionada actualmente
• DisplayDateStart y DisplayDateEnd – Indican el rango de fechas que serán visibles. Cualquier fecha fuera de este rango simplemente no aparecerá en el calendario.
• FirstDateOfWeek – Primer día de la semana en el calendario (Sunday/Monday/Tuesday/Wednesday/Thursday/Friday/Saturday)
• IsDropDownOpen – Indica si el calendario esta abierto
• IsTodayHighlighted – Indica si queremos que el día actual esté resaltado (True/False)
• SelectedDate – Fecha seleccionada
• SelectedDateFormat – Formato de la fecha
  • Short – 27/07/2009
  • Long - lunes, 27 de julio de 2009
• SelectionBackground – El color de fondo de la fecha seleccionada en el campo de texto
• Text – Contenido del campo de text

Eventos:

• CalendarClosed – Se dispara cuando el calendario se cierra
• CalendarOpened – Se dispara cuando el calendario se abre
• DateValidationError – Ocurre cuando el valor insertado en el campo de texto no puede ser interpretado como una fecha
• SelectedDatesChanged – Se dispara cuando se cambia de fecha(s)seleccionada(s)

Nuevamente, debemos comenzar por agregar la referencia System.Windows.Controls a nuestro proyecto. Además de ponerla en nuestro MainPage.xaml:

UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

Para ejemplificar las distintas propiedades y eventos del DatePicker, vamos a contruir un pequeño control que nos permita escoger dos fechas para reservar un boleto de avión. Primero, usamos Blend 3 para hace rápidamente una pequeña interfaz de usuario:

A continuación vamos a escribir toda lafuncionalidad en el archivo de código de nuestro control, en este caso, MainPage.cs. Vamos a bloquear las fechas anteriores al día actual:

//Bloqueamos las fechas pasadas

fechaSalida.BlackoutDates.AddDatesInPast();

fechaRegreso.BlackoutDates.AddDatesInPast();

Cuando se selecciona la fecha de Salida queremos asegurarnos de que la fecha de Regreso sea igual o mayor. Para esto, agregamos un delegado al evento SelectedDateChanged del DatePick de salida:

fechaSalida.SelectedDateChanged +=

    new EventHandler<SelectionChangedEventArgs>(fechaSalida_SelectedDateChanged);

En dicho delegado reiniciamos el mensaje de error y las blackoutDates a los valores originales. Hacemos una validación para asegurarnos que si la fecha de Regreso ya había sido seleccionada y es menor a la nueva fecha de Salida, será reseteada a nulo. Agregamos a la colección BlackoutDates un rango de fechas entre el día actual y el día de Salida seleccionado menos uno (para no excluirlo). Nótese el uso de GetValueOrDefault() para la propiedad SelectedDate, esto es debido a que dicha propiedad es de tipo DateTime?, osea que es Nullable, y queremos asegurarnos de obtener un valor válido:

void fechaSalida_SelectedDateChanged(object sender, SelectionChangedEventArgs e)

{

    //Reiniciamos mensaje de error

    textoErrorSalida.Text = "";

    //Reiniciamos las BlackoutDates

    fechaRegreso.BlackoutDates.Clear();

    fechaRegreso.BlackoutDates.AddDatesInPast();

    if (fechaSalida.SelectedDate > fechaRegreso.SelectedDate)

    {

        fechaRegreso.SelectedDate = null;

    }

    if (fechaSalida.SelectedDate == DateTime.Today)

    {

        //No hacemos nada

    }

    else //Evitamos que la fecha de regreso pueda ser menor a la de salida

    {

        //Agregamos las necesarias

        DateTime fechaSalidaActual = fechaSalida.SelectedDate.GetValueOrDefault();

        CalendarDateRange rangoBlackout =

        new CalendarDateRange(DateTime.Today, fechaSalidaActual.AddDays(-1));

        fechaRegreso.BlackoutDates.Add(rangoBlackout);

    }

}

El siguiente paso es lidiar con fechas no válidas. Debido a que el usuario puede escribir cualquier cosa en el campo de texto, hay probabilidades de que la fecha escrita no pueda ser interpretada como fecha y por tanto debemos lidiar con ello. Agregamos los delegados de la siguiente manera:

fechaSalida.DateValidationError +=

    new EventHandler<DatePickerDateValidationErrorEventArgs>(fecha_DateValidationError);

fechaRegreso.DateValidationError +=

    new EventHandler<DatePickerDateValidationErrorEventArgs>(fecha_DateValidationError);

Y lidiamos con errores así:

void fecha_DateValidationError(object sender, DatePickerDateValidationErrorEventArgs e)

{

    DatePicker pick = (DatePicker)sender;

    if (pick == fechaSalida)

    {

        textoErrorSalida.Text = "La fecha no es válida";

    }

    else

    {

        textoErrorRegreso.Text = "La fecha no es válida";

    }

}

Finalmente, lidiamos con otros detalles como el evento del botón, limpiar errores, etcétera. El resultado final pueden verlo aquí y puden bajarse la solución aquí.

Dudas y comentarios, no duden en contactarme.

¡Saludos!