Binding an Image in WPF MVVM

Question

I am having some trouble binding in Image to my viewmodel  I finally got rid of the XamlParseException  but the image does not come up  I even hard coded the image in the ViewModel  Can someone see what I am doing wrong                    View    lt Image HorizontalAlignment  Left  Margin  0 0 0 0  Name  image1  Stretch  Fill  VerticalAlignment  Bottom  Grid Row  8  Width  200   Grid ColumnSpan  2   gt   lt Image Source gt       lt BitmapImage DecodePixelWidth  200  UriSource   Binding Path DisplayedImage  Mode TwoWay     gt   lt  Image Source gt      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

User · Accepted Answer

Displaying an Image in WPF is much easier than that  Try this    lt 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    gt    And the property can just be a string   public string DisplayedImage        get   return   C  Users Public Pictures Sample Pictures Chrysanthemum jpg         Although you really should add your images to a folder named Images in the root of your project and set their Build Action to Resource in the Properties Window in Visual Studio    you could then access them using this format   public string DisplayedImage        get   return   AssemblyName component Images ImageName jpg           UPDATE      As a final tip    if you ever have a problem with a control not working as expected  simply type  WPF   the name of that control and then the word  class  into a search engine  In this case  you would have typed  WPF Image Class   The top result will always be MSDN and if you click on the link  you ll find out all about that control and most pages have code examples as well     UPDATE 2      If you followed the examples from the link to MSDN and it s not working  then your problem is not the Image control  Using the string property that I suggested  try this    lt StackPanel gt       lt Image Source   Binding DisplayedImagePath     gt       lt TextBlock Text   Binding DisplayedImagePath     gt   lt  StackPanel gt    If you can t see the file path in the TextBlock  then you probably haven t set your DataContext to the instance of your view model  If you can see the text  then the problem is with your file path     UPDATE 3      In  NET 4  the above Image Source values would work  However  Microsoft made some horrible changes in  NET 4 5 that broke many different things and so in  NET 4 5  you d need to use the full pack path like this    lt Image Source  pack   application     AssemblyName component Images image to use png  gt       For further information on pack URIs  please see the Pack URIs in WPF page on Microsoft Docs

User · Answer

If you have a process that already generates and returns an Image type  you can alter the bind and not have to modify any additional image creation code   Refer to the   Source  of the image in the binding statement   XAML   lt Image Name  imgOpenClose  Source   Binding ImageOpenClose Source    gt    View Model Field  private Image  imageOpenClose  public Image ImageOpenClose       get               return  imageOpenClose            set                imageOpenClose   value          OnPropertyChanged

User · Answer

Sheridan thx   if I try your example with  DisplayedImagePath  on both sides  it works with absolute path as you show    As for the relative paths  this is how I always connect relative paths  I  first include the subdirectory     and the image file in my project   then I use   character to denote the bin-path        public string DisplayedImagePath               get   return        images osc png             This was tested  see below my Solution Explorer in VS2015       Note  if you want a Click event  use the Button tag around the image    x000D   x000D   lt Button Click  image Click  Width  128  Height  128   Grid Row  2  VerticalAlignment  Top  HorizontalAlignment  Left  gt  x000D     lt Image x Name  image  Source   Binding DisplayedImagePath   Margin  0 0 0 0    gt  x000D   lt  Button gt  x000D   x000D   x000D

[c#] Binding an Image in WPF MVVM

Examples related to c#

Examples related to wpf

Examples related to mvvm