我无法在 UWP GridView 中显示图像

Question

我正在开发 UWP 桌面书籍应用程序，但无法在 GridView 中显示书籍封面图像。问题：

GridView 是最好的控件还是我应该使用 ListView？

下面是我正在使用的 XAML 和代码隐藏。如果你能告诉我哪里出了问题，我真的很感激。

          <GridView Name="gdvLibrary" Grid.Column="0" Grid.Row="2" Margin="10,0,20,3" Width="auto" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Top" >
                     <GridView.ItemTemplate>
                         <DataTemplate x:Name="ImageTextDataTemplate" x:DataType="local:Book">
                             <StackPanel Height="280" Width="180" Margin="12" >
                                 <Image Source="{x:Bind Cover.Source}" Height="180" Width="180" Stretch="UniformToFill"/>
                                 <StackPanel Margin="0,12">
                                     <TextBlock Text="{x:Bind Title}"/>
                                     <TextBlock Text="{x:Bind Author}" Style="{ThemeResource CaptionTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
                                 </StackPanel>
                             </StackPanel>
                         </DataTemplate>
                     </GridView.ItemTemplate>
                     <GridView.ItemsPanel>
                         <ItemsPanelTemplate>
                             <ItemsWrapGrid MaximumRowsOrColumns="10" Orientation="Horizontal"/>
                         </ItemsPanelTemplate>
                     </GridView.ItemsPanel>
             </GridView>


     // Set the path to the app's books folder.
     string path = @"D:\_BOOKS";
     Image img = new Image();

     // Get the folder object that corresponds to this absolute path in the file system.
     StorageFolder folder = await StorageFolder.GetFolderFromPathAsync(path);

     if (folder != null)
     {
         foreach (StorageFolder sf in await folder.GetFoldersAsync(Windows.Storage.Search.CommonFolderQuery.DefaultQuery))
         {
             img.Source = new BitmapImage(new Uri(sf.Path + @"\cover.jpg"));

             string strAuthor = sf.DisplayName.Split(" - ")[0];
             string strTitle = sf.DisplayName.Split(" - ")[1];

             WCRVariables.Books.Add(new Book
             {
                 Cover = img, 
                 Title = strTitle,
                 Author = strAuthor,
                 Percentage = 0,
             });
         }

         this.gdvLibrary.ItemsSource = WCRVariables.Books;

     }

Answer 1

我建议您使用 GridView 控件，因为 GridView 更适合以图像为焦点的项目。此外，要绑定Image.Source 属性，您需要像下面这样构造一个BitmapImage实例。

Xaml代码：

 <Image Source="{x:Bind Bitmap}" Height="180" Width="180" Stretch="UniformToFill"/>

后面的代码：

public sealed partial class MainPage : Page
    {
        public ObservableCollection<Book> books { get; set; }
        public MainPage()
        {
            this.InitializeComponent();
            books = new ObservableCollection<Book>
            {
               
                 new Book(){Title="English",Bitmap=new BitmapImage(new Uri("ms-appx:///Assets/1.JPG"))},
                 new Book(){Title="Math",Bitmap=new BitmapImage(new Uri("ms-appx:///Assets/2.JPG"))}
            };
            gdvLibrary.ItemsSource = books;
        }
    }

    public class Book
    {
        public string Title { get; set; }
        public BitmapImage Bitmap { get; set; }
      
    }

更新：

如果你的图像文件位于用户文件夹中，你可以使用Storage Api 获取StorageFile 对象，然后使用StorageFile.OpenAsync 方法获取流，最后将此流设置为源图像。请参考以下代码。

BitmapImage Bitmap= new BitmapImage();
var storageFile = await StorageFile.GetFileFromPathAsync(path);
using (IRandomAccessStream stream = await storageFile.OpenAsync(FileAccessMode.Read))
{
    await Bitmap.SetSourceAsync(stream);
}
img.Source= Bitmap;

请注意，您需要在 Package.appxmanifest 中声明 broadFileSystemAccess 功能，如下所示。此外，您需要在 Settings 应用程序中授予此 uwp 应用程序的权限，访问权限可在 Settings > Privacy > 文件系统.

<Package
  ...
  xmlns:rescap="http://schemas.microsoft.com/appx/manifest/foundation/windows10/restrictedcapabilities"
  IgnorableNamespaces="uap mp rescap">
...
<Capabilities>
    <rescap:Capability Name="broadFileSystemAccess" />
</Capabilities>

我无法在 UWP GridView 中显示图像

I cannot display images in a UWP GridView

c#

data-binding

gridview

uwp

uwp-xaml