2

I migrated my UWP Application to WinUI3 / AppSDK with a custom titlebar. I followed the example in the documentation here: https://learn.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3#title-bar-components

Designwise it works. But now I noticed that the caption buttons (min, max, close) do not work. I can click them and for example the close button becomes red on click so it is not covered. But nothing happenes. Which is weird since from the documentation those should always be handled by the system.

The code of my MainWindow looks like this:

<Window
    x:Class="MoneyFox.Win.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="34" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid x:Name="AppTitleBar" Margin="0,0,120,0" Background="{ThemeResource TitleBarBrush}">
            <TextBlock x:Name="AppTitleTextBlock" Text="Money Fox"
                       Style="{StaticResource CaptionTextBlockStyle}"
                       Margin="12,0,0,0" VerticalAlignment="Center" />
        </Grid>

        <Frame Grid.Row="1" x:Name="ShellFrame" />
    </Grid>
</Window>

And the code behind:

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        ExtendsContentIntoTitleBar = true;
        SetTitleBar(AppTitleBar);

        RootFrame.Navigate(typeof(ShellPage), null);
    }
}

This is with Windows AppSDK 1.0.0 and 1.0.1.

EDIT: As Roy Li pointed out, it works when I remove the Margin="0,0,120,0" which is also used in the docs for that sake. But then the title is no longer visible. But that seems very weird. I played around with the width's and for example with Margin="0,0,80,0" minimize does work, but close and maximize not. I also added a background color to see where the grid is to be sure it doesn't overlay the caption buttons or something like that: enter image description here

EDIT 2: OneDrive Link to a Repro Project: https://1drv.ms/u/s!Ang3D30bKDOhqfQVfrORlAVxleTVeA?e=IqqMyv

NPadrutt
  • 3,619
  • 5
  • 24
  • 60
  • I modified(remove all the styles) and tried the code you post. The system buttons are working correctly in the MainWindow(I did not navigate to another page). Have you tried to simplify the code to narrow down the scope to see if it is related to the style or something else? – Roy Li - MSFT Mar 22 '22 at 02:42
  • Hey @RoyLi-MSFT thanks for the tipp. that is kinda weird. It seems to be related to the margin of the grid. I updated my post with more information. I don't know if you can make sense of that. For me it looks quite weird. – NPadrutt Mar 22 '22 at 07:31
  • Actually, I just removed the ` Style="{StaticResource CaptionTextBlockStyle}"` and changed `Background="Red`. Then the code will work. Then the whole titlebar will work correctly. – Roy Li - MSFT Mar 22 '22 at 08:18
  • mmh, that is interesting. that doesn't work for me. Are you on windows 10 or 11? I think on Win11 there was a change in the API. – NPadrutt Mar 22 '22 at 09:15
  • I'm running on windows 11. Which version are you testing now? After removing the style, and changing the background to red, I could see the red title bar, it fills the whole area except the system buttons. – Roy Li - MSFT Mar 22 '22 at 09:23
  • Yeah I found the reason for the red part not being stretched in a custom color style. But the main problem still is the margin. When I create a new project and only add the XAML without any style and fix background red it does work. But as soon as I add the `Margin="0,0,120,0"` the caption button stops working again. – NPadrutt Mar 22 '22 at 11:44
  • I added a link to a repor project in my original post. – NPadrutt Mar 22 '22 at 11:46
  • It's really interesting. I downloaded the sample you shared. The app3 (packaged) project works well on my side. The system buttons, minimize, maximize, close, all of the buttons are working correctly. Are you testing on windows 11 as well? – Roy Li - MSFT Mar 23 '22 at 02:56
  • That is interesting. I'm on Windows 11 as well. – NPadrutt Mar 23 '22 at 08:39
  • Hi, I found another windows 10 device to test but it also works well. Do you have another device to test? Does every project that you created have the same issue? – Roy Li - MSFT Mar 25 '22 at 05:48
  • I tested it on my pc and my laptop on Windows 11 and both do not work. Funny enough on my work pc with windows 10 it does. I have to say I'm confused ^^ – NPadrutt Mar 25 '22 at 14:49
  • Emm, really confused. But at least it proves it could work in some scenarios. That's a very interesting behavior. Could you please submit an issue in the [WinUI Github](https://github.com/microsoft/microsoft-ui-xaml/issues) so the WinUI team could check this issue? – Roy Li - MSFT Mar 28 '22 at 06:27
  • https://github.com/microsoft/microsoft-ui-xaml/issues/6895 – NPadrutt Mar 29 '22 at 17:06

1 Answers1

0

As noted in the documentation, in the "Interactive Content" section, on the WinUI tab, "This means that you can't interact with elements in the title bar area except through keyboard input and focus. We don't recommend this because it presents discoverability and accessibility issues."

In other words, it doesn't work.

sjb-sjb
  • 1,112
  • 6
  • 14