ByteArrayToImageSourceConverter

The ByteArrayToImageSourceConverter is a converter that allows the user to convert an incoming value from a byte array and returns an ImageSource. This object can then be used as the Source of an Image control.

The Convert method returns the supplied byte[] value converted to an ImageSource.

The ConvertBack method returns the supplied ImageSource value converted to a byte[].

BaseConverter Properties

The following properties are implemented in the base class, public abstract class BaseConverter:

Property	Description
DefaultConvertReturnValue	Default value to return when IValueConverter.Convert(object?, Type, object?, CultureInfo?) throws an Exception. This value is used when CommunityToolkit.Maui.Options.ShouldSuppressExceptionsInConverters is set to true.
DefaultConvertBackReturnValue	Default value to return when IValueConverter.ConvertBack(object?, Type, object?, CultureInfo?) throws an Exception. This value is used when CommunityToolkit.Maui.Options.ShouldSuppressExceptionsInConverters is set to true.

ICommunityToolkitValueConverter Properties

The following properties are implemented in the public interface ICommunityToolkitValueConverter:

Property	Type	Description
DefaultConvertReturnValue	object?	Default value to return when IValueConverter.Convert(object?, Type, object?, CultureInfo?) throws an Exception. This value is used when CommunityToolkit.Maui.Options.ShouldSuppressExceptionsInConverters is set to true.
DefaultConvertBackReturnValue	object?	Default value to return when IValueConverter.ConvertBack(object?, Type, object?, CultureInfo?) throws an Exception. This value is used when CommunityToolkit.Maui.Options.ShouldSuppressExceptionsInConverters is set to true.

Syntax

XAML

Including the XAML namespace

In order to use the toolkit in XAML the following xmlns needs to be added into your page or view:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Therefore the following:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Would be modified to include the xmlns as follows:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

Using the ByteArrayToImageSourceConverter

The ByteArrayToImageSourceConverter can be used as follows in XAML:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
             x:Class="CommunityToolkit.Maui.Sample.Pages.Converters.ByteArrayToImageSourceConverterPage">

    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:ByteArrayToImageSourceConverter x:Key="ByteArrayToImageSourceConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <Image Source="{Binding DotNetBotImageByteArray, Mode=OneWay, Converter={StaticResource ByteArrayToImageSourceConverter}}" />

</ContentPage>

C#

The ByteArrayToImageSourceConverter can be used as follows in C#:

class ByteArrayToImageSourceConverterPage : ContentPage
{
    public ByteArrayToImageSourceConverterPage()
    {
        var image = new Image();

	image.SetBinding(
		Image.SourceProperty,
		new Binding(
			nameof(ViewModel.DotNetBotImageByteArray),
			mode: BindingMode.OneWay,
			converter: new ByteArrayToImageSourceConverter()));

	Content = image;
    }
}

C# Markup

Our CommunityToolkit.Maui.Markup package provides a much more concise way to use this converter in C#.

using CommunityToolkit.Maui.Markup;

class ByteArrayToImageSourceConverterPage : ContentPage
{
    public ByteArrayToImageSourceConverterPage()
    {
        Content = new Image()
            .Bind(
                Image.SourceProperty,
                static (ViewModel vm) => vm.DotNetBotImageByteArray,
                mode: BindingMode.OneWay,
                converter: new ByteArrayToImageSourceConverter());
    }
}

Examples

You can find an example of this converter in action in the .NET MAUI Community Toolkit Sample Application.

API

You can find the source code for ByteArrayToImageSourceConverter over on the .NET MAUI Community Toolkit GitHub repository.