Note: your mileage may vary, and I’m interested to hear your results. What I’m posting here comes from the fact that pretty much nothing I saw online actually worked for setting the color of the Windows title bar, or the sample was so complex it couldn’t be easily reused. I literally spent days trying to find something that actually works so I hope this helps.
Let’s get down to business. Here’s the TL;DR. The key to all of this is using a DataTemplate in your Platform/Windows/App.xaml called MauiAppTitleBarTemplate. If you define this, it will be used as your UI for the Windows titlebar. Read on for more details.
I have posted a sample on GitHub here billreiss/maui8titlebar (github.com)
As noted above, the easiest solution is to just define a DataTemplate with the key MauiAppTitleBarTemplate, and make it look however you want. Something like this:
<maui:MauiWinUIApplication
x:Class="MauiWindowsTitlebarSample.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui">
<maui:MauiWinUIApplication.Resources>
<DataTemplate x:Key="MauiAppTitleBarTemplate">
<Grid HorizontalAlignment="Stretch" Background="Yellow">
<TextBlock x:Name="AppTitle" Text="Hi" Margin="5"/>
</Grid>
</DataTemplate>
</maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>
Note: This XAML is NOT MAUI XAML. This is WinUI3 XAML, and so you see TextBlock instead of Label, etc. Your template here will need to conform to WinUI3, and not MAUI.
By just adding this DataTemplate, you would have a yellow background on your Windows title bar. If that’s all you need, stop here.
What I found though is that it’s not easy to modify these values, so let’s say I wanted to be able to set the title bar color based on some configuration or be able to modify the title bar title through code. Based on this, I have created a simple library that you can add to your own project, and it lets you set the title bar color and title text by calling static methods.
How I implemented it was that I created a TitleContainer class that inherits from Grid, and if you use it as the root element in your MauiAppTitleBarTemplate, then you can easily call methods to set the title bar color and the title text. You could easily extend this implementation to let you have an app icon, a dropdown menu in your title bar, or anything else.
First, you will want to take the MauiWindowsTitlebar project from the sample (listed above) and add it to your project as a project reference. Then you will modify your Platforms/Windows/App.xaml as follows:
<maui:MauiWinUIApplication
x:Class="MauiWindowsTitlebarSample.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui"
xmlns:titlebar="using:MauiWindowsTitlebar.Platforms.Windows">
<maui:MauiWinUIApplication.Resources>
<DataTemplate x:Key="MauiAppTitleBarTemplate">
<titlebar:TitleContainer HorizontalAlignment="Stretch">
<TextBlock x:Name="AppTitle" Text="Hi" Margin="5"/>
</titlebar:TitleContainer>
</DataTemplate>
</maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>
The important parts are the declaring of the titlebar namespace and then the use of the titlebar:TitleContainer as the root object for data template. The other important thing is that the TitleContainer class knows about the AppTitle name, and assumes that is what’s going to contain the title of the app. So as long as you include a TextBlock named AppTitle in your template, you can set the title.
Now that we are using TitleContainer, we can add this code to set the titlebar color and the title text (I do this in MauiProgram.cs but as long as you are on the UI thread it should work):
#if WINDOWS
TitleContainer.SetTitle("MauiWindowsTitlebarSample");
TitleContainer.SetTitlebarColor(Colors.Yellow);
#endif
Note: SetTitlebarColor takes a MAUI Color instead of a WinUI3 Color, just trying to make it a little easier to call into it.
If there were multiple windows, the TitlebarContainer class would need to be modified to handle a list of title bars, feel free to submit a PR to the repository for that or any other improvements you may have.
Pingback: Dew Drop – November 20, 2023 (#4072) – Morning Dew by Alvin Ashcraft