Question

以下代码可以将数据库中的图像添加到listview，但是我想使用Image Source将image属性绑定到XAML中的图片，而不是使用listview1.Items.Add。可以轻松修改此代码以执行此操作，还是必须以另一种方式进行此操作。希望这不是一个愚蠢的问题，我希望得到任何帮助。

public async void showImage()
    {
        var query = GetAll();

        foreach (var stuff in query)
        {
            string FileName;
            FileName = stuff.RecipeImage;
            var file = await
            Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
            var stream = await file.OpenReadAsync();
            var bitmapImage = new BitmapImage();
            bitmapImage.SetSource(stream);

            Image ctrlImage = new Image();
            ctrlImage.Source = bitmapImage;
            ctrlImage.Height = 50;
            ctrlImage.Width = 50;
            ctrlImage.Stretch = Stretch.UniformToFill;

            listView1.Items.Add(ctrlImage);
        }
    }

我需要将图像添加到已用于我的数据库的项目源中，该数据库包含：

public class AddRecipe
{
    [PrimaryKey,AutoIncrement]
    public int ID { get; set; }
    public string RecipeName { get; set; }
    public string RecipeImage { get; set; }
} 

 <ListView x:Name="listView" HorizontalAlignment="Left" Height="493" Margin="725,60,0,0" VerticalAlignment="Top" Width="528" IsItemClickEnabled="True" SelectionMode="None" ItemClick="listView_SelectionChanged" FontSize="26.667">
        <ListView.ItemTemplate>
            <DataTemplate >
                <StackPanel Orientation="Vertical"  Margin="4">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding RecipeName}" Foreground="Black"/>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding MealType}" Foreground="Black"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Answer 1

我们可以使用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>，因此DataType的{{1}}为DataTemplate，因为我只是绑定了整个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如下所示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

Answer 2

简单

xaml

<ListView Name="listView1">
     <ListView.ItemTemplate>
          <DataTemplate>
               <Grid>
                    <Image Source="{Binding}" Height="50" Width="50" Stretch="UniformToFill" />
               </Grid>
           </DataTemplate>
      </ListView.ItemTemplate>
</ListView>

и в коде добавляем List<BitmapImage>

List<BitmapImage> data_list = new List<BitmapImage>();

foreach (var stuff in query)
        {
            string FileName;
            FileName = stuff.RecipeImage;
            var file = await
            Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(FileName);
            BitmapImage bitmapImage;
            using (var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
            {
                bitmapImage = new BitmapImage();
                bitmapImage.SetSource(stream);
            }

          data_list.Add(bitmapImage);
        }

 listView1.ItemsSource = data_list;

然后我们只需将数据填入我们的ListView

将listview图像源绑定到图像（Sqlite / UWP / C＃）

2 个答案: