Need help converting the pictures to be shown in the gridview

Question

I have issues to be fixed, so please, if you can guide me on how to do this, I would appreciate it:

First, my gridview: When it loads, I get the items like this [][][] and I would need them to be like this [] [] []. I have set the margin to 15, but it makes the items bigger instead of placing the space I need between them:

<Grid Background="White">
    <StackPanel  Margin="0,200,0,0">
        <GridView x:Name="AlGridView"
                  Foreground="#FF131212"
                  ItemsSource="{Binding}"
                  SelectionMode="Multiple">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Image Width="90"
                           Height="90"
                           Margin="15"
                           Source="{Binding}"
                           Stretch="UniformToFill" />
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </StackPanel>
    <Button Content="CONTINUE"
            HorizontalAlignment="Right"
            Margin="0,0,10,0"
            VerticalAlignment="Top"
            Foreground="#FFF70F63"
            BorderThickness="0"
            FontSize="18.14"
            Width="Auto" />
</Grid>

And second, I have my code which grabs images from the web, creates a folder in the phone, saves the pictures there. Then it accesses the folder, grabs all the images from that folder, puts them into a list... and I have made the DataContext of the GridView to be that list

If I run the solution I get the "boxes" in the gridview with nothing on them and an error saying

"Error: Converter failed to convert value of type 'Windows.Storage.StorageFile' to type 'ImageSource';"

So I guess I need to convert them but I don´t know how to, nor where should I look to see what should I do.

Here is the code:

public void QueryPicturesToShow()
{
    var pics = from medio in GlobalVariables.Medios
               where medio.img != null
               select new
               {
                   Name = medio.name,
                   Id = medio.id,
                   Picture = medio.img
               };
    foreach(var item in pics)
    {
        savePicToDisk(item.Picture, item.Name, item.Id);
    }
}

private async void savePicToDisk(string picAddress, string picName, string picId)
{
    StorageFolder folder = await KnownFolders.PicturesLibrary.CreateFolderAsync("carpetaFunciona", CreationCollisionOption.OpenIfExists);
    StorageFile file = await folder.CreateFileAsync((picName + picId + ".png"), CreationCollisionOption.ReplaceExisting);
    string url = GlobalVariables.apiUrl + picAddress;
    Debug.WriteLine(url);
    HttpClient client = new HttpClient();
    byte[] responseBytes = await client.GetByteArrayAsync(url);
    var stream = await file.OpenAsync(FileAccessMode.ReadWrite);
    using(var outputStream = stream.GetOutputStreamAt(0))
    {
        DataWriter writer = new DataWriter(outputStream);
        writer.WriteBytes(responseBytes);
        await writer.StoreAsync();
        await outputStream.FlushAsync();
    }
    showPicturesInGrid();
}

public async void showPicturesInGrid()
{
    var f1 = await KnownFolders.PicturesLibrary.GetFolderAsync("carpetaFunciona");
    Debug.WriteLine(f1);
    StorageFolder folder1 = f1;
    List<StorageFile> listOfFiles = new List<StorageFile>();
    await RetriveFilesInFolders(listOfFiles, folder1);
    Debug.WriteLine(listOfFiles.Count);
    foreach(var item in listOfFiles)
    { 
        // here I should make the converter, I guess
    }
    AlGridView.DataContext = listOfFiles;
}
private async Task RetriveFilesInFolders(List<StorageFile> list, StorageFolder parent)
{
    foreach(var item in await parent.GetFilesAsync())
        list.Add(item);
    foreach(var item in await parent.GetFoldersAsync())
        await RetriveFilesInFolders(list, item);
}

Answer 1

I have it done...

public async void showPicturesInGrid()
    {
        //Select folder
        StorageFolder folder1 = await KnownFolders.PicturesLibrary.GetFolderAsync("carpetaFunciona");
        //get all the pics in that folder
        List<IStorageItem> file = (await folder1.GetItemsAsync()).ToList();

        Debug.WriteLine(file.Count);

        if (file.Count > 0)
        {
            // if there are some pics, make a list to put them and a bitmap 
            // for each pic found, with its properties
            var images = new List<WriteableBitmap>();
            foreach (StorageFile f in file)
            {
                var name = f.Name;
                Debug.WriteLine(f.Name);

                ImageProperties properties = await f.Properties.GetImagePropertiesAsync();
                if (properties.Width > 0)
                {
                    var bitmap = new WriteableBitmap((int)properties.Width, (int)properties.Height);
                    Debug.WriteLine(bitmap.PixelWidth);
                    using (var stream = await f.OpenAsync(FileAccessMode.ReadWrite))
                    {
                        bitmap.SetSource(stream);
                    }
                    // add the bitmaps to the list
                    images.Add(bitmap);
                    Debug.WriteLine(images.Count);
                }
            }
            // Bind the list to the grid view
            AlGridView.DataContext = images;
        }
    }