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