Binden eines Bildes in WPF MVVM

Question

Ich habe Probleme beim Binden von Image an mein Viewmodel. Ich habe die XamlParseException endlich losgeworden, aber das Bild wird nicht angezeigt. Ich habe das Bild sogar im ViewModel fest codiert. Kann jemand sehen, was ich falsch mache?

Ausblick:

<Image HorizontalAlignment="Left" Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" Grid.Row="8" Width="200" Grid.ColumnSpan="2" > 
<Image.Source> 
    <BitmapImage DecodePixelWidth="200" UriSource="{Binding Path=DisplayedImage, Mode=TwoWay}" /> 
</Image.Source> 

Ansichtsmodell:

string _DisplayedImagePath = @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg";//string.Empty; 
    int _DisplayedImageIndex; 
    BitmapImage _DisplayedImage = null; 
    public BitmapImage DisplayedImage 
    { 
     get 
     { 
      _DisplayedImage = new BitmapImage(); 
      if (!string.IsNullOrEmpty(_DisplayedImagePath)) 
      { 
       _Rail1DisplayedImage.BeginInit(); 
       _Rail1DisplayedImage.CacheOption = BitmapCacheOption.OnLoad; 
       _Rail1DisplayedImage.CreateOptions = BitmapCreateOptions.IgnoreImageCache; 
       _Rail1DisplayedImage.UriSource = new Uri(_DisplayedImagePath); 
       _Rail1DisplayedImage.DecodePixelWidth = 200; 
       _Rail1DisplayedImage.EndInit(); 
      } 
      return _Rail1DisplayedImage; 
     } 
     set 
     { 
      _Rail1DisplayedImage = value; 
      OnPropertyChanged("DisplayedImage"); 
     } 
    } 

Answer 1

ein Image in WPF Anzeige ist viel einfacher als das. Versuchen Sie folgendes:

<Image Source="{Binding DisplayedImagePath}" HorizontalAlignment="Left" 
    Margin="0,0,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Bottom" 
    Grid.Row="8" Width="200" Grid.ColumnSpan="2" /> 

Und die Eigenschaft kann nur sein string:

public string DisplayedImage 
{ 
    get { return @"C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"; } 
} 

Obwohl Sie wirklich Ihre Bilder in einen Ordner mit dem Namen Images in der Wurzel des Projekts hinzufügen sollten und setzen ihre Build Action-Ressourcen in den Eigenschaftenfenster in Visual Studio ... man konnte sie dann in diesem Format zuzugreifen:

public string DisplayedImage 
{ 
    get { return "/AssemblyName;component/Images/ImageName.jpg"; } 
} 

---

UPDATE >>>

Als letzter Tipp ... wenn Sie jemals ein Problem mit einer Kontrolle nicht wie erwartet funktioniert haben, geben Sie einfach ‚WPF‘, den Namen dieser Kontrolle und dann das Wort "Klasse" in eine Suchmaschine. In diesem Fall hätten Sie "WPF Image Class" eingegeben. Das oberste Ergebnis ist immer MSDN. Wenn Sie auf den Link klicken, erfahren Sie alles über dieses Steuerelement, und auf den meisten Seiten finden Sie Codebeispiele.

---

UPDATE 2 >>>

Wenn Sie die Beispiele aus dem Link zu MSDN gefolgt und es nicht funktioniert, dann ist dein Problem ist nicht die Image Kontrolle. Mit Hilfe der string Eigenschaft, die ich vorgeschlagen, versuchen Sie dies:

<StackPanel> 
    <Image Source="{Binding DisplayedImagePath}" /> 
    <TextBlock Text="{Binding DisplayedImagePath}" /> 
</StackPanel> 

Wenn Sie nicht den Dateipfad im TextBlock sehen können, dann haben Sie wahrscheinlich nicht Ihre DataContext auf die Instanz der View-Modell festgelegt. Wenn Sie können den Text sehen, dann ist das Problem mit Ihrem Dateipfad.

---

UPDATE 3 >>>

In .NET 4, würden die oben Image.Source Werte arbeiten. Allerdings Microsoft einige schreckliche Änderungen in .NET 4.5 gemacht, die viele verschiedene Dinge und so in .NET 4.5 brach, würden Sie den vollständigen pack Pfad so verwenden müssen:

<Image Source="pack://application:,,,/AssemblyName;component/Images/image_to_use.png"> 

Answer 2

@Sheridan thx .. wenn ich Versuchen Sie Ihr Beispiel mit "DisplayedImagePath" auf beiden Seiten, es funktioniert mit absoluten Pfad wie Sie zeigen.

Wie für die relativ Pfade, wie ich immer relative Pfade verbinden, ich schließe zuerst das Unterverzeichnis (!) Und die Bilddatei in meinem Projekt .. dann verwende ich ~ Zeichen, um den bin-Pfad zu bezeichnen. .

public string DisplayedImagePath 
    { 
     get { return @"~\..\images\osc.png"; } 
    } 

Dieses getestet wurde, siehe unten meine Mappe-Explorer in VS2015 ..

)

Hinweis: wenn Sie ein Click-Ereignis, verwenden Sie die Button tag around the image,

<Button Click="image_Click" Width="128" Height="128" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left"> 
 
    <Image x:Name="image" Source="{Binding DisplayedImagePath}" Margin="0,0,0,0" /> 
 
</Button>