Windows Phone 7 - 图像＆amp;数据绑定列表框中的主题

Question

我有一个列表框，我正在做一些数据绑定。正如你所看到的，我有一些与我正在显示的数据相关联的图像...一切都很好，除了当我更改主题时我需要将图像更改为黑色图像。我似乎无法弄清楚当这些图像被绑定时如何更改图像。

有什么想法吗？

            <ListBox x:Name="lbPharm" ItemsSource="{Binding col}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe WP Semibold" FontWeight="Bold" FontSize="30" VerticalAlignment="Top" Margin="20,10">*</TextBlock>
                            <StackPanel>
                                <TextBlock x:Name="ItemText" Text="{Binding name}"  FontSize="{StaticResource PhoneFontSizeLarge}"/>
                                <TextBlock x:Name="ItemNumber" Text="{Binding number}"  FontSize="{StaticResource PhoneFontSizeNormal}"/>
                            </StackPanel>

                            <Image Source="Images/phone.png" Margin="20,0" x:Name="phone" Visibility="Visible">
                                <toolkit:GestureService.GestureListener>
                                    <toolkit:GestureListener Tap="GestureListener_Tap_Phone"/>
                                </toolkit:GestureService.GestureListener>
                            </Image>


                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox> 

Answer 1

您应该为图像源创建一个绑定，而不是在XAML中显式设置它。

<ListBox x:Name="lbPharm" ItemsSource="{Binding col}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                <TextBlock FontFamily="Segoe WP Semibold" FontWeight="Bold" FontSize="30" VerticalAlignment="Top" Margin="20,10">*</TextBlock>
                <StackPanel>
                    <TextBlock x:Name="ItemText" Text="{Binding name}"  FontSize="{StaticResource PhoneFontSizeLarge}"/>
                    <TextBlock x:Name="ItemNumber" Text="{Binding number}"  FontSize="{StaticResource PhoneFontSizeNormal}"/>
                </StackPanel>

                <!-- Image source is bound to a property -->
                <Image Source="{Binding ImageSource}" Margin="20,0" x:Name="phone" Visibility="Visible">
                    <toolkit:GestureService.GestureListener>
                        <toolkit:GestureListener Tap="GestureListener_Tap_Phone"/>
                    </toolkit:GestureService.GestureListener>
                </Image>


            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox> 

现在，只需根据需要更新视图模型中的属性，只要包含属性的类实现INotifyPropertyChanged，新图像就会显示在ListBox中。

ImageSource属性可能必须是BitmapImage而不是字符串。当XAML用作文字时，必须使用转换器转换路径字符串，但我认为如果使用绑定，它不会执行此操作。或者您可以使用自己的转换器。无论哪种方式，构建BitmapImage如下：

new BitmapImage( new Uri( "/path/to/image.png", UriKind.Relative ) )

修改

添加示例：

<DataTemplate x:Key="LongListSelectorItemTemplate">
  <StackPanel VerticalAlignment="Top"
              Orientation="Horizontal">

    <toolkit:GestureService.GestureListener>
      <toolkit:GestureListener Tap="OnTap" />
    </toolkit:GestureService.GestureListener>

    <Image  Source="{Binding ImageSource}"
            MinHeight="32"
            MinWidth="32"
            MaxHeight="48"
            MaxWidth="48" />

    <StackPanel>

      <TextBlock Text="{Binding Name}"
                 Style="{StaticResource PhoneTextExtraLargeStyle}"
                 Margin="12,10,12,0" />

      <TextBlock Text="{Binding Parent}"
                 Foreground="{StaticResource PhoneAccentBrush}"
                 Style="{StaticResource PhoneTextSubtleStyle}"
                 Margin="24,0,12,10" />

    </StackPanel>

  </StackPanel>
</DataTemplate>

对应的视图模型：

public class Item : INotifyPropertyChanged
{
  #region Private Members
  private string _name = null; 
  private string _imageSource = null;
  private string _parent = null;
  #endregion

  public string Name
  {
    get
    {
      return _name;
    }
    set
    {
      if( value != _name ) {
        _name = value;
        NotifyPropertyChanged( "Name" );
      }
    }
  }

  public string Parent
  {
    get
    {
      return _parent;
    }
    set
    {
      if( value != _parent ) {
        _parent = value;
        NotifyPropertyChanged( "Parent" );
      }
    }
  }

  public string ImageSource
  {
    get
    {
      return _imageSource;
    }
    set
    {
      if( value != _imageSource ) {
        _imageSource = value;
        NotifyPropertyChanged( "ImageSource" );
      }
    }
  }

  #region INotifyPropertyChanged Members
  public event PropertyChangedEventHandler PropertyChanged;
  private void NotifyPropertyChanged( String propertyName )
  {
    PropertyChangedEventHandler handler = PropertyChanged;
    if( null != handler ) {
      handler( this, new PropertyChangedEventArgs( propertyName ) );
    }
  }
  #endregion
}

这是我正在处理的项目中的代码，它与您的情况类似，只是我使用LongListSelector而不是ListBox显示图片。看起来我早先误导了你不能直接使用字符串作为图像源，我正是这样做而且它有效。对不起。