Inténtelo: mostrar datos de una base de datos SQL de ejemplo

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

[!NOTA]

Para aplicaciones Microsoft Silverlight, vea Enlace de datos de Silverlight  en MSDN.

[!NOTA]

Para seguir los procedimientos de este tema en el orden en que aparecen, debe tener Microsoft Visual Studio 2010 y Microsoft SQL Server 2008 con la base de datos de ejemplo AdventureWorks instalada. Para más información acerca de cómo obtener la base de datos de ejemplo AdventureWorks, vea Instalar ejemplos y bases de datos de ejemplo AdventureWorks  en MSDN.

Si lo prefiere, puede crear un objeto 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 los mismos siempre que use un origen de datos de CLR (o Microsoft .NET Framework).

Para definir y rellenar un DataTable

El siguiente procedimiento describe cómo crear una biblioteca de clases en Visual Studio 2010 para rellenar una instancia de un DataTable con los datos de la base de datos de ejemplo AdventureWorks.

1. En el menú Archivo de Visual Studio 2010, elija Nuevo y haga clic en Proyecto.

2. En el cuadro de diálogo Nuevo proyecto, en Tipos de proyecto, haga clic en Visual C#. En Plantillas, haga clic en Biblioteca de clases. Asigne el nombre AWDataSource al proyecto nuevo 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 de Class1 a ProductPhotosCollection (este nombre es más descriptivo).

4. En 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.

5. En el cuadro de diálogo Agregar nuevo elemento, seleccione DataSet en la lista de plantillas, asigne el nombre ProductPhotos.xsd al elemento y, a continuación, haga clic en Agregar.

   Se agrega un conjunto de datos al proyecto en forma de un archivo de esquema y de archivos de clase compatibles. Además, el archivo de esquema se abre para su edición.

   [!NOTA]

   Un dataset es un objeto que contiene tablas de datos en las que se pueden guardar temporalmente datos en la memoria para ejecutar la aplicación. Para obtener más información, vea Información general sobre conjuntos de datos en Visual Studio  en MSDN.

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.

7. En el cuadro de diálogo Elegir origen de datos, el campo Origen de datos debe mostrar Microsoft SQL Server (SqlClient).

   Sugerencia:
   Si no va a usar una base de datos de SQL Server, 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 de SQL Server que no sea AdventureWorks, seleccione el nombre del servidor que tenga instalada esta base de datos de SQL Server.

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 con correctas y la base de datos AdventureWorks está instalada en el equipo que ejecuta SQL Server.

11. Haga clic en el botón Probar conexión. Si la conexión de prueba no se realiza correctamente, consulte al administrador de SQL Server para obtener ayuda.

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, donde <servername> es el nombre del servidor.

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 Exploradorde servidores**** hasta la superficie de diseño. Ahora tiene un conjunto de datos que puede 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 el ProductPhotos DataSet . Ahora tiene un método que rellenará con datos una instancia de un ProductPhotos DataTable al ejecutar la aplicación.

15. Genere el proyecto (CTRL+MAÝUS+B) para asegurarse de que no contiene errores.

Para adaptar la recolección de datos a una colección WPF

El siguiente procedimiento describe cómo crear una biblioteca de clases en Visual Studio 2010 para convertir datos de DataTable en ObservableCollection , de modo que Expression Blend (o cualquier aplicación que use Windows Presentation Foundation (WPF)) pueda enlazarse 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 (un método get ) para que el código externo a la clase pueda obtener acceso.

Sugerencia:
Si ha seguido el procedimiento anterior de este tema, ahora tendrá una instancia de DataTable 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, puede adaptar 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 2010, 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, haga clic en la ficha Examinar y busque el ensamblado WindowsBase.dll en la carpeta %SystemDrive%\Archivos de programa\Reference Assemblies\Microsoft\Framework\v3.0.

2. Haga clic en Aceptar. El ensamblado WindowsBase implementa la clase System.Collections.Object.ObservableCollection .

3. En la parte superior del archivo Class1.cs, agregue la siguiente instrucción:

   using System.Collections.ObjectModel;
   

4. En el archivo Class1.cs, agregue además la siguiente definición de clase ProductPhoto al espacio de nombres AWDataSource, de manera que tenga una clase con la que trabajar:

   public class ProductPhoto { }
   

5. Agregue el siguiente miembro a la clase ProductPhotosCollection:

   private ObservableCollection<ProductPhoto> productPhotos =
       new ObservableCollection<ProductPhoto>();
   

6. Agregue el siguiente método de descriptor de acceso a la clase ProductPhotosCollection:

   public ObservableCollection<ProductPhoto> ProductPhotos
   { get { return this.productPhotos; } }
   

   Los siguientes pasos implican copiar el identificador, la fecha modificada y las dos fotografías de DataTable a ObservableCollection .

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 el método 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 , puede implementar un Command .

11. En el menú Archivo, haga clic en Nuevo elemento. En el cuadro Nuevo elemento, haga clic en Clase. En el cuadro Nombre, escriba DelegateCommand.cs .

12. En la nueva página, presione CTRL+A para seleccionar todo el contenido y, a continuación, presione SUPR. Copie y pegue el código siguiente en la página que acaba de crear.

    namespace AWDataSource
    {
        using System;
        using System.Windows.Input;
    
        ///
        /// DelegateCommand is a simplified version of ICommand in WPF. You can wrap one of these around any method,
        /// and thus bind any command on any WPF object to your method.
        ///
        /// DelegateCommand also supports an IsEnabled property that you can use to turn the command on and off.
        ///
        public sealed class DelegateCommand : ICommand
        {
            // Type signature of the method that DelegateCommand works with - returns void, no arguments.
            public delegate void SimpleEventHandler();
    
            // Remember the method so that it can be called at the right time.
            private SimpleEventHandler handler;
    
            // Maintain the enabled state.
            private bool isEnabled = true;
    
            // Simple constructor: Pass in the method that needs to be called when the command executes.
            public DelegateCommand(SimpleEventHandler handler)
            {
    this.handler = handler;
            }
    
            #region ICommand implementation
    
            // Executing the command is as simple as calling the method.
            void ICommand.Execute(object arg)
            {
     this.handler();
            }
    
            // Saying whether the command can be executed.
    ICommand.CanExecute(object arg)
            {
                return this.IsEnabled;
            }
    
            // This is the event that the command architecture of WPF listens to so it knows when to update
            // the UI on command enable/disable.
            public event EventHandler CanExecuteChanged;
            #endregion
    
            // Public visibility of the isEnabled flag - note that when it is set, the event must be raised
            // so that WPF knows to update any UI that uses this command.
            public bool IsEnabled
            {
                get { return this.isEnabled; }
                set
                {
    this.isEnabled = value;
     this.OnCanExecuteChanged();
                }
            }
    
            // Simple event propagation that makes sure that someone is listening to the event before raising it.
            private void OnCanExecuteChanged()
            {
                if (this.CanExecuteChanged != null)
                {
     this.CanExecuteChanged(this, EventArgs.Empty);
                }
            }
        }
    }
    

    En el menú Archivo, haga clic en Guardar.

    El código del archivo DelegateCommand.cs permite enlazar cualquier comando al método.

13. En el archivo Class1.cs, agregue el siguiente miembro a la clase ProductPhotosCollection:

    private DelegateCommand getDataCommand;
    

14. Agregue el siguiente constructor a la clase ProductPhotosCollection para inicializar el comando:

    public ProductPhotosCollection()
        {
            getDataCommand = new DelegateCommand(delegate() { GetData(); });
        }
    

15. 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; } }
    

16. Genere el proyecto (F5) para asegurarse de que no contiene errores. Ahora tiene una clase que se puede usar como un origen de datos en una aplicación Expression Blend (o WPF). Esta clase será ProductPhotosCollection u otra equivalente si ha definido su propia clase.

Para enlazar procedimientos al origen de datos en Expression Blend

En el siguiente procedimiento se describe cómo crear una aplicación 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 lista/detalles . El panel izquierdo, denominado recuadro de lista , contendrá la lista de productos. Cada vez que seleccione un producto en este recuadro, los detalles de dicho producto se mostrarán en el recuadro derecho, denominado recuadro de detalles . Para que el contenido de un panel se actualice al seleccionar un objeto 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.

2. En el cuadro de diálogo Nuevo proyecto, seleccione el tipo de proyecto Aplicación WPF. De este modo, se crea un proyecto para una aplicación basada en Windows que puede generar y ejecutar mientras la diseña. La otra opción es un proyecto Biblioteca de controles WPF, que se puede usar para diseñar controles para su uso en otras aplicaciones basadas en Windows.

3. En el cuadro de texto Nombre, escriba AWProductPhotos . Deje Lenguaje establecido en el valor predeterminado, ya que este procedimiento no tiene ningún código manuscrito.

4. Haga clic en Aceptar. Expression Blend carga el proyecto nuevo y lo muestra para su edición.

   Sugerencia:
   Si ya tenía un proyecto abierto, puede que se muestre un cuadro de diálogo en el que se le preguntará si desea guardar o descartar el proyecto actual antes de abrir el nuevo.

5. Una vez cargado el proyecto nuevo en la memoria, haga clic en Guardar todo en el menú Archivo para guardarlo en disco. El cuadro de texto Nombre debería incluir ya el nombre AWProductPhotos, así que haga clic en Aceptar.

   Precaución:
   Mientras trabaja en Expression Blend, los cambios que realice no se guardan automáticamente en el disco duro, así que debe asegurarse de guardar los archivos manualmente desde el primer momento y con frecuencia. Para obtener más información, vea Administrar soluciones, proyectos y archivos.

6. En el menú Proyecto, haga clic en Agregar referencia.

7. En el cuadro de diálogo Agregar referencia, busque el archivo AWDataSource.dll que generó al final de la segunda tarea de este tema para agregarle una referencia. El archivo AWDataSource.dll estará probablemente en la carpeta bin/Debug del proyecto AWDataSource.

8. Haga clic en Aceptar. El archivo AWDataSource.dll forma ahora parte del proyecto. Si expande el nodo Referencias en el panel Proyectos, verá una referencia a AWDataSource.dll.

9. En el panel Datos, haga clic en Crear origen de datos  y, a continuación, haga clic en Crear origen de datos de objeto.

10. En el cuadro de diálogo Crear origen de datos de objeto, expanda el nodo AWDataSource, seleccione ProductPhotosCollection y, a continuación, haga clic en Aceptar.

    En el panel Datos, se ha agregado al proyecto un origen de datos denominado 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 a la mesa de trabajo desde el panel Datos para crear controles nuevos.

11. En el panel Objetos y escala de tiempo, haga clic en LayoutRoot para activarlo. Cuando se active el objeto, observe que aparece un rectángulo de selección sombreado alrededor de su nombre.

    Sugerencia:

    Si desea agregar objetos secundarios a un objeto o realizar otras operaciones especiales, haga doble clic en el objeto primario en el panel Objetos y escala de tiempo y, a continuación, agregue el objeto secundario. Esta acción se denomina activación . El objeto activado se identifica mediante un rectángulo de selección sombreado alrededor del nombre del objeto. Si desea cambiar las propiedades de un objeto, haga clic en el nombre del objeto en el panel Objetos y escala de tiempo. Esta acción se denomina selección . El objeto seleccionado se identifica mediante un color de fondo resaltado. Puede seleccionar un objeto sin activarlo.

12. En el panel Herramientas, haga clic en Selección . En la mesa de trabajo, mueva el puntero sobre el área de regla gruesa de la parte superior de LayoutRoot . Una regla de columna sigue al puntero e indica el lugar en que se colocará un divisor de columna nuevo al hacer clic.

13. 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 miniaturas de las fotos del producto, y la columna derecha contendrá una foto grande que representa el elemento seleccionado de la lista. Un divisor de columna aparece dentro de LayoutRoot .

    Sugerencia:
    Para poder ver todo el objeto LayoutRoot en la mesa de trabajo, es posible que necesite alejarse. Para ello, escriba un valor de zoom en el cuadro de texto de la parte inferior de la mesa de trabajo , haga clic en la flecha situada junto al valor de zoom o gire la rueda del mouse mientras mantiene presionada la tecla CTRL.

14. En la mesa de trabajo, desplace el puntero sobre el área de regla 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:

    Para ver los resultados de la acción descrita en el paso anterior, haga clic con el botón secundario en LayoutRoot en el panel Objetos y escala de tiempo y haga clic en Ver XAML (para ver el lenguaje de marcado de aplicaciones extensible o XAML). De esta manera, la mesa de trabajo cambia a la vista XAML con el código de LayoutRoot resaltado. Para verlo mejor, en el menú Ventana, haga clic en Ocultar paneles (presione F4 o TAB). Se han agregado las secciones <Grid.ColumnDefinitions> y <Grid.RowDefinitions> al objeto <Grid> que representa LayoutRoot . Los atributos Width y Height usan la variación de tamaño proporcional , en la que los tamaños de las columnas son proporcionales entre sí. Por ejemplo, un Width de 2* genera una columna el doble de grande que una columna cuyo ancho esté establecido en *. La fila que se bloqueó no usa la variación de tamaño proporcional porque su alto es fijo. Cuando termine de examinar el código XAML, no olvide cambiar de nuevo a la vista Diseño y restaurar los paneles (presione F4 o TABULADOR).

15. En el panel Datos, arrastre GetDataCommand (desde ProductPhotosCollection) a la celda superior izquierda de la cuadrícula en la mesa de trabajo.

16. En el panel Herramientas, haga doble clic en Button para dibujar un botón en la mesa de trabajo. En la lista desplegable que aparece, haga clic en Button.

17. En el cuadro de diálogo Crear enlace de datos, en la lista desplegable Propiedad de, seleccione Command y, a continuación, haga clic en Aceptar. Esta acción crea un nuevo botón enlazado al método de descriptor de acceso GetDataCommand en la clase AWDataSource. Cuando se hace clic en el botón en tiempo de ejecución, GetDataCommand se ejecuta en el origen de datos ProductPhotosCollection y, al igual que en la segunda tarea de este tema, la implementación de dicho comando llama al método GetData .

    Sugerencia:

    Puede mover y cambiar el tamaño del nuevo botón en la mesa de trabajo; para ello, haga clic en la herramienta Selección en el panel Herramientas, seleccione el nuevo botón en la mesa de trabajo o en el panel Objetos y escala de tiempo y, a continuación, use los Adorners de la mesa de trabajo. Para obtener más información, vea Cambiar de posición o trasladar un objeto y Cambiar tamaño o escalar un objeto.

    Sugerencia:
    Puede obtener acceso a los enlaces de datos en el panel Propiedades. Para volver a abrir el cuadro de diálogo Crear enlace de datos una vez creado el enlace de datos, seleccione primero Button en el panel Objetos y escala de tiempo. A continuación, en Varios, en el panel Propiedades, haga clic en Opciones avanzadas , junto a la propiedad Command y, a continuación, haga clic en Enlace de datos.

18. Con [Button] seleccionado en el panel Objetos y escala de tiempo, busque la propiedad Content en Propiedadescomunes****, en el panel Propiedades. Establezca la propiedad Content ; para ello, escriba el texto Obtener productos fotográficos y, a continuación, presione ENTRAR.

19. Mueva el objeto [Button] y cambie su tamaño; para ello, haga clic en la herramienta Selección en el panel Herramientas y, a continuación, use los Adorners de la mesa de trabajo. 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 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.

20. En el panel Datos, arrastre ProductPhotos (Array) a la celda inferior izquierda de la cuadrícula en la mesa de trabajo.

21. En el cuadro de diálogo Crear enlace de datos, en la lista desplegable Propiedad de, seleccione ItemsSource y, a continuación, haga clic en Aceptar.

    Sugerencia:

    Una plantilla de datos es en esencia un árbol de objetos 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 objetos que incluye datos actualizados. Cada uno de los elementos que se muestran en el objeto ListBox es un objeto del tipo ProductPhoto que se implementó en la segunda tarea de este tema.

22. En el cuadro de diálogo Crear plantilla de datos, 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 el panel Datos; por ejemplo, cada uno de los objetos 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 objetos de la plantilla de datos. Junto a cada elemento de datos, hay una lista desplegable que determina el objeto que debe usarse para presentar el campo de datos (objetos StackPanel y TextBlock ). Al lado hay una etiqueta que indica las propiedades del objeto a las que se enlazará el elemento de datos.

23. Desactive la opción LargePhoto porque solo desea que se muestre en ListBox .

24. El campo de datos ModifiedDate es actualmente del tipo StackPanel , pero debe cambiar el control por otro tipo de objeto que sea más adecuado para mostrar ese tipo de datos. En la lista desplegable junto a ModifiedDate, seleccione TextBlock . La etiqueta cambia automáticamente a Text .

25. El campo de datos ThumbNailPhoto es actualmente del tipo ImageSource , pero debe cambiar el control por otro tipo de objeto que sea más adecuado para mostrar ese tipo de datos. En la lista desplegable junto a ThumbNailPhoto, seleccione Image . La etiqueta cambia automáticamente a Source .

26. Haga clic en Aceptar. Se insertará un nuevo ListBox en el documento.

    Sugerencia:
    Una plantilla de datos es un recurso. Para modificar la plantilla de datos ProductPhotosTemplate después de haberla creado, 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.

27. Con el objeto [ListBox] seleccionado en el panel Objetos y escala de tiempo, en la categoría Diseño del panel Propiedades, siga este procedimiento:

    • 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 asegura que ListBox rellenará casi por completo la celda inferior izquierda de la cuadrícula.

28. En el panel Herramientas, seleccione Image  .

    Sugerencia:
    Si no ve el control Image en el panel Herramientas, puede buscarlo haciendo clic en Activos . Una vez seleccionado un control de esta galería, su icono aparecerá en el panel Herramientas, debajo del botón Activos.

29. En la mesa de trabajo, dibuje un nuevo control Image en la celda inferior derecha de la cuadrícula que llene casi por completo la celda.

30. Con [Image] seleccionado en el panel Objetos y escala de tiempo, busque la propiedad Source en 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.

31. En el cuadro de diálogo Crear enlace de datos, seleccione la ficha Propiedad del elemento, ya que va a enlazar los datos a una propiedad del objeto [ListBox] .

32. En Elementos de la escena, expanda Window y LayoutRoot y, a continuación, seleccione el ListBox ( [System.WIndows.Controls.ListBox] ).

33. En la lista desplegable Mostrar, seleccione Todas las propiedades. De esta manera, se muestran todas las propiedades disponibles a las que se pueden crear enlaces y no solo las que son del mismo tipo de datos que la propiedad Source ( String ).

34. En Propiedades, seleccione SelectedItem : (Object) .

35. Active la casilla Usar una expresión de trazado personalizada. La expresión predeterminada es SelectedItem . Cámbielo a SelectedItem.LargePhoto para que se enlace al miembro LargePhoto del objeto ProductPhoto que está seleccionado.

36. Haga clic en Finalizar.

37. En el menú Proyecto, haga clic en Probar Proyecto (o presione F5). Cuando la aplicación se inicie, haga clic en Get Product Photos para probarla. 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

Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.