CODEWITHSUNDEEP
windows-phone-7xaml
Ahmad Mushtaq
Ahmad Mushtaq

Reputation: 1395

List Item template for dynamic number of bindings

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.

Upvotes: 0

Views: 1129

Answers (2)

MarcinJuraszek
MarcinJuraszek

Reputation: 125650

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;
}

Upvotes: -1

Mikael Koskinen
Mikael Koskinen

Reputation: 12916

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>

Upvotes: 2

Related Questions