Crear un origen de datos de objetos CLR

En Microsoft® Expression Blend™ puede trabajar con orígenes de datos XML y orígenes de datos de objeto CLR. Trabajar con orígenes de datos XML es sencillo, pero los orígenes de datos de objeto CLR son bastante más complicados. Los siguientes procedimientos le indican cómo mostrar datos desde un origen de datos CLR (Common Language Runtime) en una aplicación de Expression Blend. Las primeras dos tareas implican obtener datos de una base de datos de ejemplo y, a continuación, convertir los datos en un formato al que Expression Blend pueda enlazarse. La tercera tarea implica crear un proyecto de Expression Blend que tenga elementos enlazados a los datos.

Sugerencia

Para seguir los procedimientos de este tema tal y como aparecen, necesita Microsoft® Visual Studio® 2005 y Microsoft® SQL Server™ 2005 con la base de datos de ejemplo AdventureWorks instalada. Para obtener más información acerca de la obtención del ejemplo AdventureWorks, vea el artículo sobre la instalación de las bases de datos de ejemplo y los ejemplos de AdventureWorks en MSDN (puede estar en inglés).

Si lo prefiere, puede crear un DataTable o DataSet desde otra base de datos. Si lo hace así, adapte la primera y la segunda tarea de este tema para que se ajusten a los datos que tiene. Los principios serán exactamente los mismos siempre que use un origen de datos CLR (o Microsoft® .NET Framework).

Definir y rellenar un DataTable

En el siguiente procedimiento se describe cómo crear una biblioteca de clases en Visual Studio 2005 para rellenar una instancia de DataTable con datos de la base de datos de ejemplo AdventureWorks.

  1. En el menú Archivo de Visual Studio 2005, elija Nuevo y, a continuación, haga clic en Proyecto.
    Se abrirá el cuadro de diálogo Nuevo proyecto.
  2. En Tipos de proyecto, seleccione Visual C#. En Plantillas, haga clic en Biblioteca de clases. Póngale al proyecto nuevo el nombre AWDataSource y, a continuación, haga clic en Aceptar.
    Visual Studio genera el código del nuevo proyecto de biblioteca de clases y abre el archivo Class1.cs para su edición.
  3. En el archivo Class1.cs, cambie el nombre de la definición de clase pública Class1 a ProductPhotosCollection.
    Este nombre es más descriptivo.
  4. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto (AWDataSource), elija Agregar y, a continuación, haga clic en Nuevo elemento.
    Se abrirá el cuadro de diálogo Agregar nuevo elemento.
  5. Seleccione DataSet en la lista de plantillas, póngale al elemento el nombre ProductPhotos.xsd y, a continuación, haga clic en Agregar.
    Se agrega DataSet al proyecto en forma de un archivo de esquema y archivos de clase auxiliares, y el archivo de esquema se abre para su edición.
    Un DataSet es un objeto que contiene tablas de datos en las que se pueden guardar temporalmente datos en la memoria para utilizarlos en la aplicación que se está ejecutando. Para obtener más información, vea la información general sobre conjuntos de datos en Visual Studio en MSDN (puede estar en inglés).
  6. En el Explorador de servidores, haga clic con el botón secundario en Conexiones de datos y, a continuación, haga clic en Agregar conexión.
    Se abrirá el cuadro de diálogo Elegir origen de datos.
  7. El campo Origen de datos debe mostrar Microsoft SQL Server (SqlClient).
    Sugerencia Si no va a usar una base de datos SQL, haga clic en el botón Cambiar para seleccionar un origen de datos alternativo. Los pasos siguientes no coincidirán con lo que verá en el cuadro de diálogo Elegir origen de datos de Visual Studio.
  8. En el campo Nombre del servidor, escriba el nombre de la instancia de SQL Server en la que está instalada la base de datos AdventureWorks.
    Sugerencia Si va a usar una base de datos SQL que no sea AdventureWorks, seleccione el nombre del servidor que tenga instalada esta base de datos.
  9. En Conexión con el servidor, seleccione el método de autenticación requerido para iniciar sesión en la instancia de SQL Server. Es posible que necesite consultar al administrador del servidor para obtener esta información. La Autenticación de Windows usa las credenciales de inicio de sesión actuales. La Autenticación de SQL Server requiere el nombre de usuario y la contraseña de la cuenta configurada para obtener acceso a la base de datos.
  10. En Conectar con una base de datos, seleccione la base de datos AdventureWorks, que se verá únicamente si las credenciales de inicio de sesión son correctas y la base de datos AdventureWorks está instalada en el equipo de SQL Server seleccionado.
  11. Haga clic en el botón Probar conexión.
    Si la conexión de prueba no funciona, pida ayuda al administrador de SQL Server.
  12. Haga clic en Aceptar para terminar de crear la conexión de datos.
    En el Explorador de servidores, aparecerá una nueva conexión en el nodo Conexiones de datos con el nombre <nombreDeServidor>.AdventureWorks.dbo.
  13. En el Explorador de servidores, expanda el nuevo nodo de conexión <nombreDeServidor>.AdventureWorks.dbo, expanda el nodo Tablas y, a continuación, busque la tabla ProductPhoto. Con el archivo ProductPhotos.xsd abierto en la superficie de diseño, arrastre la tabla ProductPhoto desde el Explorador de servidores hasta la superficie de diseño.
    Ahora tiene un conjunto de datos que es capaz de conectarse a la base de datos AdventureWorks y devolver el contenido de la tabla ProductPhoto.
  14. En el archivo Class1.cs, agregue el siguiente método dentro de la clase ProductPhotosCollection:
        private void GetData()
        {
            ProductPhotosTableAdapters.ProductPhotoTableAdapter da =
                new ProductPhotosTableAdapters.ProductPhotoTableAdapter();
            ProductPhotos.ProductPhotoDataTable dt = da.GetData();
        }
    El espacio de nombres ProductPhotosTableAdapters se define en el archivo ProductPhotos.Designer.cs, que fue generado por Visual Studio al crear un DataSet ProductPhotos.
    Ahora tiene un método que rellenará con datos una instancia de un DataTable ProductPhotos al ejecutar la aplicación.
  15. Genere el proyecto (F6) para asegurarse de que no haya errores.

Adaptar la recopilación de datos a una colección WPF

Con el siguiente procedimiento se describe cómo crear una biblioteca de clases en Visual Studio 2005 para convertir datos de un DataTable a un ObservableCollection para que Expression Blend (o cualquier otra aplicación que use Windows Presentation Foundation) pueda enlazar a los datos. Definirá una clase ProductPhoto para representar los datos en una fila de tabla, agregará una colección de ProductPhotos a ProductPhotosCollection como miembro privado y, a continuación, agregará un descriptor de acceso público para que la lógica externa a la clase pueda obtener acceso.

Sugerencia Si ha seguido la tarea anterior de este tema, ahora tendrá una instancia de DataTable con la que trabajar que contiene datos de la tabla ProductPhoto de la base de datos AdventureWorks. Si tiene un DataTable o un DataSet que se rellenó desde otro origen, adapte el nombre de la tabla de datos y los nombres de los campos en los pasos siguientes para que se adapten a los datos que tiene.
  1. En Visual Studio, haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y, a continuación, haga clic en Agregar referencia. En la ficha .NET, seleccione el ensamblado WindowsBase. Si no ve el ensamblado WindowsBase en la lista, puede seleccionar la ficha Examinar y buscar el ensamblado WindowsBase.dll en la carpeta %SystemDrive%\Archivos de programa\Reference Assemblies\Microsoft\Framework\v3.0. Haga clic en Aceptar.
    El ensamblado WindowsBase implementa la clase System.Collections.Object.ObservableCollection.
  2. En la parte superior del archivo Class1.cs, agregue la siguiente instrucción:
        using System.Collections.ObjectModel;
  3. Aún en el archivo Class1.cs, agregue la siguiente definición de clase ProductPhoto al espacio de nombres AWDataSource, de manera que tenga una clase con la que trabajar en los pasos que quedan de esta tarea:
        public class ProductPhoto { }
  4. Agregue el siguiente miembro a la clase ProductPhotosCollection:
        private ObservableCollection<ProductPhoto> productPhotos =
            new ObservableCollection<ProductPhoto>();
  5. Agregue el siguiente método de descriptor de acceso a la clase ProductPhotosCollection:
         public ObservableCollection<ProductPhoto> ProductPhotos
        { get { return this.productPhotos; } }

  6. Los siguientes pasos implican copiar los datos de DataTable en ObservableCollection. No es necesario copiar todos los campos, sólo el identificador, la fecha modificada y las dos fotos.

  7. Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones y, a continuación, haga clic en Agregar referencia. Agregue una referencia al ensamblado PresentationCore.
  8. En la parte superior del archivo Class1.cs, agregue las siguientes instrucciones:
        using System.Windows.Media;
        using System.Windows.Media.Imaging;
  9. Agregue miembros a la clase ProductPhoto para que tenga una apariencia similar a la siguiente:
        public class ProductPhoto
        {
            // Public Accessors to the private properties.
            public int ID { get { return id; } }
            public ImageSource ThumbNailPhoto { get { return thumbNailPhoto; } }
            public ImageSource LargePhoto { get { return largePhoto; } }
            public DateTime ModifiedDate { get { return modifiedDate; } }

            // Constructor.
            public ProductPhoto(int id,     byte[] thumbNailPhoto, byte[] largePhoto,
                DateTime modifiedDate)
            {
                this.id = id;
                this.thumbNailPhoto = ByteArrayToImageSource(thumbNailPhoto);
                this.largePhoto = ByteArrayToImageSource(largePhoto);
                this.modifiedDate = modifiedDate;
            }

            // Private properties.
            private int id;
            private ImageSource thumbNailPhoto;
            private ImageSource largePhoto;
            private DateTime modifiedDate;

            // Supporting method.
            private ImageSource ByteArrayToImageSource(byte[] data)
            {
                BitmapImage image = null;
                if (null != data)
                {
                    image = new BitmapImage();
                    image.BeginInit();
                    image.StreamSource = new System.IO.MemoryStream(data);
                    image.EndInit();
                }
                return image;
            }
        }
  10. Agregue el siguiente código a la clase ProductPhotosCollection al final del método GetData, de manera que éste copie DataTable en ObservableCollection:
        productPhotos.Clear();
        foreach (ProductPhotos.ProductPhotoRow row in dt)
        {
            productPhotos.Add(new ProductPhoto(
                row.ProductPhotoID,
                row.ThumbNailPhoto,
                row.LargePhoto,
                row.ModifiedDate));
        }

    Ahora, como forma cómoda de desencadenar el método ProductsPhotosCollection.GetData, podemos implementar un Comando.

  11. Haga clic con el botón secundario en el nombre del proyecto en el Explorador de soluciones, haga clic en Agregar y, a continuación, haga clic en Elemento existente. En el cuadro de diálogo Agregar elemento existente, busque el archivo DelegateCommand.cs en la carpeta de ejemplos de Expression Blend %SystemDrive%\Archivos de programa\Microsoft Expression\Blend\Samples\<idioma>\ColorSwatch y, a continuación, haga clic en Agregar. Cambie el espacio de nombres ColorSwatch por el nombre de su espacio de nombres (AWDataSource).
    El código del archivo DelegateCommand.cs permite enlazar cualquier comando al método.
  12. En el archivo Class1.cs, agregue el siguiente miembro a la clase ProductPhotosCollection:
        private DelegateCommand getDataCommand;
  13. Agregue el siguiente constructor a la clase ProductPhotosCollection para inicializar el comando:
        public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
  14. Por último, exponga el comando al agregar el siguiente método de descriptor de acceso a la clase ProductPhotosCollection:
        public DelegateCommand GetDataCommand { get { return getDataCommand; } }
  15. Genere el proyecto (F6) para asegurarse de que no haya errores.
    Ahora tiene una clase que se puede usar como origen de datos en una aplicación de Expression Blend (o cualquier aplicación de WPF). Esta clase será ProductPhotosCollection u otra equivalente si ha definido su propia clase.

Enlazar con el origen de datos en Expression Blend

En el siguiente procedimiento, se describe cómo crear una aplicación de Expression Blend muy sencilla que tenga un control ListBox enlazado al origen de datos. La aplicación usa un patrón común de diseño de interfaz de usuario conocido como vista maestro/detalles. El panel izquierdo, denominado panel maestro, contendrá la lista de productos. Cada vez que seleccione un producto en este panel, los detalles de dicho producto se mostrarán en el panel derecho, denominado panel de detalles. Para que el contenido de un panel se actualice al seleccionar un elemento en otro panel, use la sincronización de datos entre los controles.

  1. En Expression Blend, haga clic en Archivo y, a continuación, haga clic en Nuevo proyecto.
    De esta manera se abre la ventana Crear proyecto nuevo.
  2. Seleccione el tipo de proyecto Aplicación estándar (.exe).
    Así se crea un proyecto para una aplicación basada en Windows que se puede generar y ejecutar mientras se está diseñando. La otra opción es un proyecto Biblioteca de controles, que se usa para diseñar controles que pueden usarse en otras aplicaciones basadas en Windows.
  3. En el cuadro de texto Nombre, escriba AWProductPhotos. Como no tiene que escribir ningún código en este procedimiento, puede dejar Lenguaje con la opción predeterminada. Haga clic en Aceptar.
    Expression Blend carga el proyecto nuevo y lo muestra para su edición.
    Sugerencia Si tenía un proyecto abierto anteriormente, puede que primero vea un cuadro de diálogo en el que se le preguntará si desea guardar o descartar el proyecto actual antes de abrir el nuevo.
  4. Una vez cargado el proyecto nuevo en la memoria, guárdelo en el disco. En el menú Archivo, haga clic en Guardar todo. El cuadro de texto Nombre debería incluir ya el nombre AWProductPhotos, así que haga clic en Aceptar.
    Nota Cuando se trabaja en Expression Blend, los cambios tienen lugar en la memoria y no en el disco duro, por lo que es preciso asegurarse de guardarlos pronto y a menudo.
    Para obtener más información, vea Administrar los proyectos.
  5. En el menú Proyecto, haga clic en Agregar referencia. En el cuadro de diálogo Agregar referencia que se abre, busque una referencia para agregar al archivo AWDataSource.dll que generó al final de la segunda tarea de este tema. El archivo AWDataSource.dll estará probablemente en la carpeta bin/Debug del proyecto AWDataSource. Haga clic en Aceptar.
    AWDataSource.dll forma ahora parte del proyecto. Si expande el nodo Referencias en Archivos, en el panel Proyectos, verá una referencia a AWDataSource.dll.
  6. En Datos, en el panel Proyecto, haga clic en el botón +Objeto CLR.
    Se abrirá el cuadro de diálogo Agregar origen de datos de objeto CLR.
  7. Expanda el nodo AWDataSource, seleccione ProductPhotosCollection y, a continuación, haga clic en Aceptar.
    En Datos, en el panel Proyecto, se ha agregado al proyecto un origen de datos con el nombre ProductPhotosCollectionDS. El origen de datos ProductPhotosCollectionDS representa la estructura de una instancia de la clase CLR a la que hizo referencia. Expanda ProductPhotosCollectionDS y ProductPhotosCollection para ver la estructura. En un paso posterior de esta tarea, arrastrará datos al área de diseño desde Datos, en el panel Proyecto, para crear controles nuevos.
  8. En Objetos y escala de tiempo, en el panel Interacción, haga doble clic en LayoutRoot para activarlo.
    Observe que cuando se activa el elemento, aparece un rectángulo de selección amarillo alrededor del nombre. Este elemento podría haber sido activado ya.
    Sugerencia Si desea agregar elementos secundarios a un elemento o realizar alguna otra operación especial, haga doble clic en el elemento principal en Objetos y escala de tiempo en el panel Interacción y, a continuación, agregue el elemento secundario. Esta acción se denomina activación. El elemento activado se identifica mediante un rectángulo de selección amarillo alrededor del nombre.
    Si desea cambiar las propiedades de un elemento, haga clic una vez en el nombre en Objetos y escala de tiempo, en el panel Interacción. Esta acción se denomina selección. El elemento seleccionado se identifica mediante un color de fondo resaltado.
    Puede seleccionar un elemento sin activarlo.
  9. En el Cuadro de herramientas, haga clic en la herramienta Selección Herramienta Selección. En el área de diseño, desplace el puntero del mouse sobre el área de la regla azul gruesa en la parte superior de LayoutRoot. Una regla de columna naranja sigue al puntero del mouse e indica el lugar en que se colocará un divisor de columna al hacer clic.
    Haga clic para crear un nuevo divisor de columna y deje la columna izquierda aproximadamente del mismo ancho que la columna derecha. La columna izquierda contendrá una lista de vistas en miniatura de las fotos del producto; la columna derecha contendrá una foto grande que representa el elemento seleccionado de la lista.
    Un divisor de columna azul aparece dentro de LayoutRoot.
    Sugerencia Para poder ver todos los elementos de LayoutRoot en el área de diseño, es posible que necesite alejarse. Para ello, escriba un valor de zoom en el cuadro de texto de la parte inferior del área de diseño Cuadro de texto de zoom, haga clic en la flecha situada junto al valor de zoom o gire la rueda del mouse mientras mantiene presionada la tecla Ctrl.
  10. En el área de diseño, desplace el puntero del mouse sobre el área de la regla azul gruesa en el lado izquierdo de LayoutRoot. Haga clic para crear un nuevo divisor de fila y deje la fila superior con un tamaño adecuado para colocar dentro un botón. Haga clic en el icono de candado abierto que aparece junto a la fila superior para bloquear la fila con un alto fijo.
    Sugerencia

    Si tiene curiosidad por ver los resultados de la acción descrita en el paso anterior, haga clic con el botón secundario en LayoutRoot en Objetos y escala de tiempo, en el panel Interacción, y haga clic en Ver XAML. De esta manera, el área de diseño cambia a la vista XAML con el código de LayoutRoot resaltado. Para verlo mejor, en el menú Ventana, haga clic en Ocultar paneles (F4 o Tab).
    Se han agregado las secciones <Grid.ColumnDefinitions> y <Grid.RowDefinitions> al elemento <Grid> que representa LayoutRoot. Los atributos Width y Height usan el escalado proporcional, en el que los tamaños de las columnas son proporcionales entre sí. Por ejemplo, un atributo Width de "2*" producirá una columna del doble de tamaño que una columna cuyo atributo Width sea "*". La columna que se bloqueó no usa el escalado proporcional porque su alto es fijo.
    Cuando haya terminado con la vista XAML (lenguaje de marcado de aplicaciones extensible), no olvide volver a la vista Diseño y restaurar los paneles (F4 o Tab).
  11. En Datos, en el panel Proyecto, arrastre GetDataCommand (desde ProductPhotosCollection) a la celda superior izquierda de la cuadrícula en el área de diseño. En la lista desplegable que aparece, haga clic en Button.
    Se abrirá el cuadro de diálogo Crear enlace de datos.
  12. En Seleccionar campo, elija Command y, a continuación, haga clic en Aceptar.
    Se ha creado un nuevo botón que está enlazado al método de descriptor de acceso GetDataCommand de la clase AWDataSource. En tiempo de ejecución, cuando se hace clic en el botón, GetDataCommand se ejecutará en el origen de datos ProductPhotosCollection y, como en la segunda tarea de este tema, la implementación de dicho comando simplemente llamará al método GetData.
    Sugerencia

    Puede mover y cambiar el tamaño del nuevo botón en el área de diseño; para ello, haga clic en la herramienta Selección en el Cuadro de herramientas, seleccione el nuevo botón en el área de diseño o en Objetos y escala de tiempo y, a continuación, use las etiquetas contextuales azules del área de diseño.
    Sugerencia

    Puede obtener acceso a los enlaces de datos desde el panel Propiedades. Para volver a abrir el cuadro de diálogo Crear enlace de datos una vez creado el enlace de datos, seleccione el botón en Objetos y escala de tiempo; en Varios en el panel Propiedades, haga clic en Opciones avanzadas de la propiedad junto a la propiedad Command y, a continuación, haga clic en Enlace de datos.
  13. Con [Button] seleccionado en Objetos y escala de tiempo, vaya a Propiedades comunes, en el panel Propiedades. Establezca la propiedad Content en Get Product Photos.
  14. Mueva y cambie el tamaño del elemento [Button]; para ello, haga clic en la herramienta Selección en el Cuadro de herramientas y, a continuación, use las etiquetas contextuales azules del área de diseño. Ajuste [Button] dentro de la celda superior izquierda de la cuadrícula. A continuación, en la categoría Diseño del panel Propiedades, establezca las siguientes propiedades:
    • Establezca las propiedades Width y Height en Auto.
    • Establezca las propiedades de Margin en 0.
    • Establezca las propiedades HorizontalAlignment y VerticalAlignment en Center.
    Esta configuración garantiza que el botón será del tamaño necesario para ajustar el texto de la propiedad Content y, además, centra el botón dentro de la celda de la cuadrícula.
  15. En Datos, en el panel Proyecto, arrastre ProductPhotos (Array) a la celda inferior izquierda de la cuadrícula en el área de diseño. En la lista desplegable que aparece, haga clic en ListBox.
    Se abrirá el cuadro de diálogo Crear enlace de datos.
  16. En Seleccionar campo, elija ItemsSource y, a continuación, haga clic en Aceptar.
    Se abrirá el cuadro de diálogo Crear plantilla de datos.
    Sugerencia Una plantilla de datos es en esencia un árbol de elementos de la interfaz de usuario que pueden contener enlaces a datos. Siempre que se necesite mostrar datos de un tipo determinado, la plantilla de datos adecuada se selecciona y muestra al usuario una copia nueva y completa del árbol de elementos que incluye datos actualizados. Cada uno de los elementos que se muestran en el elemento ListBox es un objeto del tipo ProductPhoto que se implementó en la segunda tarea de este tema.
  17. Seleccione el botón de opción Nueva plantilla de datos y campos para mostrar.
    Esta opción define la estructura del tipo de datos que se arrastró desde la paleta Datos; por ejemplo, cada uno de los elementos de una colección de objetos ProductPhoto. Ahora puede enlazar a cualquier parte de la estructura de datos y definir así la apariencia del árbol de elementos de la plantilla de datos. Junto a cada elemento de datos hay una lista desplegable que determina el elemento que debe usarse para presentar el campo de datos (elementos StackPanel y TextBlock). Al lado hay una etiqueta que indica con qué propiedades del elemento se enlazará el elemento de datos.  
  18. Desactive LargePhoto porque sólo desea mostrarlo en ListBox.
  19. El campo de datos ModifiedDate es del tipo StackPanel y necesita cambiar el control por otro tipo de elemento que sea más adecuado para mostrar este tipo de datos. En la lista desplegable junto a ModifiedDate, elija TextBlock y observe que la etiqueta cambia automáticamente a Text.
  20. El campo de datos ThumbNailPhoto es del tipo ImageSource y necesita cambiar el control por otro tipo de elemento que sea más adecuado para mostrar este tipo de datos. En la lista desplegable junto a ThumbNailPhoto, elija Image y observe que la etiqueta cambia automáticamente a Source.
  21. Haga clic en Aceptar.
    Se ha insertado un nuevo ListBox en el documento.
    Sugerencia

    Una plantilla de datos es un recurso. Para editar la plantilla de datos ProductPhotosTemplate una vez creada, expanda el nodo Window1.xaml en el panel Recursos, expanda Window y, a continuación, haga clic en el botón situado junto a ProductPhotosTemplate.

  22. Con el elemento [ListBox] seleccionado en Objetos y escala de tiempo en el panel Interacción, establezca las siguientes propiedades en Diseño en el panel Propiedades:
    • Establezca las propiedades Width y Height en Auto.
    • Establezca la propiedad Margin en 8.
    • Establezca las propiedades HorizontalAlignment y VerticalAlignment en Center.
    Esta configuración garantiza que ListBox llene casi por completo la celda inferior izquierda de la cuadrícula.
  23. En el Cuadro de herramientas, seleccione el control Image Control Image.
    Sugerencia Si el control Image no se ve en el Cuadro de herramientas, puede buscarlo haciendo clic en el botón Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de esta galería, su icono aparecerá en el Cuadro de herramientas por encima del botón Panel biblioteca.
  24. En el área de diseño, dibuje un nuevo control Image en la celda inferior derecha de la cuadrícula que llene casi por completo la celda.
  25. Con [Image] seleccionado en Objetos y escala de tiempo, vaya a Propiedades comunes en el panel Propiedades. Haga clic en el nombre de la propiedad Source y, a continuación, en la lista desplegable que aparece, seleccione Enlace de datos.
    Se abrirá el cuadro de diálogo Crear enlace de datos.
  26. Seleccione la ficha Propiedad del elemento, ya que va a enlazar a una propiedad del elemento [ListBox].
  27. En Elementos de la escena, expanda Window y LayoutRoot y, a continuación, seleccione el ListBox ([System.Windows.Controls.ListBox]).
  28. En la lista desplegable Mostrar, seleccione Todas las propiedades.
    De esta manera, se muestran todas las propiedades disponibles para crear enlaces, no sólo aquéllas que sean del mismo tipo de datos que la propiedad Source (cadena).
  29. En Propiedades, seleccione SelectedItem : (Object).
  30. Active la casilla de verificación Usar una expresión de trazado personalizada. La expresión es actualmente SelectedItem. Cámbiela por SelectedItem.LargePhoto para enlazar al miembro LargePhoto del objeto ProductPhoto seleccionado actualmente. Haga clic en Finalizar.
  31. En el menú Proyecto, haga clic en Probar Proyecto (o presione F5). Cuando la aplicación se inicie, compruébela haciendo clic en Get Product Photos. Cuando el cuadro de lista se cargue con datos, examine sus elementos y compruebe la foto grande que aparece en la columna derecha.

Aplicación finalizada

Aplicación finalizada