Image not displaying in .NET MAUI Mac Catalyst

Question

I'm trying to display an image to make my own custom splash screen using .NET MAUI. It is made in C# and does not use XAML. Here is my code:

SplashScreenActivity.cs:

using System;
using System.Text;

namespace LiveEditorHTML
{
    public partial class SplashScreenActivity : ContentPage
    {
        Image splashScreenImage;

        public async Task<string> ShowMsg(string title,
            string msg, bool isQuestion, bool isInput,
            int? num, string[]? question)
        {
            bool answer;
            if (isQuestion && !isInput)
            {
                answer = await DisplayAlert(title, msg, "Yes", "No");

                return answer.ToString();
            }
            else if (!isQuestion && !isInput)
            {
                await DisplayAlert(title, msg, "OK");
            }
            else if (!isQuestion && isInput)
            {
                string action = await DisplayActionSheet(
                    title + msg, "Cancel",
                    null, question
                    );
            }
            else
            {
                await DisplayAlert(title, msg, "OK");
            }

            return null;
        }

        public SplashScreenActivity()
        {
            var uiView = new ScrollView();
            var stackLayout = new VerticalStackLayout();

            var img = AssetsHelper.LoadMauiAsset("logo.png").Result;

            Task.Run(() =>
            {
                string output = ShowMsg("Debug", img, false, false, 0, null).Result;
            });

            byte[] byteArray = Encoding.UTF8.GetBytes(img);

            MemoryStream stream = new MemoryStream(byteArray);

            splashScreenImage = new Image()
            {
                Source = ImageSource.FromStream(() => stream)
            };

            stackLayout.Children.Add(splashScreenImage);

            this.Content = uiView;
        }
    }
}

AssetsHelper.cs:

using System;
namespace LiveEditorHTML
{
    public class AssetsHelper
    {
        public static async Task<string> LoadMauiAsset(string fileName)
        {
            using var stream = await FileSystem.OpenAppPackageFileAsync(fileName);
            using var reader = new StreamReader(stream);

            var contents = reader.ReadToEndAsync();

            return contents.Result;
        }
    }
}

Here is the image I used, created with GIMP, the image size is 456x456 (the same as the image sizes of the appicon.svg and appiconfg.svg files located at: Resources\AppIcon):

The ShowMsg() function is used to create a MessageBox like C# Winforms, in addition, it is also used for the cases of creating a Yes No questionnaire, and creating a questionnaire that requires the user to enter text. Currently, I just use the simplest feature, like the MessageBox in C# Winforms, which is to print a debug message, with the title Debug and the content as an image file that is read with the help of the AssetsHelper.cs support class.

When I run the program, the Debug window for printing information pops up, indicating that it is working, the file logo.png (with path at Resources\Raw) has been read successfully:

But then nothing is displayed:

I highly suspected that there might be an error, but no exceptions occurred, so I used the built-in image: dotnet_bot.svg to test (link at: Resources\Images). I replaced the following line in SplashScreenActivity.cs:

  ImageSource.FromStream(() => stream)

Fort:

"dotnet_bot.svg"

The code becomes:

     splashScreenImage = new Image()
     {
         Source = "dotnet_bot.svg"
     };

to test. When I turn on the app and go through the Debug screen (since I haven't dropped the code that shows the Debug dialog), they don't work either:

And no exception is thrown. The app doesn't crash either.

All versions of .NET MAUI and VS are updated and VS is the latest Preview version. The computer I'm using is a Macbook Pro running macOS Monterey 12.5.1

So what's going on?

Answer 1

I had create a sample to test your code and the image can't show either. I found that you have changed the image file to the string, and then changed the string to the byte array.

You can try to convert the image to the byte array or set the image as the source directly. In addition, you didn't add the stacklayout into the scrollview. So you should add it or set the stacklayout as the page.content.

1. Set the image as the source directly

    splashScreenImage = new Image()
        {
            Source = "test" // the test.png is in the /Resource/Image folder
        };
        stackLayout.Children.Add(splashScreenImage);
        this.Content = stackLayout;
   

2.Convert the image to the byte array directly

     public static async Task<byte[]> LoadMauiAsset(string fileName)
    {
        using var stream = await FileSystem.OpenAppPackageFileAsync(fileName);
        byte[] buffer = new byte[stream.Length];
        stream.Read(buffer, 0, buffer.Length);
        return buffer;
    }

     MemoryStream stream = new MemoryStream(AssetsHelper.LoadMauiAsset("test").Result);
        splashScreenImage = new Image()
        {
            Source = ImageSource.FromStream(() => stream)
        };
      stackLayout.Children.Add(splashScreenImage);
      this.Content = stackLayout;