Can you please provide instructions on how to expand the view in the title bar for a JavaScript/CSS/HTML UPW project?

Struggling to integrate the title bar in a UWP project using JavaScript/CSS/HTML and having trouble accessing the necessary APIs. Came across a custom helper class written in c++ in UWP samples on Github, but unable to reference it in my javascript code. Here's how my project is structured:

https://i.sstatic.net/11LUe.jpg

And this is my javascript code:

(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;
}

Encountering an error when trying to reference 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

Attempting to gather information from Microsoft's Github sample here: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/TitleBar/js

javascriptcssuwp

Answer №1

To expand the view into the title bar within a JavaScript Universal Windows Platform (UWP) project, you have the option to develop a Simple Windows Runtime component and invoke it from JavaScript. Below are the comprehensive steps:

Within your solution, create a C# Windows Runtime component,

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

Subsequently, in your WinJS UWP project, include the Windows Runtime component project as a referenced project. Once done, you can utilize the ExtendViewIntoTitleBar method to stretch the view into the title bar.

"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) {
        // To be implemented
    }
    else if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.arguments) {
            // To be implemented
        }
        else if (args.detail.previousExecutionState === activation.ApplicationExecutionState.terminated) {
            // To be implemented
        }
        helper.extendViewIntoTitleBar(true);
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JQuery to make Google listings easily findable

Implementing Google Places for a location text box has been successful. However, I am now looking to create a class-based implementation so that I can use it with multiple places effortlessly. Is it possible to achieve this using JQuery? <script type ...

javascriptjquery

Having trouble exporting data from Excel using react-data-export

I've been attempting to create an excel export feature, but for some unknown reason, it's not functioning properly. I'm utilizing react-data-export and followed a small test example from this GitHub link, yet the export is not working as exp ...

javascriptreactjsexportexport-to-excel

What is the best way to automatically set today's date as the default in a datepicker using jQuery

Currently utilizing the jQuery datepicker from (http://keith-wood.name/datepick.html), I am seeking to customize the calendar to display a specific date that I select as today's date, rather than automatically defaulting to the system date. Is there a ...

javascriptjquerydatedatepicker

Using a promise inside an Angular custom filter

I am attempting to implement a filter that will provide either a success or error response from the ret() function. The current code is returning {}, which I believe is its promise. .filter('postcode', ['$cordovaSQLite', '$q' ...

javascriptangularjsfilterangular-promise

Assigning a property to the Next.js response object

I recently discovered a fascinating concept involving setting an attribute on the response object within a Next.js API handler and being able to access that attribute in subsequent requests. This functionality took me by surprise as I couldn't find an ...

javascriptsocketsnext.js

Plotting Polyline Path on Google Maps using Angular

I am attempting to create a simple polyline connecting two markers using Angular-google-maps. While I have successfully positioned my two markers, I am encountering some complexity when trying to draw a polyline between them. It seems that my logic may no ...

javascriptangularjsgoogle-mapsangular-google-maps

The "pointer" cursor style is simply not functioning in any way

Here is the angular template code I am working with: <!-- Modal --> <ng-template #levelsmodal let-c="close" let-d="dismiss"> <div class="modal-header"> Select the levels you want to show in the table and chart ...

htmlcssangular

How can the object currently being dragged be chosen using JQueryUI Draggable?

Working with JQueryUI draggable, I am interested in applying styling to the draggable element while it is being dragged. Various attempts have been made using code like this: $(".ui-widget-content").draggable({ drag: function(event, ui) { $(this).cs ...

htmlcssjquery-uijquery-ui-draggable

Having trouble connecting to the webserver? Make sure the web server is up and running, and that incoming HTTP requests are not being blocked by a firewall

While working on my Visual Studio 2013 Asp.Net web code using the Local IIS Web server Version 7 (Windows 7 x64) and Framework 4.0, I encountered an error message stating: "Unable to start debugging on the web server. Unable to connect to the webserver. V ...

javascripthtmlasp.netc#-4.0visual-studio-2013

The "hover" effect is not activating on a carousel

I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...

htmlcsszurb-foundationorbit

Is there a way for me to manually initiate a digest cycle on the parent scope based on my instructions?

I am struggling with getting a directive to render automatically when a change is made to the underlying model programmatically. Using $scope.$apply seems like the right approach, but unfortunately it's not working as expected. The directive only rend ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Fading CSS Hover Popup Display and Hide

I am looking to create a CSS-only popup for an image that will appear when a user hovers over the image with their mouse. After researching on various platforms, such as this thread, I have developed the following solution: a.tooltip span { width: 250 ...

css

What is the best way to send a parameter to the callback function of a jQuery ajax request?

I am facing an issue where I need to pass additional variables to a jQuery ajax callback function. Consider the following scenario: while (K--) { $.get ( "BaseURL" + K, function (zData, K) {ProcessData (zData, K); } ); } func ...

javascriptjqueryajaxcallbackclosures

Find the Time Difference in IST using JavaScript

Is there a way to calculate the time difference between two different time zones in javascript? var startTime = doc.data().startTime; output: Fri Dec 06 2019 19:00:00 GMT+0530 (India Standard Time) var currentTime = new Date(Date.now()).toString(); outpu ...

javascript

Ways to determine if a class is a part of the bootstrap framework

Is there a way to verify if a class like mt-3 or table-left is part of the bootstrap framework? Are there any online resources, tools, or plugins in VSCode that can assist me in determining if a class is a predefined bootstrap keyword? ...

htmlcssvisual-studio-codebootstrap-4bootstrap-5

Guide on utilizing JSON data sent through Express res.render in a public JavaScript file

Thank you in advance for your assistance. I have a question that has been on my mind and it seems quite straightforward. When making an app.get request, I am fetching data from an external API using Express, and then sending both the JSON data and a Jade ...

javascriptjsonexpresspug

Can you guide me on how to export a named function using module.exports?

I have a script file for my discord bot that includes a specific command and a function with parsing logic that I want to reuse in my main index.js // File: ./commands/scrumPrompt.js // The function const extractDeets = function (f, scrum) { let items ...

javascriptnode.jsexpressdiscord.js

Looking to create dynamic pages on NextJS without relying on fixed paths?

I am looking to create a unique user experience by offering discounts on my website based on the users' citizenship ID numbers. By using their ID number, I can customize the discount amount according to factors such as location, age, and gender. User ...

javascriptnext.jsdynamic-routing

"Converting a standard grammar with recursion and alternations into a regular expression: A step-by-step

A grammar is considered regular if it follows either a right-linear or left-linear pattern. According to this tutorial, this type of grammar possesses a unique property: Regular grammars have a special characteristic: through the substitution of every no ...

javascriptecmascript-nextcompiler-construction

Transferring data to a child component through Route parameters

Although I have come across numerous questions and answers related to my query, I still seem unable to implement the solutions correctly. Every time I try, I end up with an 'undefined' error in my props. Let's take a look at my parent compo ...

javascriptreactjsreact-router