How to display LocalFolder images in a flipview (Universal Windows Development)

Question

A portion of xaml below. App Throws/Raises no any error. also App generates exact slides count. but just getting gray empty areas. it slides; but areas are empty.

 <FlipView x:Name="flipView1"">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Image>
                     <Image.Source>
                        <BitmapImage UriSource="{Binding PicFiles}" />
                </Image.Source>
                </Image>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

and codebehind

public sealed partial class PresentationPage : Page
{

    public ObservableCollection<Uri> PicFiles;
    public PresentationPage()
    {
        this.InitializeComponent();
        PicFiles = new ObservableCollection<Uri>();
        GetPicFilesFromStorePath();
    }

    private void GetPicFilesFromStorePath()
    {
        var path = Windows.Storage.ApplicationData.Current.LocalFolder.Path;

        var a = Directory.GetFiles(path, "*.*").Where(x => x.EndsWith(".jpg"));

        foreach (var x in a)
        {
            PicFiles.Add(new Uri(x,UriKind.Absolute));
        }
        flipView1.ItemsSource = PicFiles;
    }

Answer 1

Firstly, the above code get the full file-system path property of the file for accessing, which is not recommended. You could use StoragFile relative APIs. Details please reference Skip the path: stick to the StorageFile. QueryOptions can be used for filtering in your situation.

Secondly, give full file-system path value to the UriSource property will not work. To access files stored in the app data, you should use Uri with the ms-appdata: scheme. Details you can reference How to load file resources (XAML).

Lastly, the binding is not in the correct way, you're binding the whole collection to the UriSource property, actually it requires one Uri value of the collection.

So the updated complete code snippet as follows:

<FlipView x:Name="flipView1" >
   <FlipView.ItemTemplate>
       <DataTemplate>
           <Image  >
               <Image.Source>
                   <BitmapImage UriSource="{Binding}" />
               </Image.Source>
           </Image>
       </DataTemplate>
   </FlipView.ItemTemplate>
</FlipView>

Code behind:

private async void GetPicFilesFromStorePath()
{
    //var path = Windows.Storage.ApplicationData.Current.LocalFolder.Path;

    //var a = Directory.GetFiles(Name, "*.*").Where(x => x.EndsWith(".jpg"));

    //foreach (var x in a)
    //{
    //    PicFiles.Add(new Uri((String.Format("ms-appdata:///local/{0}", x))));
    //}

    StorageFolder localfolder = Windows.Storage.ApplicationData.Current.LocalFolder;
    List<string> fileTypeFilter = new List<string>();
    fileTypeFilter.Add(".jpg");
    QueryOptions queryOptions = new QueryOptions(Windows.Storage.Search.CommonFileQuery.OrderByName, fileTypeFilter);
    StorageFileQueryResult queryResult = localfolder.CreateFileQueryWithOptions(queryOptions);
    var files = await queryResult.GetFilesAsync();
    foreach (StorageFile x in files)
    {
        PicFiles.Add(new Uri((String.Format("ms-appdata:///local/{0}", x.Name))));
    }
    flipView1.ItemsSource = PicFiles;
}

Answer 2

similar solution. Somewhere I read {x:binding} is faster than {Binding}

namespace Project1.Models
{
    public class PicFile
    {
        public Uri Img { get; set; }
    }

    public static class PicFileManager
    {
        private static readonly ObservableCollection<PicFile> PicFiles = new ObservableCollection<PicFile>();
        public static ObservableCollection<PicFile> GetPicFilesFromStorePath()
        {

            string path = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "Portaokul");

            var a = Directory.GetFiles(path, "*.*").Where(x => x.EndsWith(".jpg"));

            PicFiles.Clear();
            foreach (var x in a)
            {
                Uri uri_ = new Uri(
                   Path.Combine("ms-appdata:///local/Project1", Path.GetFileName(x)));

                PicFiles.Add(new PicFile { Img= uri_ });
            }
            return PicFiles; 
        }
    }
}

in Page

 public PresentationPage()
    {
        this.InitializeComponent();
        flipView1.ItemsSource = PicFileManager.GetPicFilesFromStorePath();

}

in xaml

 <FlipView x:Name="flipView1">
        <FlipView.ItemTemplate>
            <DataTemplate x:DataType="models:PicFile">
                <Image>
                    <Image.Source>
                        <BitmapImage UriSource="{x:Bind Img}"/>
                    </Image.Source>
                </Image>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

and on top of xaml

   xmlns:models="using:Project1.Models"