MVVM: Image Bind Source from FileOpenPicker

Question

I added the OnActivated() into app.xaml.cs it is work correctly:

protected async override void OnActivated(IActivatedEventArgs args)
        {
            var continuationEventArgs = args as IContinuationActivatedEventArgs;
            if (continuationEventArgs != null)
            {
                switch (continuationEventArgs.Kind)
                {
                    case ActivationKind.PickFileContinuation:
                        FileOpenPickerContinuationEventArgs arguments = continuationEventArgs as FileOpenPickerContinuationEventArgs;
                        string passedData = (string)arguments.ContinuationData["keyParameter"];
                        StorageFile file = arguments.Files.FirstOrDefault(); // your picked file
                        addNewPlaceViewModel.OnFilesPicked(file);
                        // do what you want
                        break;
                }
            }
        }

I hooked already FileOpenPicker into MVVM project correctly. This is my code:

private static readonly IEnumerable<string> SupportedImageFileTypes = new List<string> { ".jpeg", ".jpg", ".png" };
    public AddNewPlaceViewModel(INavigationService navigationService)
    {
        this.navigationService = navigationService;
    }
    private async void OnFilesPicked(IStorageFile file)
    {

            if (file != null)
            {
                var bitmapImage = new BitmapImage();
                await bitmapImage.SetSourceAsync(await file.OpenReadAsync());
                Picture = bitmapImage;
                //IN debugger in picture I have sht but in xaml i cannot show this.
            }
        }
    }
    private static void TriggerPicker(IEnumerable<string> fileTypeFilers, bool shouldPickMultiple = false)
    {
        var fop = new FileOpenPicker();
        foreach (var fileType in fileTypeFilers)
        {
            fop.FileTypeFilter.Add(fileType);
        }
        if (shouldPickMultiple)
        {
            fop.PickMultipleFilesAndContinue();
        }
        else
        {
            fop.PickSingleFileAndContinue();
        }
    }

This is situation after Picture = bitmapImage; I have also set up Binding and ICommand:

public ICommand UpdatePictureCommand
        {
            get { return new RelayCommand(o => TriggerPicker(SupportedImageFileTypes)); }
        }
private ImageSource _Picture;
        public ImageSource Picture
        {
            get
            {
                return _Picture;
            }
            set
            {
                _Picture = value;
                OnPropertyChanged("Picture");
            }
        }

And this is my XAML in pivot item(button and Image) when I want to show photo which I have taken.

<Button Grid.Row ="4" 
                    Content="Dodaj zdjęcie" 
                    HorizontalAlignment="Center"
                    Command="{Binding UpdatePictureCommand}"/>
<Image Grid.Row="6"
                Width="192" 
                Height="192" 
                Source="{Binding Picture, Mode=TwoWay}"
                />

A file open picker is working correctly(I can choose or take a photo) but after that I cannot see choosed/taked photo in my XAML. What is going wrong with that code?

Answer 1

you can create a converter something like this

[ValueConversion(typeof(Image), typeof(System.Windows.Media.ImageSource))]
    public class ImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
            {
                return null;
            }

            var bitmap = (Bitmap)value;

            return System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(
                bitmap.GetHbitmap(),
                IntPtr.Zero,
                Int32Rect.Empty,
                BitmapSizeOptions.FromEmptyOptions());
        }


        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }