Search code examples
c#xamluwpwin-universal-app

UWP Groove Music Title Bar

How can I make a TitleBar like Groove Music? It has an auto back button with the app name. Additionally, it's NavigationViewPane is extended to the TitleBar.

So I first added: Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

and then make the back button of NavigationView visible. However, there is a known issue with that. Basically, part of that back button is covered by something which makes it only clickable somewhere. Although a solution is provided here, it doesn't seem to have a good compatibility with the AppViewBackButton (for example I only want the AppViewBackButton to be blue) and I couldn't make it work.

Then I tried using SystemNavigationManager.GetForCurrentView().AppViewBackButton but that button doesn't seem to be same as the Groove Music, because that one aligns well with the buttons in the NavigationView. I could redesign the NavigationViewStyle to make them fit but that requires a lot of work (how do I get the size of AppBackButton or how to customize it?). And the OpenPane of the NavigationView has a shadow but I didn't find it in the original style.

Is there a better way to do it?

Solution

  • UWP Groove Music Title Bar

    UWP Groove Music app's back button contains two types, one is NavigateView's BackButton, other is AppViewBackButton.

    for example I only want the AppViewBackButton to be blue

    You could check the back button of Now Playing page, it is AppViewBackButtonthat the background color follow the system setting. You could custom it by switching other color in the Windows colors setting.

    enter image description here

    Update

    The problem is the button is click able control, if you call SetTitleBar method set the button as title bar, the button will disable. Please add the following 

    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

    And remove Window.Current.SetTitleBar(EmptyTitleBar); in NowPlayingFullPage method.