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

Question

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

<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 ，该集合包含一个图像列表，该图像列表是根据PersonCollection出现的Id列表创建的，并如上所述进行绑定。