Binding images in WPF

Question

I want to show multiple image on a uniform grid that i'm getting their urls from the internet).When i execute the code the images are not displayed. This is the videos window:

<Window x:Name="videos" x:Class="Navigateur.Presentation.Videos"
        xmlns:my="clr-namespace:Navigateur.Presentation"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="207" Width="463" WindowStyle="None" ResizeMode="NoResize" Topmost="True" WindowState="Maximized">

    <Grid>
        <ItemsControl Margin="72,30,76,30" ItemsSource="{Binding images}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="4" Rows="3"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

And this is the code behind:

using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Navigateur.Presentation
{
    /// <summary>
    /// Logique d'interaction pour Window2.xaml
    /// </summary>
    public partial class Videos : Window
    {
        ObservableCollection<Image> images;
        public Videos()
        {
            InitializeComponent();

        }
        public ObservableCollection<Image> Images()
        {
            images = new ObservableCollection<Image>();
            ServiceReferenceVideo.VideoServiceClient wcf = new ServiceReferenceVideo.VideoServiceClient();
            foreach (var item in wcf.GetAllVideos())
            {
                string link_thumb = wcf.GetThumbImage((wcf.GetVideoId(item.urlVideo)));
                var wSource = new BitmapImage(new Uri(link_thumb));
                var wImage = new Image { Source = wSource };
                images.Add(wImage);
            }
            return images;
        }


    }
}

Answer 1

Quite a few issues here:

• Your list (ItemsControl) accesses the images via a Binding, but you never set the list's DataContext - the object which the binding system will try to get data from (in your case, the Videos window itself).
• Bindings only work on public properties, not private fields like your images collection.
• When the Images() function is done loading thumbnails, the binding system needs to be notified that the bound collection (public property) has changed, either by implementing INotifyPropertyChanged and raising the PropertyChanged event, or by making the property a DependencyProperty.
• The way it's written now, the Images() function creates a collection of Images, and the ItemsControl uses them as the sources for new Images. Using an Image as the source of an Image is overkill (if it even works). An Image happliy takes e.g. a URI as a source though, so instead of generating Images in code, your images collection can simply be the list of link_thumb urls.

I suggest you read up on data binding in WPF. There are lots of resources out there.

For this particular case though, because everything is done in your Videos window, you could skip bindings altogether, and just force-feed the list of images into the ItemsControl if you give it a name:

<ItemsControl Margin="72,30,76,30" x:Name="_imageList" >
    ...

Code-behind:

public void Images()
{
    var images = new ObservableCollection<string>();
    var wcf = new ServiceReferenceVideo.VideoServiceClient();
    foreach (var item in wcf.GetAllVideos())
    {
        string link_thumb = wcf.GetThumbImage((wcf.GetVideoId(item.urlVideo)));
        images.Add(link_thumb);
    }

    _imageList.ItemsSource = images;
}