List Item template for dynamic number of bindings - windows-phone-7

Question

Hei,
So lets assume that I have this ListBox.ItemTemplate:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="DataTemplate1">
<StackPanel Orientation="Horizontal">
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="{Binding name}" FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="{Binding age}" FontWeight="Bold"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="blah blah" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="{Binding something}"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="Time" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="45 minutes"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
What I want to achieve is that somehow the number of Images in the second stackpanel, this one:
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
to be dynamic, two for some list box items, 3 or 4 for others.
I am wondering if its possible to achieve this with binding and templates ?
I don't want to do this manually in code.

Answer 1

You can replace that particular StackPanel with a ListBox. The ListBox can be then bind to the Image-collection and its ItemTemplate can be set to show the images. Like this:
<DataTemplate x:Key="DataTemplate1">
<StackPanel Orientation="Horizontal">
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="{Binding name}" FontWeight="Bold"/>
<TextBlock TextWrapping="Wrap" Text="{Binding age}" FontWeight="Bold"/>
</StackPanel>
<ListBox ItemsSource="{Binding DynamicCollectionOfImages}">
<ListBox.ItemTemplate>
<DataTemplate>
<Image Height="100" Source="{Binding .}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<StackPanel Height="100" Width="100">
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="blah blah" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="{Binding something}"/>
</StackPanel>
<StackPanel Height="100" Width="100">
<TextBlock TextWrapping="Wrap" Text="Time" FontSize="13.333"/>
<TextBlock TextWrapping="Wrap" Text="45 minutes"/>
</StackPanel>
</StackPanel>
</DataTemplate>

Answer 2

When there are different set of images for every list item you should add another ListBox inside main one and put an Image control as an ItemTemplate.
But when you have just some images-sets (eg. with 2, 3 and 4 static images) for whole list and want to display one of them for every list item you can prepare 3 StackPanel's inside listBoxItem template and change it visibility depending on some property from DataSource. This property value should be converter into a Visibility enumeration member.
Eg. when that images should depend on integer ImagesSet property from DataSource:
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=2}>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=3}>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
<StackPanel Height="100" Width="100" Visibility={Binding ImagesSet, Converter={StaticResources ImagesSetToVisibility}, ConverterParameter=4}>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
<Image Height="100"/>
</StackPanel>
The converter should check, if value is equal to parameter and return Visibility.Visbile or Visibility.Collapsed:
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return ((int)value) == ((int)parameter) ? Visibility.Visible : Visibility.Collapsed;
}