Skip to content

Notification Popups

Damian edited this page Jun 8, 2023 · 7 revisions

Using Avalonia's Popup Notification can easily be integrated into your Prism.Avalonia project. Below, we'll show you just how to do that.

image

For a full sample, check out the Learn Prism Avalonia Outlookish sample project which performs this exact implementation.

Usage

Add to your ViewModel:

using Prism.Commands;
using SampleApp.Services;

namespace SampleApp.ViewModels;

public class DashboardViewModel : ViewModelBase
{
  private readonly INotificationService _notificationService;

  public DashboardViewModel(INotificationService notifyService)
  {
    _notificationService = notifyService;
    Title = "Dashboard";
  }

  public DelegateCommand CmdNotification => new(() =>
  {
    _notification.Show("Hello Prism!", "Notification Pop-up Message.");

    // Alternate OnClick action
    ////_notification.Show("Hello Prism!", "Notification Pop-up Message.", () =>
    ////{
    ////  // Action to perform
    ////});
  });
}

Implement on Avalonia v10.x

To implement, we're going to need to create/modify a few files in your project. First, we're going to need to create a service for calling the Notifications. Next, we need to add a wire-up code in your Main Window class. And finally, register the service.

  1. Services\INotificationService.cs
  2. Services\NotificationService.cs
  3. Views\MainWindow.axaml.cs
  4. App.xaml.cs

Notification Service

INotificationService.cs

using System;
using Avalonia.Controls;

namespace SampleApp.Services
{
  public interface INotificationService
  {
    int NotificationTimeout { get; set; }

    void SetHostWindow(Window window);

    void Show(string title, string message, Action? onClick = null);
  }
}

NotificationService.cs

using System;
using System.Reactive.Concurrency;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Notifications;
using ReactiveUI;

namespace SampleApp.Services
{
  public class NotificationService : INotificationService
  {
    private int _notificationTimeout = 10;
    private WindowNotificationManager? _notificationManager;

    public int NotificationTimeout
    {
      get => _notificationTimeout;
      set
      {
        _notificationTimeout = (value < 0) ? 0 : value;        
      }
    }

    /// <summary>Set the host window.</summary>
    /// <param name="hostWindow">Parent window.</param>
    public void SetHostWindow(Window hostWindow)
    {
      var notificationManager = new WindowNotificationManager(hostWindow)
      {
        Position = NotificationPosition.BottomRight,
        MaxItems = 4,
        Margin = new Thickness(0, 0, 15, 40)
      };

      _notificationManager = notificationManager;
    }

    /// <summary>Display the notification.</summary>
    /// <param name="title">Title.</param>
    /// <param name="message">Message.</param>
    /// <param name="onClick">Optional OnClick action.</param>
    public void Show(string title, string message, Action? onClick = null)
    {
      if (_notificationManager is { } nm)
      {
        // WARNING: If you have a threading issue, try using `Dispatcher.UIThread..` instead of `RxApp..`
        // Dispatcher.UIThread.InvokeAsync(() =>
        // {
        RxApp.MainThreadScheduler.Schedule(() =>
        {
          nm.Show(
            new Notification(
              title,
              message,
              NotificationType.Information,
              TimeSpan.FromSeconds(_notificationTimeout),
              onClick));
        });
      }
    }
  }
}

Main Window

Next, set the host window for notification pop-ups.

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Prism.Ioc;
using SampleApp.Services;

namespace SampleApp.Views
{
  public partial class MainWindow : Window
  {
    private WindowNotificationManager _notificationArea;

    public MainWindow()
    {
      InitializeComponent();
#if DEBUG
      this.AttachDevTools();
#endif

      // Initialize the WindowNotificationManager with the MainWindow
      var notifyService = ContainerLocator.Current.Resolve<INotificationService>();
      notifyService.SetHostWindow(this);
    }

    private void InitializeComponent()
    {
      AvaloniaXamlLoader.Load(this);
    }
  }
}

App.axml.cs

Finally, register the Notification Service that you've created in Step-1 with Prism.

    protected override void RegisterTypes(IContainerRegistry containerRegistry)
    {
      // Services
      containerRegistry.RegisterSingleton<INotificationService, NotificationService>();

      ...
    }