我們可以用ListView.ItemTemplate設置用於顯示每個項目的DataTemplate，並把所有將圖像轉化爲ObservableCollection<BitmapImage>作爲ListView的ItemsSource。然後在DataTemplate中，我們可以使用Bind來設置Image.Source。以下是一個簡單的示例：
在XAML中，將DataTemplate設置爲{x:Bind}以顯示圖像。
<ListView ItemsSource="{x:Bind ImgList}">
<ListView.ItemTemplate>
<DataTemplate x:DataType="BitmapImage">
<Image Width="50"
Height="50"
Source="{x:Bind }"
Stretch="UniformToFill" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
ImgList在定義代碼後，它被定義爲ObservableCollection<BitmapImage>，所以DataTemplate的DataType是BitmapImage，正如我剛纔整個BitmapImage對象綁定到Image.Source所以這裏只使用Source="{x:Bind }"。
的隱藏代碼可能會喜歡以下內容：
public sealed partial class MainPage : Page
{
public ObservableCollection<BitmapImage> ImgList = new ObservableCollection<BitmapImage>();
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
showImage();
}
public async void showImage()
{
var query = GetAll();
foreach (var stuff in query)
{
string FileName = stuff.RecipeImage;
var file = await Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
var stream = await file.OpenReadAsync();
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
ImgList.Add(bitmapImage);
}
}
}
此外，我注意到，你所得到的圖像形成的圖片庫。如果這些圖像先前由您的應用程序存儲，那麼將它們存儲在應用程序數據中會更好，因爲這樣可以更輕鬆地綁定，並且在圖片庫中，用戶可以輕鬆刪除這些圖像。
要將圖像存儲在應用程序數據中，我們可以使用ApplicationData.Current.LocalFolder來檢索應用程序的本地數據文件夾。例如，複製選定的圖像到本地數據文件夾：
//This method copies selected image into local data folder and returns new file's name.
public async Task<string> CopySelectedImage()
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Clear();
openPicker.FileTypeFilter.Add(".bmp");
openPicker.FileTypeFilter.Add(".jpg");
openPicker.FileTypeFilter.Add(".jpeg");
openPicker.FileTypeFilter.Add(".png");
var file = await openPicker.PickSingleFileAsync();
if (file != null)
{
var localFolder = ApplicationData.Current.LocalFolder;
var newCopy = await file.CopyAsync(localFolder, file.Name, NameCollisionOption.GenerateUniqueName);
return newCopy.Name;
}
else
{
return null;
}
}
然後，我們可以使用類似以下內容檢索圖像並創建BitmapImage代碼：
var path = await CopySelectedImage();
var bitmapImage = new BitmapImage(new Uri($"ms-appdata:///local/{path}"));
更新：
我假設您的物品來源中有RecipeImage，那麼您可以將Image控件添加到您的DataTemplate中，並將RecipeImage綁定到我T的Source與ImageConverter類似以下內容：
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="4" Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" Text="{Binding RecipeName}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" Text="{Binding MealType}" />
</StackPanel>
<Image Width="50"
Height="50"
Source="{Binding RecipeImage,
Converter={StaticResource ImageConverter}}"
Stretch="UniformToFill" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
ImageConverter用於string轉換爲BitmapImage爲您RecipeImage被定義爲string但Image.Source需要BitmapImage。在Binding使用它之前，我們需要將其設置爲StaticResource首先：
<Page.Resources>
<local:ImageConverter x:Key="ImageConverter" />
</Page.Resources>
的ImageConverter代碼可能會喜歡：
public class ImageConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
string FileName = value as string;
var file = Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName).AsTask().Result;
var stream = file.OpenReadAsync().AsTask().Result;
var bitmapImage = new BitmapImage();
bitmapImage.SetSource(stream);
return bitmapImage;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
感謝您的回答，如何在列表視圖中顯示圖像，但是通過將itemsource添加到ImgList，它現在不會顯示列表中項目的名稱，因爲它綁定到數據庫，如 ，你有什麼想法我怎麼能一起展示？謝謝 –
myf33tsmell
@ myf33tsmell，你沒有必要使用'ImgList'，因爲你有一個項目源。你可以使用你的物品來源（假設它包含'RecipeImage'）和一個價值轉換器來與其他人一起展示圖像。我更新了我的答案，以說明如何做到這一點。希望能幫助到你。 –
它的工作，現在看起來很簡單，但非常感謝您的幫助 – myf33tsmell