文本文件中的图片库

Question

I have a listbox and an image...

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);
                }

This will open a text file like this:

--- CAT
http://server.com/cat.png

--- DOG
http://server.com/dog.png

--- BIRD
http://server.com/bird.png

... and populate the listbox with just the animal; How can I get the second line of the text file to show the correct image on selected list item!?

Any help would be great;

Thanks in advance!!

Answer 1

You can create a Model for Animals

class AnimalModel
{
    public string Name { get; set; }
    public string Url { get; set; }
}

and add them to a list while reading your file

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);

This list you can then bind to the Listbox.

listbox.ItemSource = animalList;

Change Text="{Binding}" to Text="{Binding Name}" , add a SelectionChanged event to the Listbox

<ListBox Name="listbox" SelectionChanged="Listbox_SelectionChanged">

and get the selected model. Then change the image source to the selected one.

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
}

I'm not sure if you can set a string as an Image Source, maybe you have to change this.

Answer 2

How can I get the second line of the text file to show the correct image on selected list item!?

If you don't have to use MVVM, the easiest way to let it work is to create a model class and bind a list of model instances to the listbox:

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; }
}

And the 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>

Here is the complete demo: ImageBindingSample .

Notes: I use the Images inside the project. you can change it to online pictures.