Search code examples
c#wpfxamlmvvmdata-binding

The Image is not showing even if it successfully takes the path - MVVM WPF


This question may have already asked within Stackoverflow, But I went through all of them and my Image is not showing in the window, even if correctly taking the path. I am using a browser button to import the image. Also, I recently started learning MVVM architecture and WPF Here is my Xaml code;

<!--Image block-->
                <Label Grid.Row="5" Grid.Column="1" Style="{StaticResource LabelStyles}">Image :</Label>
                <DockPanel Grid.Row="5" Grid.Column="2" VerticalAlignment="Center" MinHeight="30" LastChildFill="True">
                    <Button DockPanel.Dock="Left" Style="{StaticResource ButtonStyle}" Content="Browse" Margin="0,0,5,0" Command="{Binding Path=ImageCommand, UpdateSourceTrigger=PropertyChanged}"/>
                <TextBox Name="FileBrowser" DockPanel.Dock="Right" Style="{StaticResource StyleControl}"  HorizontalAlignment="Stretch" Padding="5" Text="{Binding Path= Patient.ImageView}"/>
                </DockPanel>

                <!--Image view block-->
                <Image Name="ImageViewer" Grid.Row="6" Grid.Column="2" HorizontalAlignment="Left" MinWidth="95" MaxWidth="150" MinHeight="95" MaxHeight="150" Margin="0,0,0,10" Source ="{Binding Path= Patient.ImageView}"/>

I am keeping a separate model 'PatientRecordDetailsModel' class to keep the property. there I have defined the Image property as below

public class PatientRecordDetailsModel
    {
private ImageSource m_imgSource;
public ImageSource ImageView { 
            get
            {
                return m_imgSource;
            }
            set
            {
                m_imgSource = value;
            }
        }
}

In the view Model class, The constructor

class PatientRecordDetailsViewModel : INotifyPropertyChanged
{
public PatientRecordDetailsViewModel()
        {

            Patient = new PatientRecordDetailsModel();
        }

// this is the Model property which takes the user inputs

        public PatientRecordDetailsModel Patient
        {
            get { return m_patient; }
            set
            {
                m_patient = value;
                 OnPropertyChange("Patient");

            }
        }

// The browser button command 
public ICommand ImageCommand
        {
            get => new PatientRecordDetailsCommand(param => getImage(), param => canImage());
        }

// the two methods
 private bool canImage()
        {
            return true;
        }

 private void getImage()
        {

            OpenFileDialog dlg = new OpenFileDialog();
            dlg.InitialDirectory = @"C:\Users\Maneesha\Desktop\Dips Y-knots\images\";
            dlg.Filter = "Images (*.BMP;*.JPG;*.GIF,*.PNG,*.TIFF)|*.BMP;*.JPG;*.GIF;*.PNG;*.TIFF|" +
                            "All files (*.*)|*.*";
            if (dlg.ShowDialog() == true)
            {

                string m_fileName = dlg.FileName;
                BitmapImage bitmap = new BitmapImage(new Uri(m_fileName));
                Patient.ImageView = bitmap;

            }
        }

        // INotify     
 public event PropertyChangedEventHandler PropertyChanged;
 private void OnPropertyChange(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
}

I don't know what is going wrong. I also try adding UpdateSourceTrigger in xaml code as well. it didn't work. I edited the code, I am using INotifyPropertyChanged in the ViewModel class. I am keeping a separate model to keep the attributes. Please Help me!!!


Solution

  • You forgot to add OnPropertyChange("ImageView");

    public class PatientRecordDetailsModel : INotifyPropertyChanged
        {
    private ImageSource m_imgSource;
    public ImageSource ImageView { 
                get
                {
                    return m_imgSource;
                }
                set
                {
                    m_imgSource = value;
                    OnPropertyChange("ImageView");
                }
            }
    
    
            // INotify     
     public event PropertyChangedEventHandler PropertyChanged;
     private void OnPropertyChange(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
    
    }