La release de Visual Studio 2010 RC tenia 2 grandes puntos negros:

Silverlight 4 Beta no funcionaba en VS 2010 RC sabes dios por qué, la cosa es que nos dijeron que esperasemos a una nueva release de Silverlight, y claro, ahora que estos días es el MIX 2010 pues han aprovechado para anunciar Silverlight 4 RC el cual es compatible con el último VS.

Os dejo aquí el enlace de la descarga:

Herramientas de Silverlight 4 para Visual Studio 2010

SDK de Silverlight 4

Silverlight toolkit (Opcional)

Por otro lado había una Preview de Blend 3 con soporte para WPF 4 y Silverlight 4, pero esta preview dejó de funcionar con Visual Studio 2010 RC así que sólo tocaba esperar para una versión con soporte que según los desalladores, saldría pronto y claro han aprovechado el MIX 2010 también. Así que ahora tenemos Blend 4 Beta disponible para todos

Blend 4 Beta

Y por favor, no seais tan tontos como yo que me volví loco con la key que pide… Solo has de hacer click en el enlace que os da el instalador cuando os pide la key, ahí podeis crear una.

Por último, han sacado un add-in para Windows Phone 7 para Blend 4 y aunque el telefono no está en la calle, trae un emulador por si quiereis ir probando:

Paquetes necesarios

Un saludo.

Por primera vez en el blog, quiero hacer un análisis, en este caso el honor lo tiene ReSharper o también conocido como R#.

¿Qué es exactamente ReSharper?

ReSharper es un add-in de Visual Studio, y qué mejor para explicar qué hace que una libre traducción desde su página web:

Resharper resalta los errores de toda la solución al vuelo, soluciones instantaneas para dichos errores, más de 30 técnicas avanzadas de refactorización, herramientas de pruebas unitarias, funciones de búsqueda y navegación, formateado y limpieza de código, generación automatica de código y muchas cosas más para C#, VB.NET, ASP.NET, XML y XAML.

Vamos, que te hace de todo menos la cena

Yo soy de los que no muestran mucho interes de cara a un add-in de cualquier aplicación, pero me dió por probar este por recomendación y la verdad, no puedo vivir sin el.

Voy a comentar con unas cuentas screenshots algunas de las features que he ido viendo sobre ReSharper. Hay decenas y todavía tengo que descubrir muchas útiles jeje.

Crearé una pequeña app de consola puesto que para el caso, no necesitamos ni ejecutar los programas.

Si ir más lejos, nada más crear la aplicación, ReSharper ya nos está marcando cosas ( lo suele hacer cambiando el color a gris ):

Aquí vemos las directivas using en gris, si ponemos el ratón encima nos dice: “La directiva using no está siendo usada y puede ser borrada”

Lo mismo con el parámetro “args” del método Main, el cual nos dice que no está siendo usado.

Esto es bastante útil por varias razones, entre ellas, nos ayuda a refactorizar nuestro código y borrar todo aquello que no vale (Lo tipico, creas una ventana o algo y te mete 20 using del cual usarás 1-2.

Como si de Eclipse se tratara, ReSharper nos trae a Visual Studio una forma de ver los avisos y errores de un fichero de un solo vistazo:

Cada rayita indica algo, las naranjas son avisos, las rojas errores, azules son TODO’s que pongas…

Luego también como hacen muchos IDE’s de Java, tenemos ayuda basada en el contexto ( donde tengamos el cursor vaya), por ejemplo si pinchamos en args, nos saldrá un icono, el cual nos ofrece varias opciones:

Borrar el parámetro, crear una sobrecarga sin parámetro, ignorar el mensaje…

Todo esto y todavía no hemos escrito nada jeje.

Ahora imaginad que escribo algún atributo privado

¿Qué es esa linea azul? Si dejamos el ratón encima nos dirá (aparte de que no está siendo usada) que el atributo no cumple con la convención de atributos privados, te sugiere que lo cambies por: “_mensaje”.

Ahora vamos a crear una propiedad autoimplementada y la usamos en nuestro main:

Nada extraño, pero si nos fijamos en el get vemos que tiene otra linea azul. Si dejamos ahi el cursor nos dice que el get no está siendo usado, que podemos borrarlo. Es aquí otra ayuda a la refactorización.

Vamos a crear una clase que nos sirva para más ejemplos: (La pongo en imagen para ver otro aviso de ReSharper)

Nada nuevo aquí, pero oh, ReSharper a marcado el this… Nos dice que el this aquí es redundante.

Bueno, de vuelta al Main, vamos a crear una lista de Libros:

Uh, ReSharper se ha cebado con la creacion de la lista…

¿Por qué marca el List? Quizá esto sea algo más controvertido, pero ahora se está poniendo más de moda entre los desarrolladores a cambiar el modo en el que inicialian los objetos.

En este caso quedaría así:

var libros = new List<Libro>();

No es que nos estemos volviendo dinámicos estilo Python, simplemente consideran que no es necesario ver dos veces List que con una va bien y el resto es solo redundancia. Siempre y cuando dicho objeto sea local a un método y no como atributo de una clase ni nada. Al ser algo temporal pues piensan que no hace falta poner que tipo de variable es puesto que se puede deducir en la asignación.

¿Y el new? Aquí es donde entra un poco de la magia de ReSharper. Nos ofrece la posibilidad de fusionar las lineas de abajo y meterlas en la inicialización de la Lista.

Finalmente todo quedaría así:

¿Mola eh?

Ahora imaginad que quereis cambiar los temas de “Prog” a “Programación”, podéis hacer algo en plan:

Nada mal, pero… ¿Qué sale debajo del foreach? ¿Dice que parte del foreach puede convertirse a algo LINQ? ¿Y que lo hará por nosotros? Pos fale.

Esto ya mola más, ¿Eh? Ahora tenemos un foreach que itera por aquellos libros que son de programación. O sea, ya es más rápido.

Vamos a hacer la lista de libros más grande, con más temas:

var libros = new List<Libro>
             {
                 new Libro("Programacion", "C# In Depth"),
                 new Libro("Cocina", "Cocina para novatos"),
                 new Libro("Programacion", "Linq In Action"),
                 new Libro("Redes", "Cisco CCNA"),
                 new Libro("Bases de datos", "SQL Server 2008"),
                 new Libro("Cocina", "Como cocinar pescado")
              };

Ahora imaginad que queremos crear una segunda lista de libros que solo contenga los de informática:

Ahora los dos foreach están marcados, y en estos casos es mejor empezar por el externo e ir aplicando los que nos dice ya que muchas veces afecta a lo de adentro (de una forma positiva claro).

En este caso nos dice que todo el bucle puede convertirse en algo LINQ:

var librosInformatica = (from tema in temas from libro in libros where libro.Tema == tema select libro).ToList();

Aunque a veces puede salir con un:

var librosInformatica = temas.SelectMany(tema => libros.Where(libro => libro.Tema == tema)).ToList();

Ambos hacen lo mismo, no sé por qué a veces te lo convierte de una forma y a veces de otra, aunque la cosa es que te quita los 2 bucles y el if

Y bueno, esto es solo la punta del iceberg de lo que ReSharper nos ofrece…

Es capaz de analizar tu código y decirte cuando algo que tienes público puede ser privado, te avisa cuando usas una variable que podría contener null y tu no lo has comprobado antes, te da soluciones para reducir anidamiento… Y luego ya lo tipico, mover código a métodos, cambiar nombre… Vamos, todo lo que hay para refactorizar código.

Por último, decir que todo esto es configurable a través de reglas las cuales pueden ser modificadas, borradas y incluso crear las tuyas propias.

¿Lo malo? Que la licencia es de pago. Tienes un trial de 30 días también. Merece la pena conseguirlo

Os dejo un enlace a la página oficial y otro a su lista de features:

http://www.jetbrains.com/resharper/
http://www.jetbrains.com/resharper/features/index.html

Nada más, un saludo y si os gusta, comentad

Qué de tiempo sin escribir nada, pero vuelvo con ganas para escribir más

Decir que reescribí completamente Apunta Notas, ahora en inglés, usando mvvm light (del cual me gustaría hablar en un futuro). Aun habiendolo escrito en inglés, si teneis el Windows en castellano os aparecerá en castellano

Os dejo la URL donde tengo alojado el projecto:

http://apuntanotas.codeplex.com/

Un saludo.

He creado un cliente de Twitter, es un cliente sencillito que he hecho con el proposito de aprender y de divertirme un poco.

Os dejo una screen:

Mi primera intención era la de crear un artículo explicando paso por paso como crear un cliente Twitter, pero la verdad es que aunque simple el cliente, ha terminado con más código del que pensaba.

Aun así os daré algunos detalles para que cuando mirés el código pues sepais más o menos qué hace cada cosa.

No he usado ninguna librería concreta para desarrollar esta primera versión del cliente de Twitter. Simplemente he usado el REST API el cual es bastante limitado.

La clase TwitterClient es la que nos permitirá descargar nuestros Tweets y cambiar nuestro estado. No hace nada más. Cuando cambie la librería, añadiré más opciones a la interfaz de dicha clase sin modificar las opciones que ya hay.

Podeis observar que la clase lo que hace es descargar un XML con los tweets y parsearlos.

Por otro lado, podéis ver que la estructura del proyecto es MVP aunque le he añadido tambien la clase DelegateCommand para usar comandos siempre que sea posible.

Lo más complejo del proyecto es la UI, en la cual he usado Data Templates, Fake DataContext (Dos cosas que habéis aprendido aquí), además de un botón custom con una pequeña animación.

El código de la UI quizá sea un poco guarrete, pero es la primera aplicación que hago usando Blend 3 como aplicación de diseño principal.

Nada más, os dejo aquí el enlace a la aplicación:

TwitFox

Un saludo!

Tengo pensado hacer una serie de artículos sobre patrones de diseño.

Iré colocando al menos un par de veces al mes, un artículo enfocado a un patrón de diseño en concreto. Escribiré el motivo del patrón con un buen ejemplo y sobre el código, en un principio estará escrito enfocado a C#, usando las herramientas de las que C# nos provee. Eso si, en caso de que la implementación de C# sea tan tan tan especifica, intentaré proveer de un ejemplo más neutral.

Nada más, a ver si pongo uno esta semana

Un saludo,
Fox

Este libro tiene una finalidad muy concreta, enseñar qué ofrece C# 2 y 3.
Al ser un libro avanzado, necesita que o bien seáis programadores de Java o bien que conozcáis C# 1 como mínimo.
Como ya he dicho, este libro es maravilla (sí, parece que todos los libros que leo son maravilla, eso o que pierdo mucho tiempo descartando libros para quedarme con uno decente ), aunque son solo 424 páginas, parecerá que son 2 mil, pues es muy denso.

El libro está dividido en 3 partes, cada una dedicada a las 3 versiones de C# que hay .

Parte 1:
Ya he dicho que este libro se centra en la versión 2 y 3 de C#, pero aun así, el autor quiere dedicar un poco de tiempo a hablarnos de lo que nos ofreció C# cuando nació y además de hacernos ver las cosas que se hacían mal en C# 1 y como C# 2 y 3 nos ofrecen una mejor alternativa para esos casos concretos.
Por otro lado, esta parte empieza con lo típico y es que parece que ningún autor es capaz de resistir la tentación de poner la historia de C#, .NET y toda la pesca.
Después de este aburrido capítulo, empieza ya lo interesante.
Nos recordará algunas cosas básicas de C# para posteriormente mostrarnos que esas cosas maravillosas que usábamos, apestan y que ahora tenemos mejores formas de hacerlo. Básicamente lo que el autor quiere aquí es ponerte los dientes largos mostrándote por ejemplo como molan las Lambdas.

Parte 2:
Ésta parte, titulada “Resolviendo los problemas de C# 1” se centrará en C# 2, el cual tiene jugosas novedades que hará que nuestro código C# sea mucho mejor .
Nos hablará de la necesidad de los genéricos aunque también de sus limitaciones.
También abordará sobre los tipos ‘nullables’, lo cual nos ayudará cuando tratemos con bases de datos.
Veremos cómo implementar mejores delegados gracias a los métodos anónimos.
Un poco de iteradores también y para terminar un conjunto de cosas no menos importantes.

Parte 3:
Esta parte es igual a la anterior, más features pero esta vez las de C# 3.
Tipos anónimos, inicialización simplificada, lambda, métodos de extensión (extension methods) y sobre todo…. LINQ.
Ahora es cuando os emocionáis como yo y decís, uhm ¡LINQ!. Después de más de 300 páginas leídas, viene quizá lo más interesante.
Siento desilusionaros, porque para mí, este es el punto flojo del libro. ¿Por qué? Intenta en poco menos de 100 páginas, explicarnos todo LINQ to Objects, SQL, XML, DataSet pero intenta hacerlo de forma muy bruta ya que intenta meterte ahí con calzador toda la teoría detrás de LINQ la cual no es fácil de digerir.
Yo entiendo que en 100 páginas no se puede explicar todo LINQ, pero yo lo habría dejado en una explicación básica o directamente lo hubiese sacado del libro.
Para aprender LINQ hay otro libro de esta misma casa que ya reseñaré más adelante.

Conclusión:
En conclusión, este libro es la mejor manera para llegar a dominar lo que se dice TODO C#, eso sí, es aburridísimo como habréis podido notar de mi reseña… No deja de ser escupir features una tras otra sin cesar. Aun así, lo hace una forma magistral, fácil de entender y sobretodo fácil de digerir.

Sin más preámbulos:

Positivo:

• Nos hace ver lo que hacemos mal y cómo mejorarlo.
• Explica todas las features del lenguaje en su versión 2 y 3.
• Los ejemplos de código, aunque de juguete, son muy claros.
• No deja nada sin explicar, tiene respuesta a todo.

Negativo:

• La parte de LINQ, sobraba, muy difícil de asimilar.
• Algunas partes muy concretas son duras y difíciles de entender (Lease expression trees).

La nota será de 9.8. Le habría dado más puntos si hubiese quitado la parte de LINQ, puesto que solo hace confundir, y ya lo hubiese rematado si hubiese encontrado una forma de explicar los ‘Expression trees’ de una forma entendible.
Si os termináis de leer este libro, probablemente el próximo a la cola sería el de Linq In Action, ya que explica LINQ de forma magistral y hasta los ‘Expression trees’ los explica bien jeje.

Bueno, os dejo el enlace a la página oficial del libro:

Link

Un saludo,
Fox

Para seguir este artículo necesitaréis de Microsoft Expression Blend 3 o Visual Studio 2010 Beta 2. Además necesitaréis una copia del proyecto del artículo “Data Templates“.

Antes de explicaros qué significa exactamente eso de Datos en tiempo de diseño quiero que veais el problema en vuestras carnes y así buscarle una solución idónea.

Yo usaré Blend 3 así que las imágenes y las instrucciones serán usando este soft, pero se pueden aplicar con Visual Studio 2010 sin ningún problema.

Imaginad esta situación:

Queréis modificar el Data Template que habíamos creado del ejemplo citado. No sé, el borde ese verde que tiene cada item no os gusta y queréis ir probando colores hasta encontrar uno que os guste más. Ningún problema, abres el proyecto con el Blend 3 y….

Vaya tela, nos sale una bonita ventana en blanco… ¿Por qué no sale el contenido? No nos sale porque ni Blend ni Visual studio ni nadie sabe qué ha de representar ahí, o mejor dicho, nosotros estamos ‘bindeando’ ese contenido a una propiedad del DataContext, o sea del ViewModel. Blend no sabe nada sobre ese DataContext que hemos establecido en código, así que el no sabe que ha de mostrar ahi ni nada. Si bien sabe como dibujar el Data Template, no sabe qué ‘Data’ tiene que reprentar ahi.

Entonces con Blend 3 llegó una nueva cosita llamada Datos en tiempo de diseño, o lo que es lo mismo, ofrecerle unos datos ‘de mentira’ a Blend 3 a fin de que los use para dibujar los Data Template en la ventana.

¿Qué quiero decir con eso de ofrecerle unos datos de mentira? Fácil, el ItemsControl está asociado a una lista llamada ListaPersonas, pero dicha lista ‘viene’ del DataContext y como ya os he dicho, el editor visual no puede mostrar nada que venga de ahi, por eso nos aparece la ventana en blanco, porque ignora el DataContext.

Aquí es donde entra el Datos en tiempo de diseño (Design-time Data). es digamos un DataContext especial sólo para diseñar, así podemos mostrar datos ‘Fake’ y ver como quedaría sin ejecutar la aplicación ni nada. Por ejemplo:

Imaginad que estais haciendo una aplicación de Twitter. Cuando la aplicación se conecta a la red, descarga tus tweets, y crea una instancia de la clase Tweet por cada tweet que recoja. ¿Cómo diseñarías la ventana principal del programa? ¿Creas un no sé, ItemsControl y creas un DataTemplate para los Tweet? Es una idea, pero es un coñazo, tienes que crear un template, abrir el programa, conectarte a tu Twitter, que descargue tus Tweets y ver que… oh mierda, ese borde no moooola nada. Cierras la aplicación, modifica el borde y otra vez a probarlo. Si tienes que hacer eso 50 veces para dejar el estilo a tu gusto, mueres.

¿Qué hacer entonces? Creas una clase llamada… FakeTweets por ejemplo que herede de la clase que usa tu ventana de DataContext, ahí instancias la lista del datacontext, creas unos cuantos tweets de mentira y usas la técnica que explicaré a continuación

Este ejemplo es algo muy común, porque donde dices Twitter, dices aplicación de msn y su ventana de contactos, etc.

Vamos a nuestra aplicación que ya está abierta en Blend, y añadimos lo siguiente dentro del Tag de la ventana…

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DataTemplates"
mc:Ignorable="d"

Con lo que quedaría así:

<Window x:Class="DataTemplates.Window1"
    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:local="clr-namespace:DataTemplates"
	mc:Ignorable="d"
    Title="Data Templates" Height="600" Width="600"
    Background="#f8fffb">

Voy a detallar para qué sirve cada uno:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:DataTemplates"

Los 3 son namespace como podeis ver, cada uno con una idea en mente.

El primero es el que añade todo el tema de Datos en tiempo de diseño.
El tercero es para importar el namespace de nuestra aplicación (luego veremos por qué)
El segundo va en conjunto con:

mc:Ignorable="d"

El namespace ‘mc’ que hemos importando antes nos sirve para usar el Ignorable. ¿Para qué sirve esto? Sirve para excluir todo lo que sea del namespace indicado a la hora de compilar. ¿Por qué ignoramos el namespace ‘d’? Porque lo que nos ofrece son cosas que nos facilitan la vida a la hora de diseñar la aplicación, pero que a la hora de ejecutarla ya no nos sirve. Así que la aplicación compilada no contendrá nada de lo que coloquemos de cara a ayudarnos a diseñar.

¿Y ahora qué? Ahora tenemos que cargar en el XAML la clase con los datos ‘fake’ (como por ejemplo la clase con tweets de mentira), en nuestro caso nos basta con cargar el Presenter ya que trae datos de ejemplos que nos servirá para el caso.

Para esto podemos usar por ejemplo un ObjectDataProvider:

<Window.Resources>
	<ObjectDataProvider ObjectType="{x:Type local:Presenter}" x:Key="FakeVM" />
</Window.Resources>

Como ves, he cargado el Presenter (usando el namespace local que cargué antes) y le he dado el nombre de FakeVM.

Ya solo nos quedaría cargar dicho objeto dentro del Data Context en tiempo de diseño, el cual está en el namcespace ‘d’.

En nuestro ejemplo, se lo asignaremos al ItemsControl como era de esperar:

<ItemsControl ItemsSource="{Binding ListaPersonas}" d:DataContext="{StaticResource FakeVM}">

NOTA: El método que he descrito aquí, inclusive los namespaces de blend, sirve tanto para Blend 3 como para Visual Studio 2010 (Beta 2 en adelante)

ahora, si vamos al modo diseño…

Ya se ve!! Pero dirás… ¿Y ahora qué? ¿Puedo modificar el template en modo diseño y en ver los resultados en tiempo real? Claro que sí!

En Blend 3, abajo a la izquierda nos aparecerá el arbol de objetos de nuestra aplicación:

Screenshot

Ahi hacemos click derecho en ItemsControl y luego Edit Aditional Templates -> Edit Generated Items (ItemTemplate) -> Edit Current. Al hacer esto vemos como se señala el primer objeto del ItemsControl (ya que realmente editando uno, cambian todos).

Ya solo nos queda hacer los cambios pertinentes, por ejemplo cambiando el borde de cada objeto por uno con gradiente Negro <-> Blanco. Comprobareis con alegría que mientras moveis el cursor en la paleta de colores, el resultado se va viendo en tiempo real, y no necesitaréis ejecutar la aplicación con cada cambio.

Así que en resumen, teneis una manera de poder diseñar los Data Templates de forma visual usando datos ‘fake’ y que no afectará para nada a la aplicación compilada.

Espero vuestros comentarios

Siento no escribir tanto como me gustaría, pero estuve de exámenes hace poco, y ahora he empezado a trabajar.

Bueno, antes de dichos exámenes escribí una nueva versión del Apunta Notas y la anucio por aquí para que la probeis.

Dicha versión tiene:

• Ahora al borrar una categoría te da la opción de borrar todas las notas asociadas a ella.
• Si decides no borrar dichas notas, se enviarán a una categoría oculta llamada “Papelera”.
• Ahora al pulsar intro se añadirá la nota automaticamente (antes no me funcionaba por un pequeño bug que no veía)
• Los rectangulos de los colores también son botones para seleccionar el color
• Algun bug solucionado

Quizá se me olvide algo, pero ahora no caigo, realmente metí muchas mejoras a lo largo de 2 dias de trabajo con el.

Los enlaces están donde siempre

A ver si este fin de semana puedo hacer algo más interesante.

Pues aquí estoy orgulloso de presentaros la nueva versión de mi programa de notas. Como veréis a continuación, el cambio es significativo:

Como podéis ver, ahora soporta distintas categorías y estas, distintos colores.

No sólo eso, si no que además podeis ampliar el tamaño de las notas por si quereis verla desde lejos del monitor[1]:

También tiene un editor de categorías donde podrás modificar todos los apartados de éstas como podéis ver aquí:

Como veis, podeis cambiar el nombre, color de fondo, color de texto… y además podéis ver una vista prévia de la nota para ver como quedará.

Para más detalles y descarga podéis visitar la página de Apunta Notas 2.

[1]: Yo personalmente apunto las cosas que le quiero comentar a mi novia y cuando la llamo me tumbo en la cama, así que pongo las notas bien grandecitas y así las veo desde allí

Estáis deseosos de aprender más maravillas de WPF, ¿verdad? Pues nada, aquí os traigo algo muy util que os podría venir bien para vuestros propios desarrollos.

Empezamos con la gran pregunta:

¿Qué son los Data Templates?

Imagina que tienes una clase llamada Persona, Animales, etc. y queréis representar instancias de dichas clases visualmente en vuestro programa, el problema como ya sabes es que dichas clases no tienen ninguna representación visual, con lo cual el resultado de ligar una instancia (o una lista de instancias) a un control como por ejemplo un ItemsControl sería el de llamar al método ToString de la instancia lo que nos da un resultado pésimo.

¿Qué podemos al respecto? Pues lo que estabas pensando si, usar Data Templates.

¡Al turrón!

Creamos un nuevo proyecto llamado Data Templates y creamos una clase llamada Personas, dicha clase contendrá este código:

public class Persona
{
    public string Nombre {get; set; }
    public string Direccion { get; set; }
    public string Telefono { get; set; }
    public int Edad { get; set; }
    public string Sexo { get; set; }
    public string UrlImagen { get; set; }
    public string Color { get; set; }

    public Persona(string nombre, string direccion, string telefono,
                    int edad, string sexo)
    {
        Nombre = nombre;
        Direccion = direccion;
        Telefono = telefono;
        Edad = edad;
        Sexo = sexo;

        if (Sexo.Equals("Hombre"))
        {
            Color = "#bcebf9";
            UrlImagen = "Imagenes\\hombre.png";
        }
        else
        {
            Color = "#f8c2cd";
            UrlImagen = "Imagenes\\mujer.png";
        }
    }

    public override string ToString()
    {
        return string.Format("Hola me llamo {0}, vivo en {1}, mi telefono es {2}, tengo {3} años y soy {4}", Nombre, Direccion, Telefono, Edad, Sexo);
    }
}

Nada aquí que os vaya a sorprender, una clase Persona, que aunque bastante mejorable, va de sobra para nuestro ejemplo. Puntualizo un par de cosas:

Ignorad por ahora el tema de las imagenes y el color, eso se usará más adelante (también meteremos las imagenes más adelante en el proyecto)
El método ToString solo es para ver como quedaría la cosa sin Data Templates y luego se borrará.

Ahora creamos una clase llamada Presenter y le añadimos el siguiente código:

class Presenter
{
    private List<Persona> listaPersonas;

    public Presenter()
    {
        listaPersonas = new List<Persona>();

        listaPersonas.Add(new Persona("Jesus", "Calle 13", "132456789", 23, "Hombre"));
        listaPersonas.Add(new Persona("Rosi", "Big street 15", "987654321", 27, "Mujer"));
        listaPersonas.Add(new Persona("Álvaro", "To lejos street", "147258369", 24, "Hombre"));
    }

    public List<Persona> ListaPersonas
    {
        get { return listaPersonas; }
        set { listaPersonas = value; }
    }
}

Una clase normal y corriente, simplemente creamos una lista de personas y añadimos algunos ejemplos de personas.

Ahora abrimos el code-behind de la ventana (Windows1.xaml) y modificamos el constructor para que quede de esta manera:

public Window1()
{
    InitializeComponent();
    DataContext = new Presenter();
}

Y ahora, abrimos la ventana en sí y colocamos este markup:

<Window x:Class="DataTemplates.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Data Templates" Height="600" Width="600">
    <ItemsControl ItemsSource="{Binding ListaPersonas}">

    </ItemsControl>
</Window>

Aquí simplemente añadimos un ItemsControl vacío al que le ligamos la lista que hemos creado anteriormente.

Ahora ejecutamos la aplicación y vemos el resultado:

Como podeis ver, apesta, es lo más cutre “ever seen”, así que vamos a arreglarlo usando los Data Templates.

Antes que nada, me gustaría explicar una cosilla para que no os lieis tanto:

Hay 2 clases bases para los controles, por un lado tenemos la clase ContentControl de la cual heredarán aquellos controles que solo tienen una pieza de contenido, como button, Label, etc.
Por otro lado tenemos la clase ItemsControl de la cual heredarán aquellos controles que muestran una colección de items, como TreeView, ListBox, etc.

Si con la funcionalidad básica que nos ofrecen dichas clases bases vamos bien, no tenemos por qué usar ninguna hija, y en este caso como habeis visto, hemos usado simplemente un ItemsControl pues es todo lo que necesitamos.

Bueno, al grano, si queremos usar los Data Templates, lo unico que debemos hacer es decirle al control, en este caso el ItemsControl, que vamos a definir el aspecto de cada item del control, ¿Cómo? Así:

<ItemsControl ItemsSource="{Binding ListaPersonas}">
    <ItemsControl.ItemTemplate>
		<DataTemplate>
			...
		</DataTemplate>
	</ItemsControl.ItemTemplate>
</ItemsControl>

Ahí, donde están los puntos suspensivos pues añadimos todo el xaml necesario para lograr el aspecto que queramos. Recordad que estamos definiendo el aspecto de UN solo item y no de toda la colección a la vez, así que ahi escribimos como queremos que se vea cada item y ya se aplicará para todos los items de la lista.

Así que sabiendo esto, vamos a modificar nuestro ejemplo.

Para empezar, puedes borrar el ToString de la clase Personas que ya no nos vale, una vez hecho esto, creamos el directorio Imagenes dentro del proyecto y ahi metemos las dos imágenes que voy a adjuntar a continuación (boton derecho -> guardar como):

[Imagen hombre]

[Imagen mujer]

Ya lo único que nos queda es modificar el ItemsControl añadiendole el template de cómo queremos que se represente cada instancia de la clase.

El código de la ventana quedaría así:

<Window x:Class="DataTemplates.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Data Templates" Height="600" Width="600"
    Background="#f8fffb">
    <ItemsControl ItemsSource="{Binding ListaPersonas}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="#4f9d70" BorderThickness="2"
                        Margin="5" Padding="2.5">
                    <Grid Background="{Binding Color}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                            <RowDefinition Height="auto" />
                        </Grid.RowDefinitions>
                        <Border BorderBrush="#4f9d70"  BorderThickness="1"
                                Margin="2.5" Grid.RowSpan="4">
                            <Image Source="{Binding UrlImagen}" />
                        </Border>
                        <TextBlock Text="Nombre: " FontSize="20" FontWeight="Bold" Grid.Column="1" />
                        <TextBlock Text="{Binding Nombre}" FontSize="20" Grid.Column="2" />

                        <TextBlock Text="Dirección: " FontSize="20" FontWeight="Bold" Grid.Column="1" Grid.Row="1" />
                        <TextBlock Text="{Binding Direccion}" FontSize="20" Grid.Column="2" Grid.Row="1" />

                        <TextBlock Text="Teléfono: " FontSize="20" FontWeight="Bold" Grid.Column="1" Grid.Row="2" />
                        <TextBlock Text="{Binding Telefono}" FontSize="20" Grid.Column="2" Grid.Row="2" />

                        <TextBlock Text="Edad: " FontSize="20" FontWeight="Bold" Grid.Column="1" Grid.Row="3" />
                        <TextBlock Text="{Binding Edad}" FontSize="20" Grid.Column="2" Grid.Row="3" />
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

Bueno, aunque os de miedo al principio, el código es bastante facilón.

Añadimos un borde y dentro pues un grid y dentro de dicho grid colocamos los controles para representar los datos.

Aquí muy importante decir, que el DataContext dentro del DataTemplate será la instancia del objeto con el que estamos tratando, así que por ejemplo:

<TextBlock Text="{Binding Nombre}" FontSize="20" Grid.Column="2" />

Aqui con Nombre no nos estamos refiriendo a una propiedad llamada Nombre dentro de Presenter (el DataContext de la ventana), si no a la propiedad Nombre de las instancias de Persona que tiene la lista.

Ahora estáis viendo el uso que le doy a la propiedad Color dentro de la clase Persona, lo uso para definir el color de fondo del item. Sé que no debería añadir esta propiedad dentro de la clase, pero lo hago con motivos ilustrativos simplemente.

Creo que aquí no hay más nada que requiera de una explicación, aunque si os dejaré una screenshot para aquellos que no estén escribiendo el ejemplo en sus ordenadores.

Bueno, creo que no se me olvida nada, ahora solo queda esperar vuestros comentarios para ver que os ha parecido el artículo.

Os adjunto el proyecto : DataTemplates.rar