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

13
  • 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? Commented Mar 22, 2022 at 2: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. Commented Mar 22, 2022 at 7: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. Commented Mar 22, 2022 at 8: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. Commented Mar 22, 2022 at 9: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. Commented Mar 22, 2022 at 9:23

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.