[英]Image Gallery from text file
我有一个列表框和一个图片...
XAML
<ListBox Name="listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Image Source="{Binding ElementName=listbox,Path=selectedItem."TEXT SECOND LINE HERE"}" Height="300"/>
C#
FileOpenPicker picker = new FileOpenPicker();
picker.ViewMode = PickerViewMode.Thumbnail;
picker.SuggestedStartLocation = PickerLocationId.ComputerFolder;
picker.FileTypeFilter.Add(".txt");
StorageFile file = await picker.PickSingleFileAsync();
if (file != null) {
var stream = await file.OpenAsync(FileAccessMode.Read);
using (StreamReader reader = new StreamReader(stream.AsStream()))
{
while (!reader.EndOfStream)
{
string line = reader.ReadLine();
if (line.StartsWith("---") {
listbox.items.Add(line);
}
这将打开一个文本文件,如下所示:
--- CAT
http://server.com/cat.png
--- DOG
http://server.com/dog.png
--- BIRD
http://server.com/bird.png
...然后只用动物填充列表框; 如何获得文本文件的第二行,以在所选列表项上显示正确的图像!?
任何帮助都是很好的;
提前致谢!!
您可以创建动物模型
class AnimalModel
{
public string Name { get; set; }
public string Url { get; set; }
}
并在阅读文件时将其添加到列表中
var animalList = new List<AnimalModel>();
...
var model = new AnimalModel();
if (line.StartsWith("---") {
model.Name = line;
}
else if(line.StartsWith("http://") {
model.Url = line;
}
animalList.Add(model);
然后,您可以将此列表绑定到列表框。
listbox.ItemSource = animalList;
将Text="{Binding}"
更改为Text="{Binding Name}"
,向列表框中添加SelectionChanged
事件
<ListBox Name="listbox" SelectionChanged="Listbox_SelectionChanged">
并获取所选模型。 然后将图像源更改为选定的图像源。
private void Listbox_SelectionChanged(object sender, SelectionChangedEventArgs e) {
var model = (sender as ListView)?.SelectedItem as AnimalModel;
if(model != null)
ImageName.Source = model.Url; // give the image a name to access it
}
我不确定是否可以将字符串设置为图像源,也许您必须更改此设置。
如何获得文本文件的第二行,以在所选列表项上显示正确的图像!?
如果您不必使用MVVM,最简单的方法就是创建模型类并将模型实例列表绑定到列表框:
public sealed partial class MainPage : Page
{
public List<Item> items;
public MainPage()
{
this.InitializeComponent();
}
private async void btnClick_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker picker = new FileOpenPicker();
picker.ViewMode = PickerViewMode.Thumbnail;
picker.SuggestedStartLocation = PickerLocationId.ComputerFolder;
picker.FileTypeFilter.Add(".txt");
StorageFile file = await picker.PickSingleFileAsync();
if (file != null)
{
var stream = await file.OpenAsync(FileAccessMode.Read);
using (StreamReader reader = new StreamReader(stream.AsStream()))
{
items = new List<Item>();
while (!reader.EndOfStream)
{
string line = reader.ReadLine();
if (line.StartsWith("---"))
{
//listbox.Items.Add(line);
//Instead of adding a line, add an item instance
items.Add(new Item
{
Name = line
});
}
else if(line!=string.Empty)//if it is not the empty line then add it to the last item's url
{
if (items.LastOrDefault() != null)
{
items.LastOrDefault().URL = line;
}
}
}
listbox.ItemsSource = items;
}
}
}
}
public class Item
{
public String Name { get; set; }
public String URL { get; set; }
}
和XAML:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListBox Name="listbox">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Image Source="{Binding ElementName=listbox,Path=SelectedItem.URL}" Height="300"/>
<Button Name="btnClick" Click="btnClick_Click">Click Me</Button>
</Grid>
这是完整的演示: ImageBindingSample 。
注意:我在项目内部使用图像。 您可以将其更改为在线图片。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.