issue with C# wpf binding image

Question

Good day all, I am trying to make a application so that I can do some basic edits on photos. I have binded a collection to a listbox and I can get all my text information to populate but I cant get my image to show. Every example that I see sets the image by using a uri, however, I didn't do that to create my image and I'm not sure if that is why. I do know that the image appears to be loaded correctly as all the properties about the image are shown (height width pixals). I believe I deleted all the code not related to the issue.

Thanks in advance, Chris

XML

<!--Step 1-->
        <GroupBox x:Name="Step1">
            <Grid>
                <StackPanel>
                    <Label>Select Pictures</Label>
                    <ListBox x:Name="PictureNames" ItemsSource="{Binding}" Height="auto">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image x:Name="CurrentPhoto" Width="300" Height="200" Source="{Binding CurrentPhoto}"/>
                                    <!--old code trying to make this work  <Canvas x:Name="CurrentPhoto" Width="300" Height="200" Background="{Binding CurrentPhoto}"/>-->
                                    <TextBlock x:Name="Name" Text="{Binding Path=Name}"></TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>

                    </ListBox>
                    <Button x:Name="AddPicture" Click="AddPicture_Click">Click to upload Pictures</Button>
                </StackPanel>
            </Grid>
        </GroupBox>

CODE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Microsoft.Win32;
using System.Collections.ObjectModel;

namespace S2IPictureWatermarker
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{

    ObservableCollection<picture> Pictures;
    Position ThisStep = new Position();
    public MainWindow()
    {
        InitializeComponent();
        Startup();

    }

    private void Startup()
    {
        ThisStep.CurrentStep = 1;
        Pictures = new ObservableCollection<picture>();
        Step1.Visibility = System.Windows.Visibility.Visible;
        Step2.Visibility = System.Windows.Visibility.Collapsed;
        Step3.Visibility = System.Windows.Visibility.Collapsed;
        Step4.Visibility = System.Windows.Visibility.Collapsed;
    }

    //GroupEditLstBx.ItemsSource = SelectedPhotos

    private void AddPicture_Click(object sender, RoutedEventArgs e)
    {//add picture to list of pictures
        //get photo(s) location
        OpenFileDialog openFileDialog1 = new OpenFileDialog();
        InitializeOpenFileDialog(openFileDialog1);
        Nullable<bool> result = openFileDialog1.ShowDialog();
        //if photos are found, add to collection
        if (result == true)
            CreatePictureCollection(openFileDialog1.FileNames);
    }

    private void CreatePictureCollection(string[] FullPathNames)
    {
        foreach (string pathName in FullPathNames)
        {
            picture newPicture = new picture();
            newPicture.NewPicture(pathName);
            if(Pictures.Count >= 1)
            {//dont do anything
            }
            else
            {
                PictureNames.ItemsSource = Pictures;
            }
            Pictures.Add(newPicture);

        }
    }

    private void InitializeOpenFileDialog(OpenFileDialog openFileDialog1)
    {
        // Set the file dialog to filter for graphics files.
        openFileDialog1.Filter =
            "Images (*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|" +
            "All files (*.*)|*.*";

        //  Allow the user to select multiple images.
        openFileDialog1.Multiselect = true;
        //                   ^  ^  ^  ^  ^  ^  ^

        openFileDialog1.Title = "My Image Browser";

    } 
}
}

CODE FOR picture class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.IO;
using System.ComponentModel;

namespace S2IPictureWatermarker
{
    class picture : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private int height;

        public int Height
        {
            get { return height; }
            set { height = value; OnPropertyChanged("Height"); }
        }
        private int width;

        public int Width
        {
            get { return width; }
            set { width = value; OnPropertyChanged("Width"); }
        }

        private string type;

        public string Type
        {
            get { return type; }
            set { type = value; OnPropertyChanged("Type"); }
        }

        private string location;

        public string Location
        {
            get { return location; }
            set { location = value; OnPropertyChanged("Location"); }
        }

        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; OnPropertyChanged("Name"); }
        }

        private int orgHeight;

        public int OrgHeight
        {
            get { return orgHeight; }
            set { orgHeight = value; OnPropertyChanged("OrgHeight"); }
        }

        private int orgWidth;

        public int OrgWidth
        {
            get { return orgWidth; }
            set { orgWidth = value; OnPropertyChanged("OrgWidth"); }
        }

        private Image currentPhoto;

        public Image CurrentPhoto
        {
            get { return currentPhoto; }
            set { currentPhoto = value; OnPropertyChanged("CurrentPhoto"); }
        }

        //methods
        //NEW PICTURE
        public bool NewPicture(string PictureFullPath)
        {
            bool Created = false;
            try
            {
                //set path(location), name, type
                Location =  Path.GetPathRoot(PictureFullPath);                 
                Name= Path.GetFileNameWithoutExtension(PictureFullPath);
                Type = Path.GetExtension(PictureFullPath);


                //set current image
                CurrentPhoto = Image.FromFile(PictureFullPath);
                //set height and width
                Height = CurrentPhoto.Height;
                Width = CurrentPhoto.Width;

                Created = true;
            }
            catch (Exception)
            {

                throw;
            }
            return Created;
        }


        //create the OnPropertyChanged method to raise
        protected void OnPropertyChanged(string changedName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(changedName));
            }
        }
    }
}

Answer 1

I believe you can't put System.Windows.Image in the background of the canvas element. That's because System.Windows.Image is UIElement and can't be used as brush. You can create an ImageBrush from an ImageSource (by Uri) and put it into the background. Or you can create ContentControl instead of your canvas element and put the image from presenter in it.

Answer 2

Hi try something like this in the canvas element.

<Canvas.Background>
                    <ImageBrush ImageSource="{Binding CurrentPhoto}" Stretch="UniformToFill"></ImageBrush>
</Canvas.Background>

EDIT: If this doesnt work make your property "CurrentPhoto" to an imagebrush.