Setting Image source programatically in Metro app,

Question

I have a main page and a camera page in my application. The main page has an image that does not have its source set and a button. If you click the button, it will take you to the camera page. On the camera page, I capture an image and save it in the pictures library on the tablet and then navigate back to the main page where I would like to set the source of the image to the image I just captured and saved in my pictures library. Here is my relevant code.

MainPage.xaml

<Image  x:Name="imgResume" HorizontalAlignment="Left" Height="303" Margin="975,60,0,0" Grid.Row="1" VerticalAlignment="Top" Width="360" Stretch="UniformToFill" Loaded="img_OnLoaded"/>
<Button x:Name="btnCamera" Content="Camera" HorizontalAlignment="Left" Margin="1128,372,0,0" Grid.Row="1" VerticalAlignment="Top" RenderTransformOrigin="2.05800008773804,0.184000000357628" Height="59" Width="108" Click="Camera_Click" IsEnabled="False"/>

MainPage.xaml.cs

private void img_OnLoaded(object sender, RoutedEventArgs e)
    {
        if (txtFirstName.Text != "" && txtLastName.Text != "")
        {
            try
            {
                imgResume.Source = ImageFromRelativePath(this, Windows.Storage.KnownFolders.PicturesLibrary.Path + ((App)Application.Current).candidate.FirstName + ((App)Application.Current).candidate.FirstName + "Resume.jpg");
                imgResume.UpdateLayout();
            }
            catch
            {
                imgResume.Source = ImageFromRelativePath(this, @"Assets/logo.png");
                imgResume.UpdateLayout();
            }
            btnCamera.IsEnabled = true;
        }
    }

    public static BitmapImage ImageFromRelativePath(FrameworkElement parent, string path)
    {
        var uri = new Uri(parent.BaseUri, path);
        BitmapImage result = new BitmapImage();
        result.UriSource = uri;
        return result;
    }

Camera.xaml.cs

private async void Capture_Click(object sender, RoutedEventArgs e)
    {
        if (mediaCaptureMgr != null)
        {
            string firstName = ((App)Application.Current).candidate.FirstName;
            string lastName = ((App)Application.Current).candidate.LastName;
            string fileName = firstName + lastName + "Resume.jpg";

            Windows.Storage.IStorageFile photo = await Windows.Storage.KnownFolders.PicturesLibrary.CreateFileAsync(fileName, Windows.Storage.CreationCollisionOption.ReplaceExisting);

            await mediaCaptureMgr.CapturePhotoToStorageFileAsync(Windows.Media.MediaProperties.ImageEncodingProperties.CreateJpeg(), photo);

            this.Frame.Navigate(typeof(BasicPersonalInfo));
        }
    }

The img_OnLoaded method in the MainPage.xaml file is attempting to set the image source to the image that I save to the pictures library from the Capture_click method in the Camera.xaml.cs.

My problem is that the picture never shows up on the image on the first page! Please help!

Answer 1

I think this part is the problem:

var uri = new Uri(parent.BaseUri, path);

That seems to try to load the image from the installation folder while your path is a full path, which I believe is not supported for opening files in WinRT and certainly does not work as a Uri even with a baseUri.

You should instead do something like:

var file = await Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync(((App)Application.Current).candidate.FirstName + "Resume.jpg");
var stream = await file.OpenReadAsync();
var bi = new BitmapImage();
bi.SetSource(stream);

return bi;

Answer 2

This may also be helpful to people trying to solve the related problem of updating an Image from a local resource file.

myImage.Source = ImageFromRelativePath(this, "relative_path_to_file_make_sure_build_set_to_content");

public static BitmapImage ImageFromRelativePath(FrameworkElement parent, string path)
{
    var uri = new Uri(parent.BaseUri, path);
    BitmapImage result = new BitmapImage();
    result.UriSource = uri;
    return result;
}

Code is from here.