Windows Phone 7 - изображения и темы в списке данных

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 ) )

EDIT

Добавление примера:

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