xaml - How to bind to a list of images

Question

I have changed my code to this:

the view:

<phone:Panorama.ItemTemplate>
            <DataTemplate>
                <ScrollViewer Width="800" HorizontalContentAlignment="Left" Margin="0,50,0,0">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>

                        <ListBox x:Name="list_of_images" ItemsSource="{Binding ImagesUrls}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <Image Width="300" Height="300" Source="{Binding}"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal"  />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ListBox>

                        <TextBlock Text="{Binding Title}" 
                                    Grid.Row="1"
                                   Loaded="TextBlock_Loaded_1"
                                   Margin="50,0,0,0"
                                   FontSize="23"
                                   TextWrapping="Wrap"
                                   Width="360"
                                   HorizontalAlignment="Left"
                                   Foreground="Black"/>

                        <TextBox Text="{Binding ContactEmail}" 
                                   Grid.Row="2" 
                                BorderBrush="Black"
                                 Width="340"
                                 HorizontalAlignment="Left"
                                 BorderThickness="1"
                                  Margin="40,0,0,0"
                                   Foreground="Black" />

                        <TextBlock Text="{Binding Body}" 
                                   Grid.Row="3" 
                                   TextWrapping="Wrap"
                                   Foreground="Black"
                                   Margin="50,5,0,0"
                                   Width="360"
                                   HorizontalAlignment="Left"
                                   FontSize="20" />
                    </Grid>

and I build a new object with different properties, with one of the properties being a list of strings which represents the imageurls, but I cannot get the images to show?

I have attached screenshots, what in my xaml must I change so that I can display the images, cause at the moment it doesn't show any images but it shows all the other details

code for populating collection:

   ObservableCollection<ClassifiedAds> klasifiseerd_source = new ObservableCollection<ClassifiedAds>();

  ImagesClassifieds new_Classifieds = new ImagesClassifieds();

  ObservableCollection<string> gallery_images = new ObservableCollection<string>();


   new_Classifieds.Title = klasifiseerd_source[0].Title;
   new_Classifieds.ContactEmail = klasifiseerd_source[0].ContactEmail;
   new_Classifieds.Body = klasifiseerd_source[0].Body;


         foreach (var item in klasifiseerd_source[0].Gallery.Images)
        {
            var deserialized = JsonConvert.DeserializeObject<GalleryImages>(item.ToString());
            gallery_images.Add(deserialized.ImageUrl);
            //new_Classifieds.ImageUrls.Add(deserialized.ImageUrl);
        }

      new_Classifieds.ImageUrls = gallery_images;

        // classifiedPanorama.ItemsSource = new_list;

        new_Classifieds_list.Add(new_Classifieds);

        classifiedPanorama.ItemsSource = new_Classifieds_list;


public class ImagesClassifieds
{
    public string Title { get; set; }
    public string ContactEmail { get; set; }
    public string Body { get; set; }
    public ObservableCollection<string> ImageUrls { get; set; }

}

here is the imageurl format, this works (in another par tof my app I simply bind to 1 image in this format and it works perfectly)

Answer 1

Depending on whether you want to just display a list of images or if you also want to be able to select them, you may either choose an ItemsControl or a ListBox. In both case you have to define a DataTemplate that controls how each item is displayed.

<ItemsControl ItemsSource="{Binding Images}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

or

<ListBox ItemsSource="{Binding Images}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Then you should think about how you define your item class. Just in case you want to be able to dynamically add or remove images from the list and let the UI be automatically updated, you should use an ObservableCollection as container type. As there is a built-in type conversion from string to ImageSource (the type of the Image control's Source property), you may simply use an ObservableCollection<string>.

public class Gal
{
    public ObservableCollection<string> Images { get; set; }
}

You may create an instance of that class like so:

var gallery = new Gal();
gallery.Images = new ObservableCollection<string>(
    Directory.EnumerateFiles(@"C:UsersPublicPicturesSample Pictures", "*.jpg"));

Now you may directly bind to that instance by simply setting the DataContext of your Window (or wherever the image list should be shown) to this instance:

DataContext = gallery;

Note the binding declaration in the ItemsControl or ListBox above was {Binding Images}. If you really have to have a property Gallery (which I assume is in MainWindow) and bind like {Binding Gallery.Images} you may set the DataContext like this:

DataContext = this;