Home > OS >  UWP Displaying images in GridView with DataTemplate
UWP Displaying images in GridView with DataTemplate

Time:04-12

Context

I am attempting to display images from a directory inside the user's local pictures folder (e.g. C:\Users\Username\Pictures\The Folder) into a GridView.

I am using a class for the image (this is the source for the GridView):

public class SpotlightImage
    {
        public string ID { get; set; }

        public string Name { get; set; }

        public string FileSource { get; set; }
    }

The XAML for the GridView is below:

<GridView
            Padding="{StaticResource MediumLeftRightMargin}"
            animations:Connected.ListItemElementName="thumbnailImage"
            animations:Connected.ListItemKey="galleryAnimationKey"
            IsItemClickEnabled="True"
            ItemClick="ImagesGridView_ItemClick"
            ItemsSource="{x:Bind Source, Mode=OneWay}"
            RightTapped="ImagesGridView_RightTapped"
            SelectionMode="None">
            <GridView.ItemTemplate>
                <DataTemplate x:DataType="models:SpotlightImage">
                    <Image
                        x:Name="thumbnailImage"
                        AutomationProperties.Name="{x:Bind Name}"
                        Source="{x:Bind FileSource}"
                        Style="{StaticResource ThumbnailImageStyle}"
                        ToolTipService.ToolTip="{x:Bind Name}" />
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

The C# for populating the source is below (I realise that it is most likely unnecessary to use the parallel foreach, however, I am using it for consistency with other code in the project):

private async void ImagesPage_OnLoaded(object sender, RoutedEventArgs e)
        {
            Source.Clear();

            storageFiles = new List<Windows.Storage.StorageFile>();

            List<string> SavedWallpapers = await RetrieveAllSavedWallpapers.Main(); //Retrieves image names

            galleryData = new List<SpotlightImage>();

            Parallel.ForEach(SavedWallpapers, spotlightFile =>
            {
                imgFileFunction(spotlightFile);
            });

            async void imgFileFunction(string spotlightFile)
            {
                try
                {
                    //StorageReferences.WallpaperSaveStorage is a StorageFolder variable for the images directory being accessed
                    Windows.Storage.StorageFile file = await StorageReferences.WallpaperSaveStorage.GetFileAsync(spotlightFile);

                    storageFiles.Add(file);

                    var img = new SpotlightImage()
                    {
                        ID = file.DisplayName,
                        FileSource = file.Path,
                        Name = file.DisplayName
                    };

                    galleryData.Add(img);

                    await Windows.ApplicationModel.Core.CoreApplication.MainView.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,
                    () =>
                    {
                        Source.Add(img);

                        Debug.WriteLine("IMAGE ADDED: "   img.Name);
                    }
                    );
                }
                catch (Exception ex)
                {
                    Debug.WriteLine("MULTITHREADED ERROR: "   ex.Message);
                }
            }
        }

The Problem

The GridView displays empty squares instead of images. The correct number of 'images' appear, but they are blank.

What I've tried

I have looked at similar issues on StackOverflow and tried the following:

  1. Using a UriSource instead of source (The same issue persists)
  2. Looked at the code (I have used the exact same code somewhere else in my project and it works there. The only difference is that a different folder is being accessed)
  3. Checked permissions (I have used this exact directory in previous code with no issue)

Notes:

My UWP application already has full file system access (It was necessary for my application's purpose).

I have a FlipView which is accessing the same files and experiencing the exact same issue.

I already have the exact same code running perfectly fine elsewhere in my project, the only difference is the folder being accessed. This led me to believe that the issue was permissions, but my application has full filesystem access. So this shouldn't be the issue (?)

As you can probably tell, I am relatively new to UWP. So if there is some obvious permission issues or likewise, please go easy on me :)

CodePudding user response:

After hours of scouring the internet, I came across enter image description here

  • Related