support@lune.dev

Want to use over 200+ MCP servers inside your coding tools like Cursor?

Asked 1 month ago by CosmicEngineer364

How can I update the Blazor UI in .NET MAUI from Bluetooth events without excessive calls to StateHasChanged?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm porting my old Xamarin Android Bluetooth app to .NET MAUI and encountering issues updating the Blazor UI when Bluetooth events (like DiscoveryStarted, DeviceFound, DiscoveryFinished) occur.

Although the underlying collection and bool state change, the UI doesn't update automatically. Even wrapping my code in an InvokeAsync call doesn't trigger a UI refresh unless I explicitly call StateHasChanged after every background change.

I prefer to avoid sprinkling InvokeAsync and StateHasChanged calls throughout the code. What’s the best practice for handling UI updates in this scenario?

Below is the code for my Razor page:

RAZOR
@inject IBluetoothService bluetoothService;

@{ 
    if (isDiscovering)
    {
        <button class="btn btn-secondary" @onclick="StopDiscovery">Stop Discovery</button>
    }
    else
    {
        <button class="btn btn-secondary" @onclick="StartDiscovery">Start Discovery</button>
    }
}
<ul class="list-group">
    @foreach (var device in devices)
    {
        <li class="list-group-item">@device</li>
    }
</ul>

@code
{
    private bool isDiscovering = false;
    private ObservableCollection<string> devices = new();

    private async Task StartDiscovery()
    {
        isDiscovering = true;
        await bluetoothService.StartDiscovery(OnDeviceDiscovered, OnDiscoveryFinished);
    }

    private async Task OnDeviceDiscovered(string deviceName)
    {
        await InvokeAsync(() =>
        {
            devices.Add(deviceName);
            StateHasChanged(); // Have to do this before the UI updates
        });
    }

    private async Task OnDiscoveryFinished()
    {
        await InvokeAsync(() =>
        {
            isDiscovering = false;
            StateHasChanged(); // Have to do this before the UI updates
        });
    }

    private void StopDiscovery()
    {
        isDiscovering = false;
    }
}

The injected BluetoothService is implemented as follows:

CSHARP
internal class BluetoothService : IBluetoothService
{
    private readonly BluetoothAdapter? bluetoothAdapter = BluetoothAdapter.DefaultAdapter;
    private readonly global::Android.Content.Context context;
    CustomCode.BluetoothReceiver? bluetoothReceiver = new();

    public bool IsDiscovering { get; private set; }

    public BluetoothService()
    {
        context = global::Microsoft.Maui.ApplicationModel.Platform.CurrentActivity
            ?? global::Microsoft.Maui.MauiApplication.Context;

        if (bluetoothAdapter == null || !bluetoothAdapter.IsEnabled)
            throw new Exception("Bluetooth not available/enabled");

        bluetoothReceiver = new BluetoothReceiver();

        bluetoothReceiver.DiscoveryStarted += BluetoothReceiver_DiscoveryStarted;
        bluetoothReceiver.DiscoveryFinished += BluetoothReceiver_DiscoveryFinished;
        bluetoothReceiver.DeviceFound += BluetoothReceiver_DeviceFound;

        foreach (var action in new[] { BluetoothDevice.ActionFound, BluetoothAdapter.ActionDiscoveryStarted, BluetoothAdapter.ActionDiscoveryFinished, BluetoothDevice.ActionBondStateChanged })
            context.RegisterReceiver(bluetoothReceiver, new global::Android.Content.IntentFilter(action));
    }

    private Func<string, Task> deviceFound;
    private Func<Task> discoveryFinished;
    public Task StartDiscovery(Func<string, Task> deviceFound, Func<Task> discoveryFinished)
    {
        if (IsDiscovering) throw new InvalidOperationException();

        IsDiscovering = true;
        this.deviceFound = deviceFound;
        this.discoveryFinished = discoveryFinished;

        //BluetoothDevices.Clear();
        ActivityCompat.RequestPermissions(global::Microsoft.Maui.ApplicationModel.Platform.CurrentActivity!, [
            global::Android.Manifest.Permission.Bluetooth,
            global::Android.Manifest.Permission.BluetoothAdmin,
            global::Android.Manifest.Permission.BluetoothAdvertise,
            global::Android.Manifest.Permission.BluetoothConnect,
            global::Android.Manifest.Permission.BluetoothPrivileged,
            global::Android.Manifest.Permission.BluetoothScan,
            global::Android.Manifest.Permission.AccessCoarseLocation,
            global::Android.Manifest.Permission.AccessFineLocation,
            //["android.hardware.sensor.accelerometer"]
        ], 1);
        return Task.CompletedTask;
    }

    private async void BluetoothReceiver_DeviceFound(object? sender, Platforms.Android.CustomCode.EventArgs.DeviceFoundEventArgs e)
    {
        if (e.Device?.Name is string name)
            await deviceFound(name);

        // Binding to this collection, and updating it is pointless
        //BluetoothDevices.Add(name);
    }

    private void BluetoothReceiver_DiscoveryFinished(object? sender, EventArgs e)
    {
        // Binding to this variable, and updating it is pointless
        IsDiscovering = false;
        discoveryFinished();
    }

    private void BluetoothReceiver_DiscoveryStarted(object? sender, EventArgs e) { }
}

And here is the BluetoothReceiver for Android:

CSHARP
internal class BluetoothReceiver : BroadcastReceiver
{
    public override void OnReceive(Context? context, Intent? intent)
    {
        switch (intent?.Action)
        {
            case BluetoothDevice.ActionFound:
                if (intent.GetParcelableExtra(BluetoothDevice.ExtraDevice) is BluetoothDevice device)
                    OnDeviceFound(new EventArgs.DeviceFoundEventArgs { Device = device });
                break;
            case BluetoothAdapter.ActionDiscoveryStarted:
                OnDiscoveryStarted(System.EventArgs.Empty);
                break;
            case BluetoothAdapter.ActionDiscoveryFinished:
                OnDiscoveryFinished(System.EventArgs.Empty);
                break;
            case BluetoothDevice.ActionBondStateChanged:
                if (intent.GetParcelableExtra(BluetoothDevice.ExtraDevice) is BluetoothDevice device2)
                {
                    var oldState = (Bond)(int)intent.GetParcelableExtra(BluetoothDevice.ExtraPreviousBondState);
                    var newState = (Bond)(int)intent.GetParcelableExtra(BluetoothDevice.ExtraBondState);
                    OnBondStateChanged(new EventArgs.BondStateChangedEventArgs { Device = device2, OldState = oldState, NewState = newState });
                }
                break;
            case BluetoothDevice.ActionUuid:
                if (intent.GetParcelableExtra(BluetoothDevice.ExtraUuid) is UUID uuid)
                    OnUUIDFetched(new EventArgs.UuidFetchedEventArgs { UUID = uuid });
                break;
        }
    }

    #region DeviceFound
    public event EventHandler<EventArgs.DeviceFoundEventArgs> DeviceFound;
    protected void OnDeviceFound(EventArgs.DeviceFoundEventArgs e)
    {
        if (DeviceFound != null)
            DeviceFound(this, e);
    }
    #endregion
    #region DiscoveryStarted
    public event EventHandler? DiscoveryStarted;
    protected void OnDiscoveryStarted(System.EventArgs e)
    {
        if (DiscoveryStarted != null)
            DiscoveryStarted(this, e);
    }
    #endregion
    #region DiscoveryFinished
    public event EventHandler? DiscoveryFinished;
    protected void OnDiscoveryFinished(System.EventArgs e)
    {
        if (DiscoveryFinished != null)
            DiscoveryFinished(this, e);
    }
    #endregion
    #region BondStateChanged
    public event EventHandler<EventArgs.BondStateChangedEventArgs>? BondStateChanged;
    protected void OnBondStateChanged(EventArgs.BondStateChangedEventArgs e)
    {
        if (BondStateChanged != null)
            BondStateChanged(this, e);
    }
    #endregion
    #region UuidFetched
    public event EventHandler<EventArgs.UuidFetchedEventArgs>? UuidFetched;
    protected void OnUUIDFetched(EventArgs.UuidFetchedEventArgs e)
    {
        if (UuidFetched != null)
            UuidFetched(this, e);
    }
    #endregion
}

EDIT:

I also tried using

CSHARP
MainThread.BeginInvokeOnMainThread(() => BluetoothDevices.Add(name));

but I got the same results.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

Blazor’s render engine doesn’t “listen” for property or collection changes automatically—even if you use an ObservableCollection or implement INotifyPropertyChanged. In Blazor you are responsible for telling the framework when to re‐render the UI (typically via StateHasChanged). That means if your service fires events on background threads, you’ll need to marshal those calls onto the UI thread (which you’re already doing with InvokeAsync) and then trigger a re-render.

That said, here are some approaches to reduce the boilerplate of sprinkling StateHasChanged calls everywhere:

1. Encapsulate UI State Updates in a “State Container”

Create a state container (or “store”) that holds your UI’s shared state (e.g. the discovered devices and flags). The container can expose a change event that your component subscribes to. Then, anytime the state changes, the container raises an event and your component calls StateHasChanged. For example:

CSHARP
public class BluetoothStateContainer
{
    public ObservableCollection<string> Devices { get; } = new();
    public bool IsDiscovering { get; private set; }

    public event Action? OnChange;

    public void SetDiscovering(bool discovering)
    {
        IsDiscovering = discovering;
        NotifyStateChanged();
    }

    public void AddDevice(string device)
    {
        Devices.Add(device);
        NotifyStateChanged();
    }

    private void NotifyStateChanged() => OnChange?.Invoke();
}

In your component you inject the container, subscribe to OnChange in OnInitialized, and unsubscribe in Dispose:

RAZOR
@inject BluetoothStateContainer StateContainer

<ul class="list-group">
    @foreach (var device in StateContainer.Devices)
    {
        <li class="list-group-item">@device</li>
    }
</ul>

@code {
    protected override void OnInitialized()
    {
        StateContainer.OnChange += StateHasChanged;
    }

    public void Dispose()
    {
        StateContainer.OnChange -= StateHasChanged;
    }
}

Then, modify your service to update the state container instead of calling InvokeAsync/StateHasChanged manually. The UI component will re-render automatically when the container changes.

2. Create a Base Component that Automates Re-rendering

Another pattern is to create a base component class that subscribes to change notifications from a shared state object or service. This way you only call StateHasChanged once in your base component’s change handler. You might even create helper methods to update the state on the UI thread. For example:

CSHARP
public class RealtimeComponentBase : ComponentBase, IDisposable
{
    protected override void OnInitialized()
    {
        // Assume SubscribeForUpdates is a method that subscribes to your background events
        SubscribeForUpdates();
    }
    
    protected virtual void SubscribeForUpdates() { }

    protected void NotifyStateChange() => InvokeAsync(StateHasChanged);

    public virtual void Dispose() { }
}

Then derive your Bluetooth component from RealtimeComponentBase and implement the subscription so that when your service state changes you simply call NotifyStateChange(), and the base class takes care of dispatching the update.

3. Accept the Explicit Model

Blazor is intentionally “explicit” regarding UI refreshes. Although it might seem verbose compared to traditional binding in XAML, explicitly calling StateHasChanged (or using InvokeAsync when coming from a non-UI thread) makes the rendering behavior very predictable. In many cases the additional code is minimal compared to the mental overhead of trying to hide these calls.

Summary

There isn’t a “magic” automatic binding system in Blazor for background events. The recommended pattern is to centralize your UI state in a shared container or use a base component class so that updating the UI on background events becomes less scattered in your code. This lets you keep your service “dumb” while your UI layer handles scheduling re-renders in a consistent way.

Pick the approach that best fits your architecture. Both patterns let you avoid manually peppering InvokeAsync/StateHasChanged calls all over your event handlers, while still ensuring the UI stays in sync with your Bluetooth events.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by CelestialWanderer464 • 1 month ago

The method is not async so you can just call it directly. Such as:

CSHARP
private void OnDiscoveryFinished()
{
    isDiscovering = false;
}

And for the ObservableCollection, you can use the CollectionChanged event:

CSHARP
protected override void OnInitialized()
{
    base.OnInitialized();
    devices.CollectionChanged += (s, e) =>
    {
        StateHasChanged();
    };
}

No comments yet.

Discussion

No comments yet.

How can I update the Blazor UI in .NET MAUI from Bluetooth events without excessive calls to StateHasChanged?

2 Answers

1. Encapsulate UI State Updates in a “State Container”

2. Create a Base Component that Automates Re-rendering

3. Accept the Explicit Model

Summary

Discussion

Similar Posts

How can I scroll to the top of PageA when returning from PageB in .NET MAUI?

Why Do CollectionView Items Appear Empty in My Published .NET MAUI App?

How to Disable ImageButton Dimming in MAUI iOS by Setting a Custom Button Type?