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> 

今、ちょうど限り、プロパティを含むクラスは、新しいイメージがあなたのListBoxに表示されますINotifyPropertyChanged実装として、あなたのビューモデルのプロパティを更新します。

ImageSourceプロパティは、文字列の代わりにBitmapImageである必要があります。リテラルとして使用する場合、XAMLはコンバーターを使用してパス文字列を変換する必要がありますが、バインディングを使用する場合はこれを実行しません。または、独自のコンバータを使用することもできます。

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

EDIT

例を追加する：以下のいずれかの方法は、BitmapImageを構築

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

これはコードからです私が取り組んでいるプロジェクト、それはまさにですあなたのケースには、私はListBoxの代わりにLongListSelectorの画像を表示しています。そして、私はイメージソースのために直接文字列を使用できないことについてあなたを誤解しているように見えます。私はそれを正確にやっています。申し訳ありません。