Шаблон списка элементов для динамического числа привязок

Question

Hei

Итак, давайте предположим, что у меня есть этот 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>

То, чего я хочу достичь, так это то, что каким-то образом количество изображений во второй панели стека, вот это:

                <StackPanel Height="100" Width="100">
                <Image Height="100"/>
                <Image Height="100"/>
            </StackPanel>

должно быть динамическим, два для некоторых элементов списка, 3 или 4 для других.

Мне интересно, возможно ли достичь этого с помощью связывания и шаблонов? Я не хочу делать это вручную в коде.

Answer 1

Вы можете заменить эту конкретную StackPanel на ListBox.Затем ListBox может быть привязан к коллекции изображений, а его ItemTemplate может быть установлен для отображения изображений.Как это:

        <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

Когда есть разные наборы изображений для каждого элемента списка, вы должны добавить еще один ListBox внутри основного и поместить элемент управления Image в качестве ItemTemplate.

Но когда у вас есть только несколько наборов изображений (например, с2, 3 и 4 статических изображения) для всего списка и для отображения одного из них для каждого элемента списка вы можете подготовить 3 шаблона StaBPanel внутри listBoxItem и изменить его видимость в зависимости от некоторого свойства из DataSource.Это значение свойства должно быть преобразовано в член перечисления Visibility.

Например.когда эти изображения должны зависеть от целочисленного ImagesSet свойства 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>

Преобразователь должен проверить, равно ли значение параметру, и вернуть Visibility.Visbile или Visibility.Collapsed:

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return ((int)value) == ((int)parameter) ? Visibility.Visible : Visibility.Collapsed;
}