Need help with changing XAML image source in code behind

Question

Need help with changing XAML image source in code behind

Anonymous

Struggling to change an XAML image source in code behind. What I have is a ComboBox that has no items at startup. After pulling several items from a database that will be used to dictate what image is shown in the XAML image control, I add them to the ComboBox. After the items from the database are added, I then want to change the source of the image control in code from the ComboBox SelectionChanged event function. So far, this all works. What I can't seem to figure out is how to get the image source changed to the file I want shown.

Here is the code I believe is correct.

            Image img = sender.as<Image>();
            winrt::Windows::UI::Xaml::Media::Imaging::BitmapImage bitmapImage = winrt::Windows::UI::Xaml::Media::Imaging::BitmapImage();

            bitmapImage.UriSource() = Uri(img.BaseUri(), "/Image/Image.jpg");
            img.Source() = bitmapImage;

I have two problems with this, img.Source() does not really point to the XAML control. That would actually be ModelImage().Source(). This is from the XAML code.
And IntelliSense has a problem with Uri() that I can't figure out. So, maybe this is not the code I need.

Just another note, this is C++ WinRT UWP.

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2021-12-08T06:38:44.607+00:00

img.Source() does not really point to the XAML control. what's mean of not really point to the xaml. Can't you get image control with this line Image img = sender.as<Image>();?
Anonymous

2021-12-08T15:35:10.683+00:00
So in my struggle to to solve my problem, I was impatient and left some details out.

The code I am working on is C++ and not C#. Unfortunately, I usually have to use an example written in C# and translate it into C++ which is what I did with the code snippet above. Here is the original:

void Image_Loaded(object sender, RoutedEventArgs e) { Image img = sender as Image; BitmapImage bitmapImage = new BitmapImage(); img.Width = bitmapImage.DecodePixelWidth = 80; //natural px width of image source // don't need to set Height, system maintains aspect ratio, and calculates the other // dimension, so long as one dimension measurement is provided bitmapImage.UriSource = new Uri(img.BaseUri,"Assets/StoreLogo.png"); img.Source = bitmapImage; }

This was never going to work for me because I want to change the original image after it is loaded to a different one based on the item selected in a ComboBox.

I now believe the answer lies in the BitmapImage() object so I am going to pursue that course. I may post the answer once I find it.
Castorix31 90,521 Reputation points

2021-12-08T16:18:04.95+00:00

You don't need to translate the code into C++,
you can click on C++/WinRT (upper right) from Image.Source

Anonymous

Here is the code for my second attempt.

    void FactorySettingsPage::ModelComboBox_SelectionChanged([[maybe_unused]] IInspectable const& sender, [[maybe_unused]] SelectionChangedEventArgs const& args)
    {
        ComboBox cbbox = sender.as<ComboBox>();
        auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>();
        auto selectItem = itemSelect.GetString();

        // Set the model image.
        if (selectItem == L"Item1")
        {
            hstring str = L"ms-appx:Images/Item1.jpg";
            Uri uri = Uri(str);

            BitmapImage bitmapImage = BitmapImage::BitmapImage(uri);

            ModelImage().Source() = bitmapImage;

        }
        else if (selectItem == L"Item2")
        {
        ...
        }
    }

I get no errors now, but the new image is not being displayed. Either the path is wrong, the file needs to be in the users hidden AppFolder, or I still need to something more in code. Thanks.

Anonymous

2021-12-08T19:47:57.813+00:00

WOW. All this time I have been doing this the hard way. I had not seen those selections for code type before on these pages. Everything seems to default to C# so I thought that was the only examples available. Thanks. You just saved me oodles of time.

Accepted answer

0 additional answers

Your answer

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,866 Reputation points

2021-12-08T06:38:44.607+00:00

img.Source() does not really point to the XAML control. what's mean of not really point to the xaml. Can't you get image control with this line Image img = sender.as<Image>();?
Anonymous

2021-12-08T15:35:10.683+00:00

So in my struggle to to solve my problem, I was impatient and left some details out.

The code I am working on is C++ and not C#. Unfortunately, I usually have to use an example written in C# and translate it into C++ which is what I did with the code snippet above. Here is the original:

void Image_Loaded(object sender, RoutedEventArgs e) { Image img = sender as Image; BitmapImage bitmapImage = new BitmapImage(); img.Width = bitmapImage.DecodePixelWidth = 80; //natural px width of image source // don't need to set Height, system maintains aspect ratio, and calculates the other // dimension, so long as one dimension measurement is provided bitmapImage.UriSource = new Uri(img.BaseUri,"Assets/StoreLogo.png"); img.Source = bitmapImage; }

This was never going to work for me because I want to change the original image after it is loaded to a different one based on the item selected in a ComboBox.

I now believe the answer lies in the BitmapImage() object so I am going to pursue that course. I may post the answer once I find it.
Castorix31 90,521 Reputation points

2021-12-08T16:18:04.95+00:00

You don't need to translate the code into C++,
you can click on C++/WinRT (upper right) from Image.Source
Anonymous

2021-12-08T16:27:09.36+00:00

Here is the code for my second attempt.

void FactorySettingsPage::ModelComboBox_SelectionChanged([[maybe_unused]] IInspectable const& sender, [[maybe_unused]] SelectionChangedEventArgs const& args) { ComboBox cbbox = sender.as<ComboBox>(); auto itemSelect = cbbox.SelectedItem().as<IPropertyValue>(); auto selectItem = itemSelect.GetString(); // Set the model image. if (selectItem == L"Item1") { hstring str = L"ms-appx:Images/Item1.jpg"; Uri uri = Uri(str); BitmapImage bitmapImage = BitmapImage::BitmapImage(uri); ModelImage().Source() = bitmapImage; } else if (selectItem == L"Item2") { ... } }

I get no errors now, but the new image is not being displayed. Either the path is wrong, the file needs to be in the users hidden AppFolder, or I still need to something more in code. Thanks.
Anonymous

2021-12-08T19:47:57.813+00:00

WOW. All this time I have been doing this the hard way. I had not seen those selections for code type before on these pages. Everything seems to default to C# so I thought that was the only examples available. Thanks. You just saved me oodles of time.

Answer 1

Castorix31 90,521

This test based on MSDN doc works for me,
with an Image image1 and a Butterfly.png file added in Assets :

 BitmapImage bitmapImage;
 image1().Width(320);
 bitmapImage.DecodePixelWidth(320);
 bitmapImage.UriSource(Windows::Foundation::Uri{ L"ms-appx:///Assets/Butterfly.png" });
 image1().Source(bitmapImage);

Anonymous

2021-12-08T19:35:13.267+00:00
I tried your code snippet with no luck. Here is mine now.

BitmapImage bitmapImage; ModelImage().Width(380); bitmapImage.DecodePixelWidth(380); bitmapImage.UriSource(Uri{ L"ms-appx:///Images/Image.jpg" }); ModelImage().Source() = bitmapImage;

These are the things I have tried or know.

The image for the control never changes from the source file in XAML.

It does not seem to matter if the images are in Assets or Images folder under the project.

Since the new width is bigger than the original, the image control does get bigger, but it is still the original image.

I tried it with no source image on the control in XAML. The new image never was displayed.

I replaced the braces with parenthesis, no change.

I am willing to try other things to make this work as we know it should. It seems that the control is just not getting updated with the new image.
Anonymous

2021-12-08T20:51:46.393+00:00
Found it.

This line was incorrect:

ModelImage().Source() = bitmapImage;

Should have been:

ModelImage().Source(bitmapImage);

It is now working.

Share via

Need help with changing XAML image source in code behind

0 additional answers

Your answer