Question

我有一个列表框和图片......

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

...并用动物填充列表框;如何获取文本文件的第二行以在所选列表项上显示正确的图像？？

任何帮助都会很棒;

提前致谢!!

Answer 1

您可以为动物创建模型

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
}

我不确定你是否可以将字符串设置为图像源，也许你必须改变它。

Answer 2

如何获取文本文件的第二行以在所选列表项上显示正确的图像？？

如果您不必使用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。

注意：我使用项目中的图像。你可以把它改成在线图片。

图像库来自文本文件

2 个答案: