将listview图像源绑定到图像（Sqlite/UWP/C#）_C#_Image_Sqlite_Listview_Uwp

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

c# image sqlite listview uwp

将listview图像源绑定到图像（Sqlite/UWP/C#）,c#,image,sqlite,listview,uwp,C#,Image,Sqlite,Listview,Uwp,下面的代码可以将数据库中的图像添加到listview中，但是我希望使用image Source将image属性绑定到XAML中的图片，而不是使用listview1.Items.add。这段代码可以很容易地修改来实现这一点，还是我必须用另一种方法来实现这一点。希望这不是一个愚蠢的问题，我会感谢任何帮助 public async void showImage() { var query = GetAll(); foreach (var stuff in qu

下面的代码可以将数据库中的图像添加到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>

公共类AddRecipe
{
[主密钥，自动增量]
公共int ID{get；set；}
公共字符串RecipeName{get；set；}
公共字符串RecipeImage{get；set；}
}

我们可以使用

ListView.ItemTemplate

设置用于显示每个项目的

DataTemplate

，并将所有图像作为

ListView

的

ItemsSource

放入一个

可观察的集合中。然后在DataTemplate
中，我们可以使用Bind
设置Image.Source
。以下是一个简单的示例：
在XAML中，使用{x:Bind}
设置DataTemplate
以显示图像
<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>

此外，我注意到您正在从图片库获取图像。如果您的应用程序更早地存储了这些图像，那么将它们存储在应用程序数据中会更好，因为这会使绑定更容易，并且在图片库中，用户可以轻松删除这些图像
要在应用程序数据中存储图像，我们可以使用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;
    }
}

更新：
我假设您的项目源中有RecipeImage
，那么您可以在DataTemplate
中添加一个Image
控件，并使用ImageConverter
将RecipeImage
绑定到它的source
，如下所示：
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);
        }
    }
}

<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
的代码可能如下：
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();
    }
}

我们可以使用ListView.ItemTemplate
设置用于显示每个项目的DataTemplate
，并将所有图像作为ListView
的ItemsSource
放入一个ObservableCollection
中。然后在DataTemplate
中，我们可以使用Bind
设置Image.Source
。以下是一个简单的示例：
在XAML中，使用{x:Bind}
设置DataTemplate
以显示图像
<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>

此外，我注意到您正在从图片库获取图像。如果您的应用程序更早地存储了这些图像，那么将它们存储在应用程序数据中会更好，因为这会使绑定更容易，并且在图片库中，用户可以轻松删除这些图像
要在应用程序数据中存储图像，我们可以使用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;
    }
}

更新：
我假设您的项目源中有RecipeImage
，那么您可以在DataTemplate
中添加一个Image
控件，并使用ImageConverter
将RecipeImage
绑定到它的source
，如下所示：
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);
        }
    }
}

<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
的代码可能如下：
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
清单
列表数据_List=新列表（）；
foreach（查询中的变量）
{
字符串文件名；
FileName=stuff.RecipeImage；
var file=wait
Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync（文件名）；
位图图像位图图像；
使用（var stream=await file.OpenAsync（Windows.Storage.FileAccessMode.Read））
{
bitmapImage=新的bitmapImage（）；
bitmapImage.SetSource（流）；
}
数据列表。添加（位图图像）；
}
listView1.ItemsSource=数据\列表；

然后我们只需将数据填入ListView
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; 

xaml
清单
列表数据_List=新列表（）；
foreach（查询中的变量）
{
字符串文件名；
FileName=stuff.RecipeImage；
var file=wait
Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync（文件名）；
位图图像位图图像；
使用（var stream=await file.OpenAsync（Windows.Storage.FileAccessMode.Read））
{
bitmapImage=新的bitmapImage（）；
bitmapImage.SetSource（流）；
}
数据列表。添加（位图图像）；
}
listView1.ItemsSource=数据\列表；

然后我们只需将数据填入我们的ListView
感谢您的回答，它确实会在ListView中显示图像，但是通过将itemsource添加到ImgList，它现在不会在列表中显示项目的名称，因为它绑定到数据库，例如，你知道我怎么能让两个人一起表演吗？Thanks@myf33tsmell，您无需使用ImgList
，因为您有一个项目源。您可以使用项目源（假设它包含RecipeImage
）和值转换器来显示图像和其他图像。我更新了我的答案，以说明如何做到这一点。希望它有帮助。它现在工作起来很简单，但非常感谢您的帮助感谢您的答案，它确实在列表视图中显示了图像，但是通过将itemsource添加到ImgList，它现在不会在列表中显示项目的名称，因为它已绑定到数据库，如