Title bar still not behaving correctly...

[mobycorp]

Description

I just updated my Visual Studio installation to Microsoft Visual Studio Community 2022 (64-bit) - Preview Version 17.3.0 Preview 1.0 hoping that the <Entry IsPassword="True" /> issue would be fixed (the cursor always skips to position 1 and screws the input completely up) - which it is not (I saw where it was fixed but it did not make it into this release but would come out in the GA release... I really hope someone rethinks that decision and can release it during the next RC release....

But, that's not what I am reporting here. When I fired up my app and I have the OnWindowCreated lifecycle event ExtendsContentIntoTitleBar = true I am expecting the window's chrome title bar background to go transparent. I don't want to see the dark strip across the top of the window:

Steps to Reproduce

1. Create a new MAUI app
2. Configure the lifecycle events as follows:

.ConfigureLifecycleEvents (lifecycle => {
#if WINDOWS
    lifecycle
        .AddWindows (windows => {
            _ = windows.OnWindowCreated ((window) => window.ExtendsContentIntoTitleBar = true);

            Config.ExtendsContentIntoTitleBar = true;
        });
#endif
})

3. Run the app...

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

net6.0-windows10.0.1904

Did you find any workaround?

I tried to find the content control in the window control tree and can't find it. Even if I could, there should be a better way to style the color than hacking the visual tree.

Relevant log output

No response

VS bug #1786422

[v-longmin]

@mobycorp Could you share your project for us? Thanks.

[ghost]

Hi @mobycorp. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[mobycorp]

I have placed a repository here:

https://github.com/mobycorp/MobyClientTitleBar

When you run the app, just press the Log In button to get past the login screen... I think I scrubbed this good enough. Let me know if it doesn't work for you...

[mobycorp]

Even though it is not in a HitTest-able region of the window's titlebar, you can still click the Switch control if you hover over the teeny bit that's exposed at the bottom. Toggle that and you can see how the hamburger menu gets all munged up... When you close the toggle, you can see the hamburger menu is over (under) layed by the Flyout Header title...

[v-longmin]

Verified repro on Windows10 with VS 17.3.0 Preview 1.0 [32427.505.main]. Repro project:
MobyClientTitleBar-main.zip

[PureWeen]

@mobycorp I need to research this scenario a bit more

In the meantime you can try removing it via custom templates inside the WinUI XAML

#5811

<maui:MauiWinUIApplication.Resources>
        <DataTemplate x:Key="MauiAppTitleBarContainerTemplate">
            <Grid HorizontalAlignment="Stretch">
                <ContentControl
                    Grid.Column="4"
                    IsTabStop="False"
                    HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    x:Name="AppTitleBarContentControl">
                </ContentControl>
            </Grid>
        </DataTemplate>
    </maui:MauiWinUIApplication.Resources>

And then do something like this in your window created code to clear out where we set that titlebar

Toggle that and you can see how the hamburger menu gets all munged up... When you close the toggle, you can see the hamburger menu is over (under) layed by the Flyout Header title...

What's your overall expectation here? Would it basically be for the hamburger to hide when the flyout is open and then show back up when it's closed?

[mobycorp]

Hi Shane, This is EXACTLY the type of thing I was looking for!!! Thanks for this tip!! Cheers, Steve

…

On Fri, May 13, 2022 at 2:00 PM Shane Neuville ***@***.***> wrote: @mobycorp <https://github.com/mobycorp> I need to research this scenario a bit more In the meantime you can try removing it via custom templates inside the WinUI XAML #5811 <#5811> <maui:MauiWinUIApplication.Resources> <DataTemplate x:Key="MauiAppTitleBarContainerTemplate"> <Grid HorizontalAlignment="Stretch"> <ContentControl Grid.Column="4" IsTabStop="False" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="AppTitleBarContentControl"> </ContentControl> </Grid> </DataTemplate> </maui:MauiWinUIApplication.Resources> And then do something like this in your window created code to clear out where we set that titlebar [image: image] <https://user-images.githubusercontent.com/5375137/168388713-c977a87e-3980-4093-a24f-0c77ae189f09.png> Toggle that and you can see how the hamburger menu gets all munged up... When you close the toggle, you can see the hamburger menu is over (under) layed by the Flyout Header title... What's your overall expectation here? Would it basically be for the hamburger to hide when the flyout is open and then show back up when it's closed? — Reply to this email directly, view it on GitHub <#7123 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOPRYYJC5AHS5EVIDPPIOD3VJ27FXANCNFSM5VZ55RKQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mobycorp]

Hi Shane, I missed your question at the bottom... My expectation is that the page title that is displayed in the title bar would have its margin set in such a way the hamburger menu would not be overlaid. You can still see the hamburger, and it does click, but move the title over x pixels so there is no sharing of real estate in the title bar... I'm still struggling with this suggested approach in that the content control stretches up to the window control buttons (minimize, maximize, and close) and the color behind these buttons is still dark. Also, the content control is not hit testable so I am not able to drag the window by click/hold and move the window by its title bar... I downloaded the Maui source code and found where it seems to be being defined by default in the WindowRootViewStyle.xaml file but nothing jumped out at me as to how the titlebar color is set... Thoughts? Steve

…

On Fri, May 13, 2022 at 2:00 PM Shane Neuville ***@***.***> wrote: @mobycorp <https://github.com/mobycorp> I need to research this scenario a bit more In the meantime you can try removing it via custom templates inside the WinUI XAML #5811 <#5811> <maui:MauiWinUIApplication.Resources> <DataTemplate x:Key="MauiAppTitleBarContainerTemplate"> <Grid HorizontalAlignment="Stretch"> <ContentControl Grid.Column="4" IsTabStop="False" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" x:Name="AppTitleBarContentControl"> </ContentControl> </Grid> </DataTemplate> </maui:MauiWinUIApplication.Resources> And then do something like this in your window created code to clear out where we set that titlebar [image: image] <https://user-images.githubusercontent.com/5375137/168388713-c977a87e-3980-4093-a24f-0c77ae189f09.png> Toggle that and you can see how the hamburger menu gets all munged up... When you close the toggle, you can see the hamburger menu is over (under) layed by the Flyout Header title... What's your overall expectation here? Would it basically be for the hamburger to hide when the flyout is open and then show back up when it's closed? — Reply to this email directly, view it on GitHub <#7123 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOPRYYJC5AHS5EVIDPPIOD3VJ27FXANCNFSM5VZ55RKQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mobycorp]

For example:

[PureWeen]

@mobycorp The area you have in yellow isn't going to be Hit Testable because you are no longer calling SetAppTitleBar

The call to SetAppTitleBar sets up the draggable regions so you can drag the window by that region.

[PureWeen]

@mobycorp you can read more about the custom title bar options here. They also talk about how to set the colors for the caption buttons as well.

https://docs.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3#full-customization

If you set ExtendsContentIntoTitleBar=true without specifying a drag region by calling SetTitleBar with a UIElement the application will create a fallback title bar that only contains the minimum drag region and caption controls.

[mobycorp]

UPDATE: I have found that by using the following style:

<SolidColorBrush
	x:Key="WindowCaptionBackground">Transparent</SolidColorBrush>

The title bar area that appears darker as shown in the screenshot above is now clear. BUT!!! The title bar hit testable region is still only 24 (or 32?) units wide (it needs to be 48 because the MAUI default for the title bar area is 48 units). This means when the shell title bar is shown, the whole title bar area is not hit testable and thus, can't be used to drag the window around on the desktop. This will frustrate users.

I have tried several approaches as laid out in the following WinUI 3 documentation page:

https://docs.microsoft.com/en-us/windows/apps/develop/title-bar?tabs=winui3

This approach does not work because when the MAUI toolbar gets drawn, it is underneath the title bar strip, thus occluding the most of the tool (title) bar, and none of the title bar area is hit testable...

I think what would make this whole thing a lot easier is for you to publish all of the overridable styles there are in the whole Window layout. Those that I can identify are:

WindowCaptionBackground
WindowCaptionBackgroundDisabled

I discovered just by trial and error that

WindowCaptionButtonBackground
WindowCaptionButtonBackgroundDisabled

also work.

In addition to these, in Styles.xaml, there are these properties that can be overridden:

Shell.BackgroundColor
Shell.ForegroundColor
Shell.TitleColor
Shell.DisabledColor
Shell.UnselectedColor
Shell.NavBarHasShadow
Shell.TabBarBackgroundColor
Shell.TabBarForegroundColor
Shell.TabBarTitleColor
Shell.TabBarUnselectedColor

There has to be more than this...

[mobycorp]

And... Here's something I can't replicate because it is so intermittant, sometimes when the app starts, the original title bar is laid out and the title bar can be used to drag the window and the other bits that a title bar is supposed to do and at other times, the title bar is completely missing. I can start and stop the app in succession and sometimes the bar is there and sometimes it is not - and nothing has been changed.....

Here is one activate of the app (notice the yellow highlight above the live preview controls):

Then, simply restarting the app with no changes, the titlebar area is completely missing...

[KCarterSr]

Hi Shane, I missed your question at the bottom... My expectation is that the page title that is displayed in the title bar would have its margin set in such a way the hamburger menu would not be overlaid. You can still see the hamburger, and it does click, but move the title over x pixels so there is no sharing of real estate in the title bar... I'm still struggling with this suggested approach in that the content control stretches up to the window control buttons (minimize, maximize, and close) and the color behind these buttons is still dark. Also, the content control is not hit testable so I am not able to drag the window by click/hold and move the window by its title bar... I downloaded the Maui source code and found where it seems to be being defined by default in the WindowRootViewStyle.xaml file but nothing jumped out at me as to how the titlebar color is set... Thoughts? Steve
…
On Fri, May 13, 2022 at 2:00 PM Shane Neuville @.> wrote: @mobycorp https://github.com/mobycorp I need to research this scenario a bit more In the meantime you can try removing it via custom templates inside the WinUI XAML #5811 <#5811> maui:MauiWinUIApplication.Resources </maui:MauiWinUIApplication.Resources> And then do something like this in your window created code to clear out where we set that titlebar [image: image] https://user-images.githubusercontent.com/5375137/168388713-c977a87e-3980-4093-a24f-0c77ae189f09.png Toggle that and you can see how the hamburger menu gets all munged up... When you close the toggle, you can see the hamburger menu is over (under) layed by the Flyout Header title... What's your overall expectation here? Would it basically be for the hamburger to hide when the flyout is open and then show back up when it's closed? — Reply to this email directly, view it on GitHub <#7123 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AOPRYYJC5AHS5EVIDPPIOD3VJ27FXANCNFSM5VZ55RKQ . You are receiving this because you were mentioned.Message ID: @.>

You said that you downloaded the Maui source code, I've been looking for that to see about the title bar. Do you have a link to that?

[PureWeen]

@mobycorp Once we merge this the experience should be better. Once that's pushed out with NET8 previews if you can test and let me know!