Seleccionar y desplegar imagen en aplicación de Windows 8

Tiempo atrás en un proyecto se me presentó la necesidad de permitirle al usuario seleccionar una imagen en una aplicación de Windows 8, después de buscar horas logré implementarlo y hoy quiero compartirles cómo lo realice, a continuación observamos un ejemplo de la aplicación como funciona

Bueno lo primero será agregar una imagen y un botón en nuestra interfaz

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Image x:Name="imgPreview" Grid.Row="0" Width="300" Height="300"/>

        <Button x:Name="btnChoose" Width="300" Height="300" Grid.Row="1" HorizontalAlignment="Center" Content="Seleccionar Imagen" Tapped="btnChoose_Tapped" />

    </Grid>

Como pueden observar es un Grid con dos filas, la imagen tiene su respectivo nombre, se ubica en la fila 1 y el botón tiene el evento Tapped definido para cuando el usuario seleccione ejecute una serie de código la cual le permitirá seleccionar la imagen.

En el evento Tapped vamos a agregar el siguiente código

            // representa un elemento GUI para poder seleccionar archivos
            FileOpenPicker opener = new FileOpenPicker();

            // indicamos una ruta para empezar a buscar en ella
            opener.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

            // se establecen las extensiones de los archivos que deseamos buscar
            opener.FileTypeFilter.Add(".jpg");
            opener.FileTypeFilter.Add(".jpeg");
            opener.FileTypeFilter.Add(".png");

            // representa un archivo , brinda información del archivo y su contenido además de que permite manipularlo
            StorageFile storageFile = await opener.PickSingleFileAsync();

            // se verifica si se ha seleccionado un archivo
            if (storageFile != null)
            {
                // abrimos el archivo en modo lectura
                var stream = await storageFile.OpenAsync(Windows.Storage.FileAccessMode.Read);

                
                BitmapImage bitmapImage = new BitmapImage();

                // se establece el recurso como imagen
                await bitmapImage.SetSourceAsync(stream);

                // establecemos la imagen seleccionada en el preview
                imgPreview.Source = bitmapImage;


            }

Y ahora si ejecutamos nuestra aplicación vamos a poder seleccionar una imagen y se desplegará en pantalla.

Si desean seleccionar más de una imagen entonces pueden utilizar el siguiente código, el cuál en lugar de llamar a PickSingleFileAsync() llama a PickMultipleFilesAsync() y almacena el resultado en una lista de SorageFile. En este ejemplo se establece la imagen de la primera posición como preview por lo que se accede directamente al elemento pero si ustedes necesitan iterar por cada item seleccionado pueden hacerlo con un foreach

IReadOnlyList<StorageFile> results = await opener.PickMultipleFilesAsync();

            // se verifica si se ha seleccionado un archivo
            if (results.Count > 0)
            {
         
                // abrimos el archivo de la primera posición en modo lectura
                var stream = await results.ElementAt(0).OpenAsync(Windows.Storage.FileAccessMode.Read);

                // con un foreach podemos recorrer cada item
                //foreach (StorageFile item in results)
                //{
                    
                //}


                BitmapImage bitmapImage = new BitmapImage();

                // se establece el recurso como imagen
                await bitmapImage.SetSourceAsync(stream);

                // establecemos la imagen seleccionada en el preview
                imgPreview.Source = bitmapImage;


            }

Bueno espero que les sea de ayuda, el código se puede encontrar en Github 🙂