How to set window title for a MAUI Blazor App targeting Windows?

Question

Ive created a small application from the MAUI Blazor app template in MAUI preview 10 and have it targeted and running on windows. I however wish to set the title of the application which I imagined would be done with the Title attribute in the MainPage.xaml ContentPage tag. This however does nothing when starting the application.

Drake

Since mobile devices don't have a window title, if there is a way to set it, it would probably be in Platforms/Windows/App.xaml.cs. (Not to be confused with the other App.xaml.cs in your root folder.) I'm not seeing a built-in way to get at the underlying WinUI 3 window - which is where the title needs to be set. This may be a detail that hasn't been implemented yet. – Gaberdine

Answer 1

public partial class MainApp : Application
{
    public MainApp()
    {
        InitializeComponent();

        MainPage = new MainPage();
    }

    protected override Window CreateWindow(IActivationState activationState)
    {
        var window = base.CreateWindow(activationState);
        if (window != null)
        {
            window.Title = "YOUR WINDOW TITLE";
        }

        return window;
    }
}

Intendance

This is the better answer as of June 2022. – Guberniya

Answer 2

In App.xaml.cs under Platforms -> Windows, the AppWindow can be retreived with some reflection usage. The Title property can then be set on the appwindow instance.

using Microsoft.UI;
using Microsoft.UI.Windowing;
using System;
using WinRT.Interop;
.
.
.
    protected override void OnLaunched(LaunchActivatedEventArgs args)
        {
            base.OnLaunched(args);

            Microsoft.Maui.Essentials.Platform.OnLaunched(args);

            var currentWindow = Application.Windows[0].Handler.NativeView;
            IntPtr _windowHandle = WindowNative.GetWindowHandle(currentWindow);
            var windowId = Win32Interop.GetWindowIdFromWindow(_windowHandle);

            AppWindow appWindow = AppWindow.GetFromWindowId(windowId);
            appWindow.Title = "Title!";
        }

Forsberg

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Timms

I tried your code and while it didn't solve the problem of setting the title, it did extract the appwindow which allowed me to set the title in the end. I'm gonna edit the answer asap and then I will set as answer. – Drake

Found WinUi3's Windows in Application.Windows[0].Handler.NativeView and not to use reflection, type is Microsoft.Maui.MauiWinUIWindow – Forsberg

With the last maui RC update you need to adapt from Application.Windows[0].Handler.NativeView to Application.Windows[0]?.Handler?.PlatformView; – Catamenia

Answer 3

Here for multi target:

using Microsoft.Maui.Devices;

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage = new MainPage();
    }

    protected override Window CreateWindow(IActivationState activationState)
    {
        var window = base.CreateWindow(activationState);
        if (DeviceInfo.Current.Platform == DevicePlatform.WinUI)
        {
            window.Title = System.Reflection.Assembly.GetEntryAssembly().GetName().Name;
        }

        return window;
    }
}

more info: https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/device/information?view=net-maui-7.0&tabs=android#get-the-device-platform

Poolroom

Answer 4

I borrowed from how the <PageTitle>...</PageTitle> tag works in Blazor. It calls some Java Script code to change the <title> tag. Instead, I change the Title property of the main window, this way, you can change the window title on the fly based on the current page.

In App.xaml.cs I store the main window as a static field, and add a public static method to change its title:

public partial class App : Application
{
    private static Window _mainWindow;

    protected override Window CreateWindow(IActivationState activationState)
    {
        _mainWindow = base.CreateWindow(activationState);

        _mainWindow.Title = "My app";

        return _mainWindow;
    }

    public static void TrySetMainWindowTitle(string title)
    {
        if (_mainWindow == null)
            return;
        
        try
        {
            _mainWindow.Title = title;
        }
        catch
        {
            // ignored
        }
    }
}

Then I created a component/tag helper to set the title with:

using Microsoft.AspNetCore.Components;

namespace MyApp.Shared;

public sealed class MauiPageTitle : ComponentBase
{
    [Parameter]
    public string Title { get; set; }

    protected override void OnInitialized()
    {
        App.TrySetMainWindowTitle(Title);
    }
}

Then add the tags to the pages:

<MauiPageTitle Title="My app - Home" />

...

<MauiPageTitle Title="My app - Page 1" />

This works by calling the App.TrySetMainWindowTitle method every time the <MauiPageTitle> component is rendered on a page. I have only tested this on the Windows OS, and my app doesn't have multiple windows, nor does it ever destroy or re-create the main window. If you do, the code might need adjusting.

Comus

Answer 5

Just to inform others if you don't want to create each time a new window, you can do this

    Window window = this.Windows.FirstOrDefault();  
    
    if (window != null)
        return window;
    
    window = base.CreateWindow(activationState);

Commodore

You really need to add more information.... This is no help at all – Trigeminal