it-swarm.com.de

Binden eines Bildes in WPF-MVVM

Ich habe Probleme, das Image mit meinem Viewmodel zu verbinden. Ich habe die XamlParseException endlich los, aber das Bild erscheint nicht. Ich habe sogar das Bild im ViewModel hart codiert. Kann jemand sehen, was ich falsch mache? 

Aussicht:

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

ViewModel:

 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");
        }
    }
34
kurgaan

Das Anzeigen einer Image in WPF ist viel einfacher. Versuche dies:

<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 eine string sein:

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

Sie sollten Ihre Bilder jedoch wirklich zu einem Ordner mit dem Namen Images im Stammverzeichnis Ihres Projekts hinzufügen und deren Build-Aktion in Eigenschaftenfenster in Visual Studio auf Ressource setzen ... dann können Sie auf dieses Format zugreifen:

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

UPDATE >>>

Als letzter Tipp ... Wenn Sie jemals ein Problem damit haben, dass ein Steuerelement nicht wie erwartet funktioniert, geben Sie einfach 'WPF', den Namen dieses Steuerelements und dann das Wort 'Klasse' in eine Suchmaschine ein. 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 die meisten Seiten enthalten auch Codebeispiele.


UPDATE 2 >>>

Wenn Sie den Beispielen von der Verknüpfung zu MSDN gefolgt sind und nicht funktionieren, ist Ihr Problem nicht das Image-Steuerelement. Versuchen Sie es mit der von mir vorgeschlagenen string-Eigenschaft:

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

Wenn Sie den Dateipfad in TextBlock nicht sehen, haben Sie wahrscheinlich DataContext nicht auf die Instanz Ihres Ansichtsmodells gesetzt. Wenn Sie can den Text sehen, liegt das Problem an Ihrem Dateipfad.


UPDATE 3 >>>

In .NET 4 funktionieren die obigen Image.Source-Werte. Microsoft hat jedoch einige schreckliche Änderungen in .NET 4.5 vorgenommen, die viele verschiedene Dinge brachen. In .NET 4.5 müssten Sie daher den vollständigen pack-Pfad wie folgt verwenden:

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

Weitere Informationen zu Paket-URIs finden Sie auf der Seite Pack-URIs in WPF in Microsoft Docs.

72
Sheridan

@Sheridan thx .. wenn ich dein Beispiel mit "DisplayedImagePath" auf beiden Seiten versuche, funktioniert es mit absolutem Pfad, wie du es zeigst. 

Wie bei den Pfaden relative verbinde ich immer relative Pfade. Ich füge zuerst das Unterverzeichnis (!) Und die Bilddatei in meinem Projekt ein.

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

Dies wurde getestet, siehe meinen Projektmappen-Explorer in VS2015.

 example of image binding in VS2015 )

Hinweis: Wenn Sie ein Click-Ereignis wünschen, verwenden Sie das Tag Button um das Bild ,

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

0
Goodies