Select and display xamarin.form.Image in windows phone

Question

I am working on an application for Windows phone 8.1 in Xamarin with mvvmCross. I need to select multiple images from the phone library and display them. I am using FileOpenPicker.SelectMultipleFilesAndContinue to do so. Now i need to be able to display all these images in the view. One problem is that the minimum amount of images must be 20 and the images could be pretty large. First i tried making them into byte arrays and used a converter to display them.

 public async void SelectFotosCallback(FileOpenPickerContinuationEventArgs args) {

        if (args.Files.Count > 0) {

            foreach (StorageFile file in args.Files) {

                IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

                byte[] bytes = null;
                using (var reader = new DataReader(fileStream.GetInputStreamAt(0))) {
                    bytes = new byte[fileStream.Size];
                    await reader.LoadAsync((uint)fileStream.Size);
                    reader.ReadBytes(bytes);
                }

                callback(bytes);
            }              
        }
        else {

        }
    }

This method did seem to work at the first try but as soon as I tried it with 5 images it stopped working. When it was done with the callback the app just quit. No error message or anything. (My guess is an overload in memory.)

After this i found a little solution where i take the byte arrays and make them to Xamarin.Form Images.

public async void SelectFotosCallback(FileOpenPickerContinuationEventArgs args) {
        if (args.Files.Count > 0) {
            foreach (StorageFile file in args.Files) {
                IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);

                byte[] bytes = null;
                using (var reader = new DataReader(fileStream.GetInputStreamAt(0))) {
                    bytes = new byte[fileStream.Size];
                    await reader.LoadAsync((uint)fileStream.Size);
                    reader.ReadBytes(bytes);
                }
                Image image = new Image();
                image.Source = ImageSource.FromStream(() => new MemoryStream(bytes));
                var iets = image.Source.BindingContext;

                callback(image);
            }              
        }
        else {

        }

This seemed to take care of the problem for the overload in memory. the only other problem now is that i can not seem to find any way the display these images.

<GridView ItemsSource="{Binding SelectedImages}">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image Style="{StaticResource imageListImage}" Source="{Binding Source}"/>
                                <Button Style="{StaticResource imageListXButton}">
                                    <Button.Background>
                                        <ImageBrush ImageSource="ms-appx:///Resources/XButton.png"/>
                                    </Button.Background>
                                </Button>
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>

I try to display them with a simple binding. I have not found any way that would work. Does anyone know a way to display these Images and if not what would be the best alternative to use the bytes without using too much memory.

score 0 · Accepted Answer · answered Oct 13 '15 at 09:23

After some deep digging I was able to find the answer. It was a lot simpeler than I thought. I started working with the decodepixel from the BitmapImage. Using a coneverter I set the values.

public object Convert(object value, Type targetType, object parameter, string language) {

        BitmapImage image = (BitmapImage)value;

        image.DecodePixelType = DecodePixelType.Logical;

        if (image.PixelHeight >= image.PixelWidth) {
            image.DecodePixelHeight = 100;
        }
        else {
            image.DecodePixelWidth = 100;
        }
        return image;
    }

The weird thing was that it did work some of the time. But for some reason it didn't work on all the image and it sometimes even threw them away. But after a lot of testing i finally found what I was looking for.

                    BitmapImage bitmap = new BitmapImage();
                    BitmapImage temp = new BitmapImage();

                    bitmap.DecodePixelType = DecodePixelType.Logical;

                    using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) {
                       IRandomAccessStream secondStream = fileStream.CloneStream();
                        BitmapImage temp = new BitmapImage();
                        temp.SetSource(fileStream);
                        if (temp.PixelHeight >= temp.PixelWidth) {
                            bitmap.DecodePixelHeight = 150;
                        }
                        else {
                            bitmap.DecodePixelWidth = 150;
                        }
                        bitmap.SetSource(secondStream);
                    }

For some reason setting the decodepixel after setting the source makes it inconsitent but setting these values before setting the source actually crops the image right away.

This method works perfectly and completely resolves my outofmemory problem

Select and display xamarin.form.Image in windows phone

1 Answers1