Изменить отображаемое изображение в списке во время выполнения

Question

У меня есть Listbox, привязанный к наблюдаемому набору, на котором отображается другое изображение в зависимости от данных в нем, например:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="PersonTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Path=ImagePath}"/>
            <TextBlock x:Name="id" Text="{Binding Id}" Grid.Column="1"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

Затем я использую его позже:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox x:Name="personListBox" ItemTemplate="{StaticResource PersonTemplate}" 
             ItemsSource="{Binding PersonCollection}"/>
</Grid>

Однако это означает, что я создал свойство ImagePath как часть Person, что на самом деле не правильно, поскольку оно является частью ViewModel, а не модели. Можно ли как-то добавить привязку в ViewModel, чтобы я мог передать идентификатор в изменение изображения соответственно?

EDIT: Я действительно после некоторой игры нашел способ сделать это, но я не уверен, что это разумный подход. Я создал ValueConverter и использовал его для изменения значения.

public class IdToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        int id = (int)value;
        string img;

        switch (id)
        {
            case 1: img = @"Resources/Image/image1.png"; break;
            case 2: img = @"Resources/Image/image2.png"; break;
            default: img = @"Resources/Image/unknown.png"; break;
        }

        return img;
    }

Тогда это работает:

<phone:PhoneApplicationPage.Resources>
    <local:IdToImageConverter x:Key="IdImageConverter"/>
    <DataTemplate x:Key="PersonTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Id,Converter={StaticResource IdImageConverter}}"/>
            <TextBlock x:Name="id" Text="{Binding Id}" Grid.Column="1"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

Answer 1

Это общее требование, и наиболее распространенное решение - код IValueConverter, как показывает ваше редактирование.Однако, поскольку это общее требование, было бы лучше создать общий кусок кода, который мог бы использоваться для этого.

См. Этот блог для примера реализации общего конвертера (егоназывается StringToObjectConverter, но пусть это вас не отталкивает).

Затем вы можете добавить конвертер в представление: -

         <local:StringToObjectConverter x:Key="TypeToImageSource">
             <ResourceDictionary>
                 <BitmapImage UriSource="Resources/Image/image1.png" x:Key="1" />
                 <BitmapImage UriSource="Resources/Image/image2.png" x:Key="2" />
                 <BitmapImage UriSource="Resources/Image/unknown.png" x:Key="__default__" /> 
            </ResourceDictionary>
         </local:StringToObjectConverter>

Answer 2

Я не уверен, что правильно понял ваш вопрос.Вы говорите, что ImagePath не является свойством коллекции PersonCollection, что она принадлежит какой-то другой коллекции?Если это так, вы можете сослаться на него, указав DataContext следующим образом:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="PersonTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image DataContext="{Binding ImageCollection}" 
                   Source="{Binding Path=ImagePath}"/>
            <TextBlock x:Name="id" Text="{Binding Id}" Grid.Column="1"/>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

РЕДАКТИРОВАТЬ: Перечитывая ваш вопрос, я думаю, вы спрашиваете, как связать изображение, которое выбрано в зависимости от свойства Id PersonCollection.Для этого создайте коллекцию с именем ImageCollection в вашей ViewModel, содержащую свойство ImagePath, которое содержит список созданных изображений, соответствующих списку Id s, отображаемому в PersonCollection, и привяжите его, как показановыше.