Lier une Image dans le MVVM WPF

j'ai du mal à lier L'Image à mon viseur. Je me suis finalement débarrassé de la XamlParseException, mais l'image ne sort pas. J'ai même codé l'image dans le viseur. Est-ce que quelqu'un peut voir ce que je fais mal?

: 

<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:UsersPublicPicturesSample PicturesChrysanthemum.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");
        }
    }
33
demandé sur kurgaan 2014-02-15 00:22:02

2 réponses

afficher un Image dans WPF est beaucoup plus facile que cela. Essayez ceci: 

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

et la propriété peut juste être un string : 

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

bien que vous devriez vraiment ajouter vos images à un dossier nommé Images dans la racine de votre projet et mettre leur action de construction à ressource dans le fenêtre de propriétés dans Visual Studio... vous pourrait alors y accéder en utilisant ce format: 

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

mise à JOUR >>>

comme dernier conseil... si vous avez un problème avec un contrôle qui ne fonctionne pas comme prévu, tapez simplement "WPF", le nom de ce contrôle et ensuite le mot "classe" dans un moteur de recherche. Dans ce cas, vous auriez tapé 'WPF Image Class'. Le résultat supérieur sera toujours MSDN et si vous cliquez sur le lien, vous trouverez tout sur ce contrôle et la plupart les pages ont aussi des exemples de code.

mise à JOUR 2 >>>

si vous avez suivi les exemples du lien vers MSDN et que cela ne fonctionne pas, alors votre problème est et non la commande Image . En utilisant la propriété string que j'ai suggéré, essayez ceci: 

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

si vous ne pouvez pas voir le chemin du fichier dans le TextBlock , alors vous n'avez probablement pas paramétré votre DataContext à l'instance de votre modèle de vue. Si vous peut voir le texte, alors le problème est avec votre chemin de fichier.

mise à JOUR 3 >>>

dans .NET 4, les valeurs ci-dessus Image.Source fonctionneraient. Cependant, Microsoft a fait quelques changements horribles dans .NET 4.5 qui ont cassé beaucoup de choses différentes et ainsi dans .NET 4.5, vous auriez besoin d'utiliser le plein pack chemin comme ceci: 

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

pour de plus amples informations sur pack URIs, veuillez consulter la page Pack URIs in WPF sur Microsoft Docs.

65
répondu Sheridan 2018-03-27 11:53:20

@Sheridan thx.. si j'essaie votre exemple avec "DisplayedImagePath" des deux côtés, cela fonctionne avec absolute path comme vous le voyez.

comme pour le relatif chemins, c'est comme ça que je connecte toujours les chemins relatifs, j'inclus d'abord le sous-répertoire (!) et le fichier image dans mon projet.. ensuite, j'utilise ~ character pour dénoter le chemin de bin.. 

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

cela a été testé, voir ci-dessous mon explorateur de solutions dans VS2015..

example of image binding in VS2015 )

Note: Si vous voulez un événement de clic, utilisez le étiquette de bouton autour de l'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>
0
répondu Goodies 2017-05-23 10:31:33