Abrir y guardar archivos usando FilePicker en Windows 8

Una funcionalidad básica y que muchas aplicaciones utilizan es la interacción o necesidad de usar archivos dentro las mismas. En Windows 8 la clase que utilizas es FilePicker que pertenece a la API Windows.Storage.Pickers

Comienza por crear una nueva solución.

Ahora, ve con la interfaz, para hacer las cosas mas sencillas y rápidas, puedes copiar el XAML que sigue.

<Page x:Class="Abrir_Imagenes.BlankPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Abrir_Imagenes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
 
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Button x:Name="btnAbrirImagen" Content="Abrir imagen" HorizontalAlignment="Left" Height="58" Margin="10,10,0,0" VerticalAlignment="Top" Width="222" Click="btnAbrirImagen_Click"/>
<Button x:Name="btnVariasImagenes" Content="Abrir varias imágenes" HorizontalAlignment="Left" Height="58" Margin="10,73,0,0" VerticalAlignment="Top" Width="222" Click="btnVariasImagenes_Click"/>
<Button x:Name="btnGuardar" Content="Guardar archivo" HorizontalAlignment="Left" Height="58" Margin="10,136,0,0" VerticalAlignment="Top" Width="222" Click="btnGuardar_Click"/>
<Image x:Name="imgSeleccionada" HorizontalAlignment="Left" Height="290" Margin="10,234,0,0" VerticalAlignment="Top" Width="422"/>
<ItemsControl x:Name="contImagenes" HorizontalAlignment="Left" Height="748" Margin="437,10,0,0" VerticalAlignment="Top" Width="919"/>
 
</Grid>
</Page>

Simplemente se trata de tres botones, una imagen y un contenedor de tipo ItemsControl que te servirá para mostrar los resultados en un paso posterior.

Primero comienza por el botón para abrir una sola imagen. El código es el siguiente.

async void btnAbrirImagen_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
FileOpenPicker dialogoAbrir = new FileOpenPicker();
dialogoAbrir.ViewMode = PickerViewMode.Thumbnail;
dialogoAbrir.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
dialogoAbrir.FileTypeFilter.Add(".jpg");
dialogoAbrir.FileTypeFilter.Add(".jpeg");
StorageFile archivo = await dialogoAbrir.PickSingleFileAsync();
if (archivo != null)
{
var stream = await archivo.OpenAsync(FileAccessMode.Read);
BitmapImage imagenDevuelta = new BitmapImage();
imagenDevuelta.SetSource(stream);
imgSeleccionada.Source = imagenDevuelta;
}
}

Lo primero que debes notar es que el tipo de método es asíncrono, esto es de suma importancia para cualquier tipo de método que uses y consideres que va a utilizar llamadas asíncronas, después verás la configuración básica de la nueva clase llamada FileOpenPicker y que te servirá para abrir los archivos, por medio de dos enumeradores, podrás ajustar las propiedades para el tipo de vista que quieres de tus archivos y donde comenzar a buscar, a continuación asignarás el filtro (o filtros) del tipo de archivo que deseas obtener y ya al final, solo asignas el resultado del método asíncrono directamente a un objeto de tipo StorageFile (para esto es que es necesario que tu método sea asíncrono, ni privado, ni público, no querrás batallar con eso).

Con un condicional podrás asignar el valor devuelto a un objeto abstracto y ya pasar la información obtenida a un BitmapImage y para terminar, a la imagen que está en la interfaz. El resultado deberá quedar de la siguiente forma.

En el caso del segundo botón, el código es el siguiente.

async void btnVariasImagenes_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
FileOpenPicker dialogoAbrirMuchos = new FileOpenPicker();
dialogoAbrirMuchos.ViewMode = PickerViewMode.List;
dialogoAbrirMuchos.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
dialogoAbrirMuchos.FileTypeFilter.Add(".jpg");
dialogoAbrirMuchos.FileTypeFilter.Add(".jpeg");
IReadOnlyList&lt;StorageFile&gt; listaImagenes = await dialogoAbrirMuchos.PickMultipleFilesAsync();
if (listaImagenes.Count &gt; 0)
{
foreach (StorageFile elemento in listaImagenes)
{
Image nuevaImagen = new Image();
nuevaImagen.Width = 290;
nuevaImagen.Height = 422;
nuevaImagen.Margin = new Thickness(5);
var stream = await elemento.OpenAsync(FileAccessMode.Read);
BitmapImage imagenDevuelta = new BitmapImage();
imagenDevuelta.SetSource(stream);
nuevaImagen.Source = imagenDevuelta;
contImagenes.Items.Add(nuevaImagen);
}
}
}

Prácticamente todo es lo mismo, la única diferencia es el método asíncrono, en donde podrás obtener varios archivos, los cuales serán almacenados en una IReadOnlyList de tipo StorageFile y después por medio de un ciclo deberás asignar el valor de cada resultado a cada nueva imagen.

El resultado debe ser algo así.

Por último el código del tercer botón es el siguiente.

async void btnGuardar_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
FileSavePicker dialogoGuardar = new FileSavePicker();
dialogoGuardar.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
dialogoGuardar.FileTypeChoices.Add("Imagen JPG", new List&lt;string&gt;() { ".jpeg", ".jpg" });
dialogoGuardar.FileTypeChoices.Add("Imagen PNG", new List&lt;string&gt;() { ".png" });
dialogoGuardar.DefaultFileExtension = ".jpg";
dialogoGuardar.SuggestedFileName = "Nueva imagen";
StorageFile archivo = await dialogoGuardar.PickSaveFileAsync();
 
if (archivo != null)
{
//La acción ejecutada después de guardar.
//Aquí puedes obtener los datos del elemento recién guardado.
}
}

Aquí utilizas una clase de tipo FileSavePicker, ajustas sus propiedades de forma muy similar a la clase anterior y podrás ser capaz de abrir un cuadro de diálogo que te permitirá guardar un archivo del tipo que hayas especificado.

El resultado se ve en la parte inferior de tu aplicación.

Y así es como podrás utilizar estas dos nuevas funcionalidades en tus aplicaciones Metro.

Puedes descargar aquí el código.

Deja una respuesta Cancelar la respuesta