從ViewModel綁定圖像

Question

我正在使用XamDataTree，並且我需要節點圖標爲每種類型的節點都有不同的圖像。我嘗試asking this on Infragistics，但我們不明白對方:(

此外問題實際上與他們的控制無關，它是關於如何獲取存儲在模型中的圖像顯示。是的，這是針對但是這是顯示圖像的唯一可行的方法。

注意：我有一個解決方法，使用Label來指定節點內容並在其中放置一個水平堆棧面板，其中包含圖像和節點文本但是這很糟糕，我想讓XamDataGrid對象顯示圖像。

有28種不同的圖像顯示在這裏，其中一些是動態創建的，所以我不想做一個噸的不同模板，通過文件路徑加載圖像，然後使用不同的模板。

XamDataTree，我也嘗試指定與元素名稱或!綁定。 我試圖直接從模型或通過一個DataTemplate加載圖像：

<ig:XamDataTree 
    ScrollViewer.CanContentScroll="True" 
    ItemsSource="{Binding Model}" 
    HorizontalAlignment="Stretch" 
    VerticalAlignment="Stretch" 
    NodeLineVisibility="Visible" 
    > 
    <ig:XamDataTree.Resources> 
     <DataTemplate x:Key="nodeImage" > 
      <Image Source="{Binding Path=NodeImage}" /> 
     </DataTemplate> 
    </ig:XamDataTree.Resources> 
    <ig:XamDataTree.GlobalNodeLayouts> 
     <ig:NodeLayout 
      ExpandedIconTemplate="{StaticResource nodeImage}" 
      CollapsedIconTemplate="{Binding NodeImage}" 
      Key="Children" 
      DisplayMemberPath="Name" 
      TargetTypeName="Model" 
      > 
     </ig:NodeLayout> 
    </ig:XamDataTree.GlobalNodeLayouts> 
</ig:XamDataTree> 

，我使用的模型，所述圖像源值被設置在別處：

public class Model 
{ 
    /// <summary> 
    /// Image representing the type of node this is. 
    /// </summary> 
    public ImageSource NodeImage 
    { 
     get 
     { 
      return this.nodeImage; 
     } 
     set 
     { 
      this.nodeImage = value; 
      this.OnPropertyChanged("NodeImage"); 
     } 
    } 

    /// <summary> 
    /// Controls will bind their attributes to this event handler. 
    /// </summary> 
    public event PropertyChangedEventHandler PropertyChanged; 

    /// <summary> 
    /// Fire an event alerting listners a property changed. 
    /// </summary> 
    /// <param name="name">Name of the property that changed.</param> 
    public void OnPropertyChanged(string name) 
    { 
     // Check whether a control is listening. 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(name)); 
     } 
    } 
} 

編輯： 我嘗試將文件直接從文件加載到BitmapImage中，然後將它們存儲在模型中，不起作用。當使用更高的調試級別消息時，它在輸出中發佈數據綁定無法找到相應屬性的消息。所以這個問題很可能在我的數據綁定中。

Answer 1

更改屬性NodeImage爲string並返回圖像的路徑。剩下的工作由圖像和將路徑轉換爲ImageSource的轉換器類完成。

private string _imagePath; 
public string NodeImage 
{ 
    get 
    { 
     return _imagePath; 
    } 
    set 
    { 
     _imagePath = value; 
     this.OnPropertyChanged("NodeImage"); 
    } 
} 

Answer 2

另一種解決方案是使用轉換器和Stream屬性NodeImage類型。

轉換器：

public class StreamToImageConverter : IValueConverter { 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { 
     var imageStream = value as System.IO.Stream; 
     if (imageStream != null)) { 
      System.Windows.Media.Imaging.BitmapImage image = new System.Windows.Media.Imaging.BitmapImage(); 
      image.SetSource(imageStream); 
      return image; 
     } 
     else { 
      return null; 
     } 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { 
     throw new NotImplementedException(); 
    } 
} 

物業：

private Stream _imageStream; 
public Stream NodeImage 
{ 
    get 
    { 
     return _imageStream; 
    } 
    set 
    { 
     _imageStream= value; 
     this.OnPropertyChanged("NodeImage"); 
    } 
} 

XAML：

<Grid> 
    <Grid.Resources> 
    <local:StreamToImageConverter x:Name="imageConverter"/> 
    </Grid.Resources> 
    <Image Source="{Binding Path=NodeImage, Converter={StaticResource imageConverter}" /> 
</Grid>