在运行时更改列表框中显示的图像

Question

我有一个绑定到 Observable 集合的列表框，它根据其中的数据显示不同的图像，如下所示：

<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 中，以便我可以将 Id 传递到相应的更改图像中？

编辑： 事实上，我在玩了一些之后找到了一种方法，但我不确定这是否是一种明智的方法。我创建了一个 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>

编辑：
重新阅读您的问题，我认为您是在问如何绑定根据 PersonCollection 的 Id 属性选择的图像。为此，请在 ViewModel 中创建一个名为 ImageCollection 的集合，其中包含属性 ImagePath，其中包含与 Id 列表对应创建的图像列表出现在 PersonCollection 中并如上所示绑定它。