Exploring W10 APIs – Windows and TitleBar

Windows 10 Technical Preview 2 is finally available, and Microsoft is working hard on bringing new APIs on WinRT, as well as a new, updated modern visual style, the so called MDL (Metro Design Language) v2.
As you might have noticed, lots of mockups introduced in january were showing chromeless windows, and sidebars with the famous « hamburger » menu.
Although the W10 SDK is not available yet (cause it’s simply not ready), you can still use those improvements on your Windows 8.1 apps, using reflection.
/!\ Warning: Those API’s are totally new, and should be used for testing purposes only. I cannot guarantee they will not change in future builds, so it may work now, but fail on new builds.

TitleBar Settings

The ApplicationViewTitleBar

The AppViewTitleBar in W10 Build 9926

The AppViewTitleBar in W10 Build 9926

On Windows 10, there’s a new object called ApplicationViewTitleBar. This is basically the object that represents the « header » of your WinRT app window.

You can get its instance this way:

Set the window header colors

Color properties

BackgroundColor: well, the color of the header background, except the area where there are buttons (hamburger, and max/min/close).
ForegroundColor: sets the defined color to the window title.
ButtonForegroundColor: the foreground color of the buttons, when the mouse isn’t hovering or pressing the buttons.
ButtonBackgroundColor: the color of the buttons background. You can set the same color you defined for BackgroundColor.
ButtonHoverBackgroundColor/ButtonHoverForegroundColor : the color when the mouse is hovering those buttons.
PuttonPressedBackgroundColor/ButtonPressedForegroundColor : the color when the mouse (or finger?) presses the buttons.

How to use them?

Javascript developers are lucky, since the language is dynamic, they just have to do something like

… and it simply works. You just won’t have Intellisense helping you, since those symbols are resolved during runtime.
Set TitleBar colors in a JS app

For C# developers, we’ll have to use reflection APIs.

JSCSharp

Chromeless windows

According to early mockups and screenshots, Spartan (the new Microsoft Browser) will feature a « chromeless » window. That means it doesn’t have a full titlebar, allowing content to fill the entire window.
This feature is really exciting and I already found it useful in one of my future apps (HFR RT v2).

HFR RT v2 prototype, featuring a chromeless window

HFR RT v2 prototype, featuring a chromeless window

To enable this « chromeless » mode, a single line of code is required:
titleBarInst.ExtendViewIntoTitleBar = true;
During my initial testings I noticed some performances problems in this chromeless mode. The resizing of the window seems slower, and it’s understandable as it’s not meant to be used in production code yet.

Next article will feature an analysis of the new controls available on Windows 10.

VLC for Windows 8.1 will get an update in the following weeks

VLC for Windows 8.1 with some nice W10 improvements

VLC for Windows 8.1 with some nice W10 improvements

Another example of a Windows 8.1 Store app that uses W10 TitleBar API: Tweetium

An awesome app, by the way.
tweetium

Microsoft Student Partner, Regional Director — VLC for Windows Store main maintainer — Opuscope co-founder

5 Comments

  1. Pingback: First MSDN Documentation for Windows 10 controls arrive - WMPoweruser

  2. Pingback: First MSDN Documentation for Windows 10 controls arrive | cbnco.biz

  3. Pingback: First MSDN Documentation for Windows 10 controls arrivePOKORNY - POKORNY

  4. Pingback: 微软首批Win10手机控件MSDN文档已发布 – Win10开发,Win10手机系统,Win10预览版 – CNOS_IT

  5. Pingback: First MSDN Documentation for Windows 10 controls arrive | MasToro

  6. Pingback: Primeira documentação do MSDN de controle para Windows 10 - Windows Phone Mais

  7. Pingback: Exploring Windows 10 APIs – Windows and TitleBar

  8. Pingback: Intervista a Thomas Nigro, lo sviluppatore di VLC per Windows Phone | Windows Phone Lover - Rimani aggiornato sulle notizie del mondo Microsoft e Windows Phone

  9. Pingback: [Windows 10] La nueva Title Bar | Javier Suárez | Blog

  10. Pingback: [Windows 10] La nueva Title Bar - Javier Suárez

  11. Pingback: Custom Title Bar Color for native C++ app on Windows 10 - CSS PHP

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *