如何在 flipview 中显示 LocalFolder 图像（通用 Windows 开发）

Question

下面 xaml 的一部分。 App Throws/Raises 没有任何错误。应用程序还会生成准确的幻灯片计数。但只有灰色的空白区域。它滑动；但区域是空的。

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

和代码隐藏

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

首先，上面的代码获取了访问文件的完整文件系统路径属性，不推荐这样做。您可以使用 StoragFile relative APIs. Details please reference Skip the path: stick to the StorageFile. QueryOptions 可根据您的情况进行过滤。

其次，为 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).

提供完整的文件系统路径值

最后，绑定方式不正确，您将整个集合绑定到 UriSource 属性，实际上它需要集合的一个 Uri 值。

所以更新后的完整代码片段如下：

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

后面的代码：

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

类似的解决方案。我在某处读到 {x:binding} 比 {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; 
        }
    }
}

页数

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

}

在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>

并在 xaml

之上

   xmlns:models="using:Project1.Models"

如何在 flipview 中显示 LocalFolder 图像（通用 Windows 开发）

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

image

getfiles

flipview

uwp-xaml