UWP Groove 音乐标题栏

Posted 2023-04-12

【中文标题】UWP Groove 音乐标题栏

【英文标题】：UWP Groove Music Title Bar

【发布时间】：2020-01-12 21:39:48

【问题描述】：

如何制作像 Groove Music 这样的TitleBar？它有一个带有应用程序名称的自动后退按钮。此外，它的NavigationViewPane 扩展为TitleBar。

所以我首先添加了： Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;

然后使NavigationView 的后退按钮可见。但是，有一个known issue。基本上，该后退按钮的一部分被某些东西覆盖，使其只能在某处点击。虽然这里提供了solution，但它似乎与AppViewBackButton 没有很好的兼容性（例如我只希望AppViewBackButton 是蓝色的）并且我无法使其工作。

然后我尝试使用SystemNavigationManager.GetForCurrentView().AppViewBackButton，但该按钮似乎与 Groove Music 不同，因为该按钮与NavigationView 中的按钮很好地对齐。我可以重新设计NavigationViewStyle 以使其适合，但这需要大量工作（如何获得 AppBackButton 的大小或如何自定义它？）。而且NavigationView的OpenPane有阴影但是我没找到原来的样式。

有没有更好的方法？

【问题讨论】：

嗨 Seaky，可以分享屏幕截图来解释 后退按钮的一部分被某些东西覆盖，使其只能在某处点击。？

@NicoZhu-MSFT 对不起，因为我没有研究那个解决方案，所以我不能轻易地发布截图。但是我的意思是如果我在TitleBar中有一个自定义按钮，TitleBar中的区域不能点击，而下面的区域可以。

@NicoZhu-MSFT 你好 Nico，我在NowPlayingFullPage 中自定义了一些标题栏。你能明白为什么那个 BackButton 不可点击吗？

好的，我会检查的。

问题是按钮是可以点击控制的，如果你调用SetTitleBar方法，按钮会失效。请在NowPlayingFullPage方法中添加CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;并删除Window.Current.SetTitleBar(EmptyTitleBar);。

【参考方案1】：

UWP Groove 音乐标题栏

UWP Groove Music 应用的返回按钮包含两种类型，一种是 NavigateView 的BackButton，另一种是AppViewBackButton。

例如，我只希望AppViewBackButton 是蓝色的

您可以查看正在播放页面的返回按钮，它是AppViewBackButton，背景颜色遵循系统设置。您可以通过在 Windows 颜色设置中切换其他颜色来自定义它。

更新

问题是按钮是可点击控制的，如果你调用SetTitleBar方法设置按钮为标题栏，按钮会失效。 请添加以下内容

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

并在 NowPlayingFullPage 方法中删除 Window.Current.SetTitleBar(EmptyTitleBar);。

【讨论】：

感谢您的更新。但是，如果我删除它，那么我的标题栏将变得不可拖动。

标题栏应该是固定的，我认为可拖动不是好习惯。

我的意思是应用程序窗口没有 SetTitleBar 是不可拖动的。这样，当我按下标题栏时，我可以拖动窗口。对困惑感到抱歉。我已将IsHitTestVisible 设置为true。

是的，我可以重现你的问题，这个场景确实有问题，请检查 Groove music now playing page ，返回按钮是AppViewBackButton，我认为更好的方法是使用 AppViewBackButton喜欢 Groove 音乐。

详细步骤请参考blog。

【参考方案2】：

只需将我在 NicoZhu 帖子下的评论变成答案即可。

要创建像 Groove 音乐这样的标题栏，您需要对其进行自定义。并根据代码here at the bottom修改你的代码。

此外，如果您需要切换页面，最好将其添加到您将要切换的页面的Page_Loaded 事件中，以便您的标题栏可拖动：

Window.Current.SetTitleBar(AppTitleBar);