Windows 8. Selector de archivos (FilePicker).

FilePicker

En ocasiones desde nuestras aplicaciones Windows Store necesitaremos realizar acciones como:

  • Acceder a un archivo.
  • Guardar una localización.
  • Acceder a una carpeta.

En estas ocasiones vamos a integrar el contrato del selector de archivos (FilePicker). A través del selector de archivos, nuestras aplicaciones puede obtener acceso a archivos y carpetas del sistema.

Una vez que el usuario selecciona archivos o carpetas, la aplicación recibe estas selecciones como objetos StorageFile y StorageFolder.

Package.Appxmanifest

Como siempre solemos hacer vamos a realizar un ejemplo lo más simple posible pero que nos sea válido para lograr nuestros objetivos. La plantilla selecciona para realizar el ejemplo lo más simple posible será “Blank Application”:

Blank Application

Al igual que en el resto de contratos que nos permiten interactuar con el sistema, es necesario modificar el archivo package.appxmanifest. Comenzamos por ello:

Package.Appxmanifest

Package.Appxmanifest

Dado que en nuestro ejemplo vamos a abrir (leer) archivos como guardarlos, añadimos ambas declaraciones en el archivo de manifiesto.

Manos a la obra

Comenzamos creando la interfaz de usuario de nuestra aplicación. Deseamos probar las posibilidades del contrato del selector de archivos. Vamos a crear cuatro botones que nos permitirán:

  • Seleccionar un archivo.
  • Seleccionar múltiples archivos.
  • Seleccionar una carpeta.
  • Guardar un fichero.
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
          <Button x:Name="btnSelectSingleFile" Width="300" Height="150" Content="Seleccionar archivo"/>
          <Button x:Name="btnSelectMultipleFile" Width="300" Height="150" Content="Seleccionar múltiples archivos"/>
          <Button x:Name="btnSelectFolder" Width="300" Height="150" Content="Seleccionar una carpeta"/>
          <Button x:Name="btnSaveFile" Width="300" Height="150" Content="Guardar un archivo"/>
     </StackPanel>
</Grid>

Añadimos los eventos Click de cada botón:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
     <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
          <Button x:Name="btnSelectSingleFile" Width="300" Height="150" Content="Seleccionar archivo" Click="btnSelectSingleFile_Click"/>
          <Button x:Name="btnSelectMultipleFile" Width="300" Height="150" Content="Seleccionar múltiples archivos" Click="btnSelectMultipleFile_Click"/>
          <Button x:Name="btnSelectFolder" Width="300" Height="150" Content="Seleccionar una carpeta" Click="btnSelectFolder_Click"/>
          <Button x:Name="btnSaveFile" Width="300" Height="150" Content="Guardar un archivo" Click="btnSaveFile_Click"/>
     </StackPanel>
</Grid>

En el code-behind:

private void btnSelectSingleFile_Click(object sender, RoutedEventArgs e)
{

}

private void btnSelectMultipleFile_Click(object sender, RoutedEventArgs e)
{

}

private void btnSelectFolder_Click(object sender, RoutedEventArgs e)
{

}

private void btnSaveFile_Click(object sender, RoutedEventArgs e)
{

}

Si compilamos veremos el siguiente resultado:

FilePicker 1

Obtener un fichero

Comenzamos por el caso más simple, seleccionar un archivo del disco duro del usuario. Nos centramos en el evento Click del primero botón. Creamos un objeto de tipo FileOpenPicker. Este objeto será el encargado de abrir el selector de archivos que se mostrará al usuario donde podrá seleccionar un archivo que podrá retornar a nuestra aplicación.

Tenemos que indicar el tipo de ficheros a abrir mediante fileTypeFilter. Este punto es obligatorio, no estamos autorizados a ignorar el filtro o establecer un comodín (*). Debemos establecer al menos un tipo de filtro.

Por último, recordar que el objetivo es conseguir un archivo. Una vez que el usuario seleccione un archivo se devolverá a nuestra aplicación el archivo como un StorageFile:

private async void btnSelectSingleFile_Click(object sender, RoutedEventArgs e)
{
     FileOpenPicker picker = new FileOpenPicker();
     picker.FileTypeFilter.Add(".png");
     StorageFile file = await picker.PickSingleFileAsync();
}

Para obtener un archivo llamaremos al método asíncrono PickSingleFileAsync.

La interfaz que visualizará el usuario será la siguiente:

FilePicker 2

Obtener Múltiples ficheros

En ocasiones necesitaremos obtener más de un archivo. En esta ocasión utilizaremos el método pickMultipleFilesAsync() del objeto FileOpenPicker:

private async void btnSelectMultipleFile_Click(object sender, RoutedEventArgs e)
{
     FileOpenPicker picker = new FileOpenPicker();
     picker.FileTypeFilter.Add(".png");
     picker.FileTypeFilter.Add(".jpg");

     picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
     picker.ViewMode = PickerViewMode.Thumbnail;
     IReadOnlyList<StorageFile> files = await picker.PickMultipleFilesAsync();
}

Pocas diferencias con respecto al ejemplo anterior. El único cambio significativo es que una vez que el usuario selecciona los ficheros elegidos, en nuestra aplicación obtendremos una colección de objetos StorageFile.

FilePicker 3

Seleccionar una carpeta

Una opción interesante y muy común a realizar en nuestras aplicaciones es la selección de una carpeta en lugar de un fichero. Permitir al usuario elegir una ubicación para utilizar en el futuro o seleccionar el lugar donde se guardarán archivos son opciones donde nos interesará utilizar el contrato de selección de archivos para seleccionar una carpeta.

Una opción muy interesante que se nos ofrece es que una vez seleccionada una carpeta podemos guardarla como carpeta por defecto para nuestra aplicación. Se nos conceden derechos de lectura y escritura para dicha carpeta en el futuro sin solicitar permisos constantemente al usuario.

private async void btnSelectFolder_Click(object sender, RoutedEventArgs e)
{
     FolderPicker folderPicker = new FolderPicker();
     folderPicker.FileTypeFilter.Add(".png");
     StorageFolder folder = await folderPicker.PickSingleFolderAsync();
     if (folder != null)
     {
          StorageApplicationPermissions.FutureAccessList.AddOrReplace("DefaultFolder", folder);
     }
}

Como se puede observar en el código superior todo el código ya es familiar. Utilizamos un objeto de tipo FolderPicker. Si se devuelve una carpeta a nuestra aplicación podemos establecerla como carpeta por defecto mediante StorageApplicationPermissions.FutureAccessList. De esta manera, evitamos pedir constantemente permisos al usuario para realizar operaciones en dicha carpeta.

FilePicker 4

Guardar un fichero

En ocasiones nos interesará guardar un fichero en la máquina del usuario. Tenga en cuenta que podemos guardar el fichero en carpetas comunes del sistema. Si la aplicación se desinstala, el fichero puede permanecer e incluso puede llegar a ser utilizado por otras aplicaciones. Si se desea guardar un fichero en el almacenamiento asilado de la aplicación se debe utilizar otros métodos.

La gran diferencia con los casos anteriores donde seleccionabamos archivos será el objeto a utilizar. En lugar de utilizar un archivo FileOpenPicker, utilizaremos un objeto de tipo FileSavePicker:

private async void btnSaveFile_Click(object sender, RoutedEventArgs e)
{
     FileSavePicker savePicker = new FileSavePicker();
     savePicker.SuggestedStartLocation = PickerLocationId.Downloads;
     savePicker.FileTypeChoices.Add("Image", new List<string>() { ".png", ".jpg", ".bmp" });
     savePicker.SuggestedFileName = "Imagen";
     StorageFile file = await savePicker.PickSaveFileAsync();
}

De manera similar a cuando añadíamos filtros al objeto FileOpenPicker podemos añadir FileTypeChoices al objeto FileSavePicker que nos permiten indicar los diferentes formatos que el usuario puede elegir para guardar el fichero.
En nuestor ejemplo hemos añadido tipos imagen (png, jpg y bmp).

Hemos utilizado la propiedad SuggestedStartLocation para establecer una ruta inicial donde guardar el archivo.

La propiedad SuggestedFileName la utilizamos para sugerior al usuario un nombre para el archivo a guardar.

FilePicker 5

Puedes descargar el ejemplo realizado:

Hemos analizado lo fácil que es realizar múltiples acciones de interacción con archivos y carpetas de la máquina gracias al contrato de selector de archivos. Hemos aprendido como seleccionar un archivo, múltiples archivos, una carpeta o como guardar ficheros al disco duro del usuario. Recordar, cualquier duda o sugerencia será bienvenida en los comentarios de la entrada.

Más información

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s