將listview圖像源綁定到圖像（Sqlite / UWP / C＃）

Question

以下代碼可以將數據庫中的圖像添加到列表視圖中，但是我想使用Image Source而不是listview1.Items.Add將image屬性綁定到XAML中的圖片。 可以輕松地對此代碼進行修改以執行此操作，還是必須以另一種方式進行處理。 希望這不是一個愚蠢的問題，我將不勝感激。

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 ，並將所有圖像作為ListView的ItemsSource放入ObservableCollection<BitmapImage>中。 然后在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並使用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();
    }
}

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中