XAML Binding String<List> or String[] to <Image>

Question

this is a part of my XAML and it works to display one picture "ContentImages":

        <DataTemplate x:Key="Box">
        <Grid Background="#99FFFFFF" Margin="0 0 0 5" Width="380">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Border Margin="0,9.5,0,0" Grid.Column="0" HorizontalAlignment="Left">
                <Image VerticalAlignment="Top" Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}" Height="79" Width="79"/>
            </Border>
            <StackPanel  Grid.Column="1" Margin="14.5,0,0,0" Height="Auto">
                <TextBlock Text="{Binding Title}" Foreground="Black" FontSize="36"/>
                <TextBlock Text="{Binding Content}" TextWrapping="Wrap"  Foreground="Black" FontSize="18" Padding="10 0 10 0"/>
                <TextBlock Text="{Binding DateSend}"></TextBlock>
                <Image Source="{Binding ContentImages}"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

The question is, what is the best way to bind several images. The property ContentImages could be empty or could have several URLImages strings in it. Now it works for up to one URLImage... What do I need to make it more dynamically?

Do I need to change this property from String to List<String> or maybe String[]?
And if so, what would the XAML then have to look like to handle it?

Cheers.

Answer 1

You can change to an ObservableCollection for the property ContentImages and change your Image to ItemsControl :

VM:

public ObservableCollection<string> ContentImages { get; set; }

XAML:

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

Here and here are good tutorials on ItemsControls