how to set source for an image dynamically from pictures folder in MVVM ?Explain with an example if possible RRS feed

  • Question

  • In my app i require image source to be set from the pictures folder when user clicks on a browse button in MVVM architecture.thanks in advance
    Wednesday, May 1, 2013 3:04 PM


All replies

  • Please use Uri instead of ImageSource since Uri is more portable and consumes less memory when not in use.

    public Uri ImageUri { get; set; }

    And data bind like this:

    <Image Source="{Binding ImageUri}" />

    If you want more help, please show us what do you want to achieve.
    Wednesday, May 1, 2013 3:22 PM
  • The following blog post provides an example  - http://lunarfrog.com/blog/2012/11/21/image-file-binding/


    Wednesday, May 1, 2013 3:34 PM
  • this code will help you...

     private async void GetPicture_FromPicLib()
                StorageFolder folder = KnownFolders.PicturesLibrary;
                StorageFile file =await folder.GetFileAsync("test1.jpg");
                IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);
                BitmapImage img = new BitmapImage();
                this.imgControl.Source = img;

    the "test1.jpg" should be your file name that you are going to access and "imgControl" should be the Name of the img control that u have in the XAML.

    Remember to get permission to access pictures library.

    (from Package.appxmanifest->capabilities tab->check the 'Pictures Library' from left panel)

    pradeep aj

    If it answers, then please vote for it.

    • Edited by Pradeep AJ Wednesday, May 1, 2013 4:36 PM
    • Proposed as answer by Pradeep AJ Wednesday, May 8, 2013 2:27 AM
    Wednesday, May 1, 2013 3:43 PM
  • Get working sample for your question from here,

    Image Source from Pictures Library Dynamically C#

    pradeep aj If it answers, then please vote for it

    • Proposed as answer by Pradeep AJ Wednesday, May 8, 2013 2:27 AM
    Wednesday, May 1, 2013 4:37 PM
  • Hi i tried the same way as explained in the blog but image is not displayed .can you please figure out what s the exact problem?


            <local:CameravVewModel x:Key="CamVM"></local:CameravVewModel>


     <Image  Name="img"  HorizontalAlignment="Center" Source="{Binding bitmapImage,Source={StaticResource CamVM},Mode=TwoWay}"  Stretch="Uniform">

    where CamVM:CameraViewModel class that is declared as page resource


     public BitmapImage bitmapImage
                    return _bitmapImage;
                    //if (_bitmapImage != value)
                        _bitmapImage = value;

                   // }

    public async void selectphoto(object parameter)
             var file = await Windows.Storage.KnownFolders.PicturesLibrary.GetFileAsync("61071_0_990x742.jpg");
             var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
             var img = new BitmapImage();

             bitmapImage = img;


    Wednesday, May 8, 2013 2:22 AM
  • Please let me know how to bind image source in mvvm ?
    Thursday, May 9, 2013 12:55 PM
  • try to publish you solution so we can see the whole picture


    Thursday, May 9, 2013 1:22 PM
  • I know this is an old post, but I've run into an interesting situation and I would like any comments, suggestions.

    I have a ViewModel and created a property of BitmapImage type to hold the actual image loaded from the user's pictures folder.  When I create an observable collection from the ViewModel as my source for a FlipView control, most times, it fails to load the first two images into the property. When I use the flip control and move more than 3 records into the collection, the first two images get loaded because when I go back, they are in the FlipView control.

    eg.  My bound collection has 5 records.  When I Flip to record 4, the image for record 1 gets loaded.  When I go to record 5, the 2nd one gets loaded.

    I can re-create the behavior time after time.

    Dwight Miller

    Monday, January 20, 2014 7:36 PM