CODEWITHSUNDEEP
c#gridviewuwpwindows-10windows-10-universal
berkb
berkb

Reputation: 612

Async Binding Thumbnail Image in UWP

I'm developing internal file manager in my UWP app. I'm showing StorageFolder's content in a GridView with calling this method:

gridView.ItemsSource = await storageFolder.GetItemsAsync();

Also, I have an item template for visualizing a file/folder item look linked to the the GridView. I have a Image object in this template. I want to bind StorageFolder's thumbnail image to this Image object's Source property. However, GetThumbnailAsync() is an asynchronous method, not a property. How can I do this?

Upvotes: 3

Views: 2624

Answers (1)

Grace Feng
Grace Feng

Reputation: 16652

Also, I have an item template for visualizing a file/folder item look linked to the the GridView. I have a Image object in this template. I want to bind StorageFolder's thumbnail image to this Image object's Source property.

I think you can firstly get the thumbnail then convert it to image, so can it be the source of Image control. I think what you need is like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <local:ThumbnailToImageConverter x:Key="cvt" />
    </Grid.Resources>
    <GridView x:Name="gridView">
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <Image Source="{Binding Thumbnail, Converter={StaticResource cvt}}" Stretch="None" />
                    <TextBlock Text="{Binding Name}" Margin="0,5" />
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

Code behind and class for binding model:

private ObservableCollection<Model> Collection = new ObservableCollection<Model>();

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    var files = await KnownFolders.PicturesLibrary.GetFilesAsync();
    foreach (var file in files)
    {
        var thumbnail = await file.GetThumbnailAsync(ThumbnailMode.PicturesView, 100);
        Collection.Add(new Model { Name = file.Name, Thumbnail = thumbnail });
    }
    gridView.ItemsSource = Collection;
}

public class Model
{
    public StorageItemThumbnail Thumbnail { get; set; }
    public string Name { get; set; }
}

Code of ThumbnailToImageConverter:

public class ThumbnailToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        BitmapImage image = null;

        if (value != null)
        {
            StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
            image = new BitmapImage();
            image.SetSource(thumbnail);
        }
        return (image);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Since I used PicturesLibrary in my code, we need to enable the <uap:Capability Name="picturesLibrary" /> in the manifest file when you test this code.

Upvotes: 3

Related Questions