Passing an Image in C#

Question

i am currently doing an app where i will need to pass the details of a selected pet to a new "Profile" page. As it stands, i have gotten all the data i require to pass (name,age etc) to go to my new profile page but i now have the problem that as i try to pass the photo of the selected pet through it crashes the app.

Firstly this is where i have declared my generic list, in the app.xaml

 private void Application_Launching(object sender, LaunchingEventArgs e)
    {
            myshop.Add(new Shop{Name = "Johnny", Age= 2, Breed="Husky", Type= "Dog", Stock = 1, Price = 125, Photo = "/Assignment 1;component/Images/Husky.jpg"});
            myshop.Add(new Shop{Name = "Billy", Age= 1, Breed="Shiba Inu", Type= "Dog", Stock = 1, Price = 250, Photo = "/Assignment 1;component/Images/Shiba Inu.jpg"});
            myshop.Add(new Shop{Name = "Sammy", Age = 8, Breed="Siamese", Type="Cat", Stock = 1, Price = 15, Photo = "/Assignment 1;component/Images/Siamese Cat.jpg"});
            myshop.Add(new Shop{Name = "Molly", Age = 6, Breed="Norwegian", Type="Cat", Stock = 1, Price = 30, Photo = "/Assignment 1;component/Images/NorwegianForestCat.jpeg"});
            myshop.Add(new Shop{Name = "Nemo", Age = 3, Breed="Clown Fish", Type="Fish", Stock = 1, Price = 10, Photo = "/Assignment 1;component/Images/clown Fish.jpg"});
            myshop.Add(new Shop{Name = "Dory", Age = 1, Breed="Palette SurgeonFish", Type="Fish", Price = 75, Stock = 1, Photo = "/Assignment 1;component/Images/Palette Surgeonfish.jpg"});
            myshop.Add(new Shop{Name = "Keith", Age = 4, Breed="Bearded Dragon", Type="Lizard", Stock = 1, Price = 750, Photo = "/Assignment 1;component/Images/Bearded Dragon.jpg"});
            myshop.Add(new Shop {Name = "Oisin", Age = 12, Breed = "Gecko", Type = "Lizard", Stock = 1, Price = 90, Photo = "/Assignment 1;component/Images/Gecko.jpg" });
    }

Here is where i am attempting to pass through the details

    private void list_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
    {
        Shop selectedPet = list.SelectedItem as Shop;

        String photo = selectedPet.Photo;
        String breed = selectedPet.Breed;
        String name = selectedPet.Name;
        int age = selectedPet.Age;
        int price = selectedPet.Price;

        NavigationService.Navigate(new Uri("/Profile.xaml?name=" + name + "&breed=" + breed + "&age=" + age + "&price=" + "€" + price + "&photo=" + photo, UriKind.Relative));  
    }

That part of the code was working just fine and was passing the details correctly but now that i have added in the photo to be passed it is crashing. This is the code where i call the passed data to the new page

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        string photo;
        string name;
        string age;
        string breed;
        string price;

            if (NavigationContext.QueryString.TryGetValue("photo", out photo))
            {
                imgPhotoHolder.Source = null;

                BitmapImage myImage = new BitmapImage
                (new Uri("/Assignment 1;component/Images/" + photo, UriKind.Relative));

                imgPhotoHolder.Source = myImage;
            }
            if (NavigationContext.QueryString.TryGetValue("name", out name))
            {
                nameTxtBlock.Text = name;
            }
            if(NavigationContext.QueryString.TryGetValue("age", out age))
            {
                ageTxtBlock.Text = age;
            }
            if(NavigationContext.QueryString.TryGetValue("breed", out breed))
            {
                breedTxtBlock.Text = breed;
            }
            if (NavigationContext.QueryString.TryGetValue("price", out price))
            {
                priceTxtBlock.Text = price;
            }
     }

The problem seems to arise from this snippet of code

+ "&photo=" + photo

The reason i know this is because when you comment out just that bit of code it will work fine and pass the details but when uncommented it will cause the app to crash when you select an item of the shop (see pictures below)

So i was just wondering if anybody has an idea on how to fix this bit of code or how to correctly get the image to pass through to the next page. Thanks in advance, Jason

The point where you select an image:

When you have clicked an image and where the details should display:

Answer 1

private void btnDetails_Click(object sender, RoutedEventArgs e) { Animals selectedAnimals = lstAnimals.SelectedItem as Animals;

        if (!(lstAnimals.SelectedItem == null))
        {
            NavigationService.Navigate(new Uri("/Details.xaml?" + "name=" + selectedAnimals.Name + "&"
            + "breed=" + selectedAnimals.Breed + "&" + "gender=" + selectedAnimals.Gender + "&"
            + "DOB=" + selectedAnimals.DOB + "&" + "price=" + selectedAnimals.Price + "&"
            + "photo=" + selectedAnimals.Photo, UriKind.RelativeOrAbsolute));   
        }

        else
        {
            MessageBox.Show("No Pet Selected");
        }

    }

Bop bop bop

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        string name, breed, photo, gender, DOB, price;
        if (NavigationContext.QueryString.TryGetValue("name", out name))
            txtName.Text = name;
        if (NavigationContext.QueryString.TryGetValue("breed", out breed))
            txtBreed.Text = breed;
        if (NavigationContext.QueryString.TryGetValue("gender", out gender))
            txtGender.Text = gender;
        if (NavigationContext.QueryString.TryGetValue("DOB", out DOB))
            txtDOB.Text = DOB;
        if (NavigationContext.QueryString.TryGetValue("price", out price))
            txtPrice.Text = price;
        if (NavigationContext.QueryString.TryGetValue("photo", out photo))
        {
            BitmapImage image = new BitmapImage(new Uri("/PetShop_A2;component/" + photo, UriKind.Relative));
            imgDetails.Source = image;
        }
    }

You're the designer

Answer 2

In this OnNavigatedTo method you need to set write path for your image like this:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    { 
        try
        {
        string photo;
        string name;
        string age;
        string breed;
        string price;

            if (NavigationContext.QueryString.TryGetValue("photo", out photo))
            {
                imgPhotoHolder.Source = null;

                BitmapImage myImage = new BitmapImage
                (new Uri(photo, UriKind.RelativeOrAbsolute));

                imgPhotoHolder.Source = myImage;
            }
            if (NavigationContext.QueryString.TryGetValue("name", out name))
            {
                nameTxtBlock.Text = name;
            }
            if(NavigationContext.QueryString.TryGetValue("age", out age))
            {
                ageTxtBlock.Text = age;
            }
            if(NavigationContext.QueryString.TryGetValue("breed", out breed))
            {
                breedTxtBlock.Text = breed;
            }
            if (NavigationContext.QueryString.TryGetValue("price", out price))
            {
                priceTxtBlock.Text = price;
            }
            }catch(Exception ex)
            {

            }
     }

Answer 3

Your photo string value is formatted like this

"/Assignment 1;component/Images/SomeImageName.jpg"

and you're sending that as a parameter.

On the second page, you take that value out and form an Uri like this:

new Uri("/Assignment 1;component/Images/" + photo...

which effectively creates an URI for this:

/Assignment 1;component/Images//Assignment 1;component/Images/SomeImageName.jpg

That looks wrong. You should probably just create the Uri based on the Photo string

BitmapImage myImage = new BitmapImage(new Uri(photo, UriKind.Relative));

and make sure that the Build action for your photo files is set to Resource.