将列表视图图像源绑定到图像(Sqlite/UWP/C#)

本文关键字：图像 Sqlite UWP 列表 视图 绑定 | 更新日期: 2023-09-27 18:27:51

下面的代码可以将数据库中的图像添加到列表视图中，但是我希望使用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>

将列表视图图像源绑定到图像(Sqlite/UWP/C#)

我们可以使用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，然后你可以在DataTemplate中添加一个Image控件，并用ImageConverter将RecipeImage绑定到它的Source，如下所示：

<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();
    }
}

简单

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 中

相关文章：