Parte 4: Acceso a los archivos y selectores de archivos

Parte 4: Acceso a los archivos y selectores de archivos

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Importante  Este tutorial está diseñado para usarse con Microsoft Visual Studio 2013 y Windows 8.1. Algunas partes del tutorial no funcionarán correctamente con Microsoft Visual Studio 2012 y Windows 8.
 

En la parte 2 de esta serie de tutoriales, Administrar el ciclo de vida y el estado de tu aplicación, aprendiste unas cuantas cosas sobre los datos de la aplicación y los datos de la sesión, y sobre cómo guardar estos datos en el almacenamiento ApplicationData. De manera predeterminada, tu aplicación puede acceder a algunas ubicaciones del sistema de archivos, como las ubicaciones de los datos de la aplicación, el directorio de instalación de la aplicación y los elementos que crea en la carpeta Downloads.

Por el contrario, los datos de usuario, como las imágenes, vídeos y archivos de documentos, son independiente de tu aplicación y normalmente se almacenan en otras ubicaciones del sistema de archivos, como son las carpetas de la biblioteca del usuario. Para acceder a dichas ubicaciones, es necesario que tu aplicación declare funcionalidades para acceder a los datos mediante programación, o usar un selector de archivos para permitir al usuario abrir el archivo manualmente. Aquí, usas un selector de archivos para acceder a las Imágenes del usuario, así que no necesitas declarar ninguna funcionalidad de la aplicación. Para obtener más información sobre funcionalidades, consulta Declaraciones de funcionalidades de aplicación

En este tutorial, agregas funcionalidad al diseño de la página de fotos que creaste en la Parte 3: Navegación, diseño y vistas Primero, controlas el evento de clic del botón "Get photo" para que abra un selector de archivos y permita al usuario seleccionar una imagen de sus Imágenes. A continuación, enlazas los controles de la interfaz de usuario a las propiedades del archivo para mostrar la información de la imagen. Finalmente, repasamos lo que aprendiste en la parte 2 sobre cómo guardar el estado de las aplicaciones. Aquí, usas MostRecentlyUsedList para mantener el acceso a la imagen que ha seleccionado el usuario.

En este tutorial aprenderás a:

  • Usar FileOpenPicker para permitir al usuario obtener un archivo
  • Enlazar controles de la interfaz de usuario a datos
  • Usar MostRecentlyUsedList para acceder a un archivo abierto anteriormente

Antes de comenzar...

Paso 1: Usar un selector de archivos para obtener un archivo de imagen

A través del selector de archivos, la aplicación puede acceder a archivos y carpetas en cualquier parte del sistema del usuario. Cuando llamas al selector de archivos, el usuario puede examinar el sistema y seleccionar archivos (o carpetas) para acceder a ellos y guardarlos. Después de que el usuario selecciona archivos o carpetas, la aplicación recibe estas selecciones como objetos StorageFile y StorageFolder. La aplicación después puede actuar sobre las carpetas y los archivos seleccionados utilizando dichos objetos.

Lo primero que tienes que hacer es controlar el evento GetPhotoButton_Click para obtener una imagen que mostrar.

Empezamos con el código de la Parte 3: Navegación, diseño y vistas.

JJ655411.wedge(es-es,WIN.10).gifPara agregar un selector de archivos

  1. En el Explorador de soluciones, haz doble clic en PhotoPage.xaml para abrirlo.
  2. Selecciona el Button"Get photo" .
  3. En la Ventana de propiedades, haz clic en el botón de eventos (Botón de eventos).
  4. Busca el evento Click en la parte superior de la lista de eventos. En el cuadro de texto del evento, escribe "GetPhotoButton_Click" como el nombre del método que controla el evento Click.
  5. Presiona Entrar. El método de controlador de eventos se crea y se abre en un editor de código, de forma que puedes agregar código que se ejecutará cuando se produzca el evento.
  6. Agrega la palabra clave async a la firma del método del controlador de eventos.
    
    private async void GetPhotoButton_Click(object sender, RoutedEventArgs e)
    {
    }
    
    
  7. Agrega este código al método del controlador de eventos. El código abre un selector de archivos para permitir al usuario seleccionar una imagen de sus Imágenes. Cuando el usuario selecciona un archivo, se define como el origen de la imagen y el contexto de datos de la página.
    
                Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();
                openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
                openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
    
                // Filter to include a sample subset of file types.
                openPicker.FileTypeFilter.Clear();
                openPicker.FileTypeFilter.Add(".bmp");
                openPicker.FileTypeFilter.Add(".png");
                openPicker.FileTypeFilter.Add(".jpeg");
                openPicker.FileTypeFilter.Add(".jpg");
    
                // Open the file picker.
                Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
    
                // file is null if user cancels the file picker.
                if (file != null)
                {
                    // Open a stream for the selected file.
                    Windows.Storage.Streams.IRandomAccessStream fileStream =
                        await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    
                    // Set the image source to the selected bitmap.
                    Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
                        new Windows.UI.Xaml.Media.Imaging.BitmapImage();
    
                    bitmapImage.SetSource(fileStream);
                    displayImage.Source = bitmapImage;
                    this.DataContext = file;
                }
    
    
  8. Presiona F5 para compilar y ejecutar la aplicación. Navega a la página de fotos y haz clic en el botón "Get photo" para iniciar FileOpenPicker. Aparece la foto, pero el texto de información de la foto no está actualizada. Esto lo arreglaremos en el siguiente paso.

    Esta es la apariencia de la aplicación con una imagen seleccionada.

    Página de fotos con imagen

Analicemos el código para usar FileOpenPicker. Para usar un selector de archivos, debes crear y personalizar un objeto de selector de archivos y mostrar el selector de archivos para que el usuario pueda seleccionar un elemento.

Primero, crea un objeto FileOpenPicker.



Windows.Storage.Pickers.FileOpenPicker openPicker = new Windows.Storage.Pickers.FileOpenPicker();


Establece las propiedades en el objeto del selector de archivos que sean importantes para los usuarios y la aplicación. Para obtener directrices que te ayudan a decidir cómo personalizar el selector de archivos, consulta Directrices para selectores de archivos.

Como el usuario va a seleccionar una imagen, estableces SuggestedStartLocation en Imágenes y ViewMode en Thumbnail. También agregas filtros de tipos de archivo para que el selector solo muestre los tipos de archivo que especifiques para archivos de imagen.



openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
                 
// Filter to include a sample subset of file types.
openPicker.FileTypeFilter.Clear();
openPicker.FileTypeFilter.Add(".bmp");
openPicker.FileTypeFilter.Add(".png");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".jpg");


Después de crear y personalizar un selector de archivos, llama a FileOpenPicker.PickSingleFileAsync para mostrarlo y permitir al usuario seleccionar un archivo.

Nota  Para permitir al usuario seleccionar varios archivos, llama a PickMultipleFilesAsync.
 


// Open the file picker.
Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();


Cuando el usuario elige un archivo, PickSingleFileAsync devuelve un objeto StorageFile que representa el archivo seleccionado. Procesas la secuencia de imágenes para crear una BitmapImage y definir la BitmapImage como Source del control Image en la interfaz de usuario. Después también configuras el archivo como DataContext de la página para poder enlazar elementos de la interfaz de usuario a sus propiedades.



// file is null if user cancels the file picker.
if (file != null)
{
    // Open a stream for the selected file
    Windows.Storage.Streams.IRandomAccessStream fileStream =
        await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

    // Set the image source to the selected bitmap.
    Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
        new Windows.UI.Xaml.Media.Imaging.BitmapImage();

    bitmapImage.SetSource(fileStream);
    displayImage.Source = bitmapImage;
    this.DataContext = file;
}

Paso 2: Enlazar controles de la interfaz de usuario a datos del archivo

En este punto, la imagen aparece en la interfaz de usuario, pero las propiedades del archivo no se muestran en los bloques de texto que agregaste. Podrías establecer la propiedad Text de cada TextBlock en el código, de la misma forma que estableciste la propiedad Image.Source.

Pero para mostrar los datos, normalmente se usa el enlace de datos para conectar un origen de datos con la interfaz de usuario, ya sea estableciendo la propiedad Binding.Source o DataContext en el elemento de la interfaz de usuario. Cuando estableces un enlace y cambia el origen de datos, los elementos de la interfaz de usuario que están enlazados al origen de datos reflejan los cambios automáticamente.

Nota  De manera predeterminada, los enlaces son one-way, lo que significa que las actualizaciones en el origen de los datos se reflejan en la interfaz de usuario. Puedes especificar un enlace two-way de forma que los cambios que realice el usuario en un elemento de la interfaz de usuario se puedan ver reflejados en el origen de datos. Por ejemplo, si el usuario edita el valor de TextBox, el motor de enlace actualiza automáticamente el origen de datos subyacente para reflejar ese cambio.
 

La propiedad DataContext permite configurar el enlace predeterminado de un elemento completo de la interfaz de usuario, incluidos todos los elementos secundarios. Estableces el StorageFile seleccionado en FileOpenPicker como el DataContext de la página de fotos. Recuerda que, después de recuperar la imagen, estableces DataContext con esta línea de código.



this.DataContext = file;


Aquí muestras el nombre del archivo enlazando la propiedad Text del TextBlock de título a la propiedad StorageFile.DisplayName del archivo seleccionado.

Como no has especificado un enlace Source, el motor de enlace de datos busca la propiedad DisplayName en el DataContext. Si el DataContext es null o no tiene una propiedad DisplayName, el enlace genera una error de forma silenciosa y no se muestra ningún texto en TextBlock.

Aquí enlazas los controles de TextBlock a las propiedades de StorageFile.

JJ655411.wedge(es-es,WIN.10).gifEnlazar controles a datos

  1. En el Explorador de soluciones, haz doble clic en PhotoPage.xaml para abrirlo.
  2. Selecciona TextBlock para el nombre de foto que se encuentra debajo del botón "Get photo".
  3. En el panel Propiedades, haz clic en el botón Propiedades (Botón de eventos) para mostrar la vista Propiedades.
  4. En Común en el panel Propiedades, haz clic en el marcador de propiedad de la propiedad Text. Se abre el menú de propiedad.
    Nota  El marcador de propiedad es el símbolo de cuadro pequeño situado a la derecha de cada valor de propiedad. El marcador de propiedad Text de color negro indica que se ha establecido en un valor de cadena.
     
  5. En el menú de propiedad, selecciona Crear enlace de datos.... Se abrirá el cuadro de diálogo Crear enlace de datos.
  6. En el cuadro de diálogo Crear enlace de datos, selecciona Contexto de datos en la lista desplegable Tipo de enlace.
  7. Escribe "DisplayName" en el cuadro de texto Ruta de acceso tal como se muestra aquí.

    Cuadro de diálogo de enlace de datos de Visual Studio.

    Nota  El mensaje en el cuadro de diálogo Crear enlace de datos dice que no se ha establecido el contexto de datos. Eso es correcto porque estableces el contexto de datos en el código cuando ejecutas la aplicación y obtienes una imagen.
     
  8. Haz clic en Aceptar.

    He aquí el lenguaje de marcado de aplicaciones extensible (XAML) para el TextBlock después de agregar el enlace.

    
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="{Binding DisplayName}" 
               Style="{ThemeResource SubheaderTextBlockStyle}"/>
    
    
  9. Selecciona el TextBlock después de "Nombre de archivo:" TextBlock.
    1. Repite los pasos 3-5 para crear un enlace de datos para este TextBlock.
    2. Escribe "Nombre" en el cuadro de texto Ruta de acceso y haz clic en Aceptar.
  10. Selecciona el TextBlock después de "Ruta de acceso:" TextBlock.
    1. Repite los pasos 3-5 para crear un enlace de datos para este TextBlock.
    2. Escribe "Ruta de acceso" en el cuadro de texto Ruta de acceso y haz clic en Aceptar.
  11. Selecciona el TextBlock después de "Fecha de creación:" TextBlock.
    1. Repite los pasos 3-5 para crear un enlace de datos para este TextBlock.
    2. Escribe "DateCreated.Date" en el cuadro de texto Ruta de acceso y haz clic en Aceptar.

    Aquí está el XAML para la información de la foto StackPanel tras haber agregado los enlaces.

    
    
                    <StackPanel Margin="20,0,0,0">
                        <TextBlock TextWrapping="Wrap" Text="File name:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Name}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                        <TextBlock TextWrapping="Wrap" Text="Path:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding Path}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                        <TextBlock TextWrapping="Wrap" Text="Date created:" 
                                   Style="{ThemeResource CaptionTextBlockStyle}"/>
                        <TextBlock TextWrapping="Wrap" Text="{Binding DateCreated.Date}" 
                                   Style="{ThemeResource BodyTextBlockStyle}" Margin="10,0,0,30"/>
                    </StackPanel>
    
    
    
  12. Presiona F5 para compilar y ejecutar la aplicación. Navega a la página de fotos. Haz clic en el botón "Get photo" para iniciar FileOpenPicker. Con los enlaces configurados, ahora al seleccionar un archivo se muestran las propiedades del archivo.

    Esta es la apariencia de la aplicación con una imagen seleccionada y los bloques de texto enlazados a los datos.

    Página de fotos con una imagen y enlaces de datos

Paso 3: Guardar y cargar el estado

En la parte 2 de esta serie de tutoriales, Administrar el ciclo de vida y el estado de tu aplicación, aprendimos a guardar y restaurar el estado de las aplicaciones. Ahora que has agregado una nueva página a la aplicación, también debes guardar y cargar el estado de la nueva página. Para la página de fotos, solo necesitas guardar y restaurar el archivo de imágenes que se muestra actualmente.

Pero no puedes simplemente guardar la ruta de acceso al archivo y después volver a abrirlo usando esa ruta de acceso. Cuando un usuario selecciona un archivo con un FileOpenPicker, de forma implícita está dando a la aplicación permiso sobre ese archivo. Si más tarde intentas recuperar el archivo usando solo la ruta de acceso, se te denegará el permiso.

En vez de ello, para preservar el acceso al archivo para poder usarlo más adelante, la clase StorageApplicationPermissions proporciona 2 listas en las que puedes almacenar el archivo y los permisos que se otorgaron cuando el usuario lo abrió con el selector de archivos.

  • MostRecentlyUsedList - se usa para almacenar los últimos 25 archivos a los que se ha accedido.
  • FutureAccessList - se usa para el almacenamiento general de hasta 1000 archivos para un futuro acceso.
Solo necesitas acceder al último archivo que seleccionó el usuario para que puedas usarlo para restaurar el estado de la página. Para ello, MostRecentlyUsedList es más que suficiente.

Cuando un usuario selecciona un archivo, lo agregas a MostRecentlyUsedList. Cuando agregas un archivo a esta lista, MostRecentlyUsedList devuelve un token que usas para recuperar el archivo más adelante. Guardas este token en el diccionario pageState y lo usarás para recuperar el archivo de imagen actual cuando restaures el estado de página.

JJ655411.wedge(es-es,WIN.10).gifPara guardar el estado

  1. En el Explorador de soluciones, haz doble clic en PhotoPage.xaml.cs/vb para abrirlo.
  2. Agrega este código al comienzo de la clase PhotoPage. Esto declara una variable para contener el token devuelto por MostRecentlyUsedList.
    
    private string mruToken = null;
    
    

    Este es el código con su código circundante.

    
    
    public sealed partial class PhotoPage : Page
    {
        private string mruToken = null;
        private NavigationHelper navigationHelper;
    
        ...
    
    
  3. En el controlador de eventos GetPhotoButton_Click, agrega este código: Esto agrega el archivo seleccionado a MostRecentlyUsedList y obtiene el token.
    
    // Add picked file to MostRecentlyUsedList.
    mruToken = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file);
    
    

    Este es el código con su código circundante.

    
    
    // file is null if user cancels the file picker.
    if (file != null)
    {
        // Open a stream for the selected file.
        Windows.Storage.Streams.IRandomAccessStream fileStream =
            await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    
        // Set the image source to the selected bitmap.
        Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
            new Windows.UI.Xaml.Media.Imaging.BitmapImage();
    
        bitmapImage.SetSource(fileStream);
        displayImage.Source = bitmapImage;
        this.DataContext = file;
    
        // Add picked file to MostRecentlyUsedList.
        mruToken = Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.Add(file);
    }
    
    
    
  4. En el método navigationHelper_SaveState, agrega este código: Esto comprueba si existe el token y, si es así, lo guarda en el diccionario PageState.
    
                if (!string.IsNullOrEmpty(mruToken))
                {
                    e.PageState["mruToken"] = mruToken;
                }
    
    

    Este es el código completo para el método navigationHelper_SaveState.

    
    
    private void navigationHelper_SaveState(object sender, SaveStateEventArgs e)
    {
        if (!string.IsNullOrEmpty(mruToken))
        {
             e.PageState["mruToken"] = mruToken;
        }
    }
    
    

JJ655411.wedge(es-es,WIN.10).gifPara cargar el estado

  1. En PhotoPage.xaml.cs/vb, agrega la palabra clave async a la firma del método navigationHelper_LoadState.
    
    private async void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
    {
    }
    
    
  2. Agrega este código al método navigationHelper_LoadState.

    Aquí obtienes el token del diccionario PageState. Usas el token para recuperar el archivo de MostRecentlyUsedList y restaurar el estado de la interfaz de usuario.

    
                if (e.PageState != null && e.PageState.ContainsKey("mruToken"))
                {
                    object value = null;
                    if (e.PageState.TryGetValue("mruToken", out value))
                    {
                        if (value != null)
                        {
                            mruToken = value.ToString();
    
                            // Open the file via the token that you stored when adding this file into the MRU list.
                            Windows.Storage.StorageFile file =
                                await Windows.Storage.AccessCache.StorageApplicationPermissions.MostRecentlyUsedList.GetFileAsync(mruToken);
    
                            if (file != null)
                            {
                                // Open a stream for the selected file.
                                Windows.Storage.Streams.IRandomAccessStream fileStream =
                                    await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    
                                // Set the image source to a bitmap.
                                Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage =
                                    new Windows.UI.Xaml.Media.Imaging.BitmapImage();
    
                                bitmapImage.SetSource(fileStream);
                                displayImage.Source = bitmapImage;
    
                                // Set the data context for the page.
                                this.DataContext = file;
                            }
                        }
                    }
                }
    
    
  3. Presiona F5 para compilar y ejecutar la aplicación. Navega a la página de fotos y haz clic en el botón "Get photo" para iniciar FileOpenPicker y seleccionar un archivo. Ahora, cuando se suspende o termina una aplicación, al restaurarla se volverá a cargar la imagen.
    Nota  Revisa la Parte 2: Administrar el ciclo de vida y el estado de tu aplicación para obtener instrucciones sobre cómo, suspender, terminar y restaurar una aplicación.
     

Resumen

Enhorabuena, ¡ya has acabado con el cuarto tutorial! Has aprendido a usar selectores de archivo y enlaces de datos en una aplicación de la Tienda Windows.

Consultar el código

¿Te has quedado atascado o quieres revisar tu trabajo? De ser así, consulta Código completo de la parte 4.

 

 

Mostrar:
© 2017 Microsoft