Dynamical loading and displaying images collection in WPF

Question

I'm using Telerik WPF controls but I'll appreciate any suggestions that might be helpful. I have a GridView (RadGridView with RadGridView.RowDetailsTemplate actually, but it doesn't really matters). Also I have a collection of Images (It's actually a ICollection where items of this collection are relative Uris to the Images). Everything works fine if I have a fixed amount of Images in my collection, because I can create a fixed amount of Image controls in my View (XAML) and create a binding for each of these images in collection to each of my Image controls.

I want to create a mini-gallery. The question is how can I generate a non-fixed amount of Image controls to be shown in my GridView.RowDetails (or tell me if there is another way to display a list of images) during runtime. I'd like to know if there are few ways to do this (i.e. through binding in XAML and throught the Code.

Thank you in advance.

Answer 1

I will use CellTemplate to do this.

Basically, you will need a collection of ImageSource/Uri, which will be the ItemsSource of the DataGrid/RadGridView. This collection should implement INotifyCollectionChanged and INotifyPropertyChanged, e.g. ObservableCollection<T>. So you code behind or view model, you could build this collection dynamically, and bind the Source property of your Image in Xaml.

Sample Code

Note the sample code here are for MS DataGrid, but the Telerik RadGridView has the similar interface, so you will be able to easily modify you code.

In Xaml, you could have something like following:

<Grid>
    <Grid.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Image Source="{Binding}"/>
        </DataTemplate>
    </Grid.Resources>
    <DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTemplateColumn CellTemplate="{StaticResource DataTemplate1}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

C# code will be like:

var items = new ObservableCollection<Uri>();
this.DataContext = items;
for (int i = 1; i < 4; i++)
{
    items.Add(new Uri("youimage.jpg"));
}