bitmapimagewinui-3imagesource

How do I display a resource property image in <Image>?


I'm trying to display an image I have saved as a resource under the properties category. This property however returns a byte[] which can't be displayed by <Image> since it can't convert it to ImageSource. The code looks like this:

public byte[] MyImage = Properties.ImageResources.MyImage

but plugging MyImage into

<Image Source="{x:Bind MyImage}"

gives me a conversion error as described above.

I've already tried converting the image to a bitmap to display this instead, but I got the very same error. I've read alot about something like

bitmapImage.BeginInit();
bitmapImage.StreamSource = memory;
bitmapImage.CacheOption = BitmapCacheOption.OnLoad;
bitmapImage.EndInit();

but then it tells me it can't resolve any of the BitmapImage Functions -> BeginInit, EndInit, StreamSource and CacheOption.

I've searched far and wide but they all end in this BeginInit() and EndInit() function which do not exist for me.


Solution

  • Thanks to the help of EldHasp I've found a way to make the images appear.

    I have created a data binding converter class that implements the IValueConverter interface:

    public class ByteArrayToBitmapImageConverter : IValueConverter
    {
        public object? Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is not byte[])
            {
                return null;
            }
    
            using var ms = new InMemoryRandomAccessStream();
            using (var writer = new DataWriter(ms.GetOutputStreamAt(0)))
            {
                writer.WriteBytes((byte[])value);
                writer.StoreAsync().GetResults();
            }
    
            var image = new BitmapImage();
            image.SetSource(ms);
            return image;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
    }
    

    Or shorter:

    public object Convert(
        object value, Type targetType, object parameter, string language)
    {
        BitmapImage image = null;
    
        if (value is byte[] buffer)
        {
            using var ms = new MemoryStream(buffer);
            image = new BitmapImage();
            image.SetSource(ms.AsRandomAccessStream());
        }
    
        return image;
    }
    

    It would be used in XAML e.g. like shown below, when MyImage is a public property of the object in the DataContext of the Grid:

    <Grid>
        <Grid.Resources>
            <local:ByteArrayToBitmapImageConverter x:Key="ImageConverter"/>
        </Grid.Resources>
    
        <Image Source="{Binding MyImage, Converter={StaticResource ImageConverter}}"/>
    </Grid>