XAML Binding String or String[] to

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.

This is way to broad. Please read a good tutorial about ItemsControls. — nvoigt, Mar 17 '16 at 08:58
you can use `ItemsControl` with an `ItemsSource` bound to `ContentImages` + an `ItemTemplate` with `Image` — ASh, Mar 17 '16 at 08:58
I dont get the question here.. Do you want the image to change dynamically or do you want to show N images at the same time? — Nitro.de, Mar 17 '16 at 09:02

Sylvain P. · Accepted Answer · 2016-03-17T09:19:14.197

3

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

edited Mar 17 '16 at 09:19

answered Mar 17 '16 at 09:13

Sylvain P.

153
6

Thanks Sylvain. This is exactly what i want to achieve. I've added your XAML and did change the property to Observablecollection. Did I fill the Obseravablecollection in the right way? Because it doesnt work so far... ObservableCollection contentImages = new ObservableCollection(); foreach (MediaEntity media in status.Entities.MediaEntities) { contentImagesTest.Add(media.Url); } – Ulpin Mar 17 '16 at 10:33

XAML Binding String or String[] to

1 Answers1