maui-blazor

How to show newly created image in wwwroot on MAUI desktop app?

I have a MAUI/Razor Project for desktop app. When I click the button "create Chart", an new bmp image is created in wwwroot/chart/. But it doesn't show up in the app. Only after I restart the app, it shows up.

How can I make such an image show up immediately after it is created? Maybe something like reload wwwroot?

Razor （ https://www.blazor.zone/image-viewer ）:

@page "/notfallberechnung"

<div class="row">
    <div class="row">
        <div class="col-5">
            <button @onclick="CreateChartAsync">Create Chart</button>
        </div>
    </div>
    <br />
    <br />
    <div class="row">
        <div class="col-5">            
            <ImageViewer Url="@currentChartPath" FitMode="ObjectFitMode.Fill" />
        </div>
    </div>
</div>

cs:

using BootstrapBlazor.Components;
using Microsoft.AspNetCore.Components;
using System.Drawing;

namespace Expo.Pages
{
    public partial class Notfallberechnung : ComponentBase
    {
        private string currentChartPath = "./chart/Mode-5000.bmp";
        public async void CreateChartAsync()
        {
            var n = new Bitmap(314, 314);
            using (var g = Graphics.FromImage(n))
            {                   
                g.DrawString("hallo test", new System.Drawing.Font("Tahoma", 8), new SolidBrush(System.Drawing.Color.Red), 200, 200);
            }
            int length = AppDomain.CurrentDomain.BaseDirectory.LastIndexOf(AppDomain.CurrentDomain.FriendlyName) + AppDomain.CurrentDomain.FriendlyName.Length + 1;
            string sub = AppDomain.CurrentDomain.BaseDirectory.Substring(0, length);
            var fileName = sub + "wwwroot\\chart\\Mode-5000.bmp";
            n.Save(fileName, System.Drawing.Imaging.ImageFormat.Jpeg);              
            StateHasChanged();
        }
    }
}

source code: https://github.com/uliloewi/ForFix

no image. although it is created just now:

enter image description here enter image description here enter image description here enter image description here

after restart:

enter image description here enter image description here

Solution

  • You can use the following code:

    namespace Expo.Pages
{
    public partial class Notfallberechnung : ComponentBase
    {
        private string currentChartPath;
        public async void CreateChartAsync()
        {
            var n = new Bitmap(314, 314);
            using (var g = Graphics.FromImage(n))
            {                   
                g.DrawString("————hallo test", new System.Drawing.Font("Tahoma", 8), new SolidBrush(System.Drawing.Color.Red), 200, 200);
            }
            int length = AppDomain.CurrentDomain.BaseDirectory.LastIndexOf(AppDomain.CurrentDomain.FriendlyName) + AppDomain.CurrentDomain.FriendlyName.Length + 1;
            //string sub = AppDomain.CurrentDomain.BaseDirectory.Substring(0, length);
            string sub = Path.Combine(AppContext.BaseDirectory, "wwwroot", "chart");
            if (!Directory.Exists(sub)) 
            {
                Directory.CreateDirectory(sub);
            }
            //var fileName = sub + "wwwroot\\chart\\Mode-5000.bmp";
            var fileName = Path.Combine(sub, "Mode-5000.bmp");
            n.Save(fileName, System.Drawing.Imaging.ImageFormat.Jpeg);
            StateHasChanged();
            currentChartPath = "./chart/Mode-5000.bmp";
        }
    }
}