javascript - 如何将 View 扩展到 JavaScript/CSS/HTML UPW 元素的标题栏中？

Question

我正在尝试使用基于 JavaScript/CSS/HTML 的 UWP 元素将 View 扩展到标题栏中，但我不知道如何访问正确的 API。在 Github 的 UWP 示例中，我发现了对用 c++ 编写的自定义帮助程序类的引用，但我在 javascript 中对类的引用不起作用。这是我的元素结构

这是我的 javascript

(function () {
    setupPanel();
    configTitlebar();
})();

function setupPanel() {
    Windows.UI.ViewManagement.ApplicationView.preferredLaunchViewSize = { width: 700, height: 320 };
    Windows.UI.ViewManagement.ApplicationView.preferredLaunchWindowingMode = Windows.UI.ViewManagement.ApplicationViewWindowingMode.preferredLaunchViewSize;
}

function configTitlebar() {
    var titleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;
    titleBar.backgroundColor = { a: 0, r: 255, g: 255, b: 255 };
    titleBar.foregroundColor = { a: 255, r: 255, g: 255, b: 255 };
    titleBar.buttonBackgroundColor = { a: 0, r: 255, g: 255, b: 255 };
    titleBar.buttonForegroundColor = { a: 255, r: 255, g: 255, b: 255 };

    var titleBarHelper = CoreViewHelpers.CoreTitleBarHelper.getForCurrentView();
    var extend = extendView.checked;
    titleBarHelper.extendViewIntoTitleBar = extend;
}

当我尝试引用 CoreViewHelpers 时出现此错误

Unhandled exception at line 18, column 5 in ms-appx://3146901b-10fb-4c64-95cb-a923fbe5c04e/js/main.js
0x800a1391 - JavaScript runtime error: 'CoreViewHelpers' is not defined

我正在尝试从他们的(Microsoft)Github 示例中获取此信息:https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/TitleBar/js

Answer 1

要将 View 扩展到 JavaScript UWP 元素的标题栏中，您可以 create a Simple Windows Runtime component and calling it from JavaScript .以下是详细步骤。

在您的解决方案中，您可以创建一个 C# Windows 运行时组件，

namespace TitleBarHelper
{
    public sealed class CoreTitleBarHelper
    {
        public void ExtendViewIntoTitleBar(bool IsExtend)
        {
            var currentview = Windows.ApplicationModel.Core.CoreApplication.GetCurrentView();
            currentview.TitleBar.ExtendViewIntoTitleBar = IsExtend;
        }
    }
}

然后在您的 WinJS UWP 元素中，您应该添加 Windows 运行时组件元素作为引用元素。之后，您可以调用 ExtendViewIntoTitleBar 方法将 View 扩展到标题栏。

"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var isFirstActivation = true;
var helper = new TitleBarHelper.CoreTitleBarHelper();
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.voiceCommand) {
        // TODO
    }
    else if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.arguments) {
            // TODO
        }
        else if (args.detail.previousExecutionState === activation.ApplicationExecutionState.terminated) {
            // TODO
        }
        helper.extendViewIntoTitleBar(true);
    }