Title bar customization

When your app is running in a desktop window, you can customize the title bars to match the personality of your app. The title bar customization APIs let you specify colors for title bar elements, or extend your app content into the title bar area and take full control of it.

How much to customize the title bar

There are two levels of customization that you can apply to the title bar.

For simple color customization, you can set ApplicationViewTitleBar properties to specify the colors you want to use for title bar elements. In this case, the system retains responsibility for all other aspects of the title bar, such as drawing the app title and defining draggable areas.

Your other option is to hide the default title bar and replace it with your own XAML content. For example, you can place text, buttons, or custom menus in the title bar area. You will also need to use this option to extend an acrylic background into the title bar area.

When you opt for full customization, you are responsible for putting content in the title bar area, and you can define your own draggable region. The system Back, Close, Minimize, and Maximize buttons are still available and handled by the system, but elements like the app title are not. You will need to create those elements yourself as needed by your app.

Simple color customization is available to Windows apps using XAML, DirectX, and HTML. Full customization is available only to Windows apps using XAML.

Simple color customization

If you want only to customize the title bar colors and not do anything too fancy (such as putting tabs in your title bar), you can set the color properties on the ApplicationViewTitleBar for your app window.

This example shows how to get an instance of ApplicationViewTitleBar and set its color properties.

This code can be placed in your app’s OnLaunched method (App.xaml.cs), after the call to Window.Activate, or in your app’s first page.

The Windows Community Toolkit provides extensions that let you set these color properties in XAML. For more info, see the Windows Community Toolkit documentation.

There are a few things to be aware of when setting title bar colors:

• The button background color is not applied to the close button hover and pressed states. The close button always uses the system-defined color for those states.
• The button color properties are applied to the system back button when it’s used. (See Navigation history and backwards navigation.)
• Setting a color property to null resets it to the default system color.
• You can’t set transparent colors. The color’s alpha channel is ignored.

Windows gives a user the option to apply their selected accent color to the title bar. If you set any title bar color, we recommend that you explicitly set all the colors. This ensures that there are no unintended color combinations that occur because of user defined color settings.

Full customization

When you opt-in to full title bar customization, your app’s client area is extended to cover the entire window, including the title bar area. You are responsible for drawing and input-handling for the entire window except the caption buttons, which are overlaid on top of the app’s canvas.

To hide the default title bar and extend your content into the title bar area, set the CoreApplicationViewTitleBar.ExtendViewIntoTitleBar property to true.

This example shows how to get the CoreApplicationViewTitleBar and set the ExtendViewIntoTitleBar property to true. This can be done in your app’s OnLaunched method (App.xaml.cs), or in your app’s first page.

This setting persists when your app is closed and restarted. In Visual Studio, if you set ExtendViewIntoTitleBar to true, and then want to revert to the default, you should explicitly set it to false and run your app to overwrite the persisted setting.

Draggable regions

The draggable region of the title bar defines where the user can click and drag to move the window around (as opposed to simply dragging content within the app’s canvas). You specify the draggable region by calling the Window.SetTitleBar method and passing in a UIElement that defines the draggable region. (The UIElement is often a panel that contains other elements.)

Here’s how to set a Grid of content as the draggable title bar region. This code goes in the XAML and code-behind for your app’s first page. See the Full customization example section for the full code.

By default, some UI elements such as Grid do not participate in hit testing when they don’t have a background set. For the grid AppTitleBar in the sample below to allow dragging, we therefore need to set the background to Transparent .

The UIElement ( AppTitleBar ) is part of the XAML for your app. You can either declare and set the title bar in a root page that doesn’t change, or declare and set a title bar region in each page that your app can navigate to. If you set it in each page, you should make sure the draggable region stays consistent as a user navigates around your app.

You can call SetTitleBar to switch to a new title bar element while your app is running. You can also pass null as the parameter to SetTitleBar to revert to the default dragging behavior. (See «Default draggable region» for more info.)

The draggable region you specify needs to be hit testable, which means, for some elements, you might need to set a transparent background brush. See the remarks on VisualTreeHelper.FindElementsInHostCoordinates for more info.

For example, if you define a Grid as your draggable region, set Background=»Transparent» to make it draggable.

This Grid is not draggable (but visible elements within it are): .

This Grid looks the same, but the whole Grid is draggable: .

Default draggable region

If you don’t specify a draggable region, a rectangle that is the width of the window, the height of the caption buttons, and positioned along the top edge of the window is set as the default draggable region.

If you do define a draggable region, the system shrinks the default draggable region down to a small area the size of a caption button, positioned to the left of the caption buttons (or to the right if the captions buttons are on the left side of the window). This ensures that there is always a consistent area the user can drag.

System caption buttons

The system reserves the upper-left or upper-right corner of the app window for the system caption buttons (Back, Minimize, Maximize, Close). The system retains control of the caption control area to guarantee that minimum functionality is provided for dragging, minimizing, maximizing, and closing the window. The system draws the Close button in the upper-right for left-to-right languages and the upper-left for right-to-left languages.

The dimensions and position of the caption control area is communicated by the CoreApplicationViewTitleBar class so that you can account for it in the layout of your title bar UI. The width of the reserved region on each side is given by the SystemOverlayLeftInset or SystemOverlayRightInset properties, and its height is given by the Height property.

You can draw content underneath the caption control area defined by these properties, such as your app background, but you should not put any UI that you expect the user to be able to interact with. It does not receive any input because input for the caption controls is handled by the system.

You can handle the LayoutMetricsChanged event to respond to changes in the size of the caption buttons. For example, this can happen when the system back button is shown or hidden. Handle this event to verify and update the positioning of UI elements that depend on the title bar’s size.

This example shows how to adjust the layout of your title bar to account for changes like the system back button being shown or hidden. AppTitleBar , LeftPaddingColumn , and RightPaddingColumn are declared in the XAML shown previously.

Interactive content

You can place interactive controls, like buttons, menus, or a search box, in the top part of the app so they appear to be in the title bar. However, there are a few rules you must follow to ensure that your interactive elements receive user input.

• You must call SetTitleBar to define an area as the draggable title bar region. If you don’t, the system sets the default draggable region at the top of the page. The system will then handle all user input to this area, and prevent input from reaching your controls.
• Place your interactive controls over the top of the draggable region defined by the call to SetTitleBar (with a higher z-order). Don’t make your interactive controls children of the UIElement passed to SetTitleBar. After you pass an element to SetTitleBar, the system treats it like the system title bar and handles all pointer input to that element.

Here, the TitleBarButton element has a higher z-order than AppTitleBar , so it receives user input.

Transparency in caption buttons

When you set ExtendViewIntoTitleBar to true, you can make the background of the caption buttons transparent to let your app background show through. You typically set the background to Colors.Transparent for full transparency. For partial transparency, set the alpha channel for the Color you set the property to.

These ApplicationViewTitleBar properties can be transparent:

• ButtonBackgroundColor
• ButtonHoverBackgroundColor
• ButtonPressedBackgroundColor
• ButtonInactiveBackgroundColor

The button background color is not applied to the close button hover and pressed states. The close button always uses the system-defined color for those states.

All other color properties will continue to ignore the alpha channel. If ExtendViewIntoTitleBar is set to false, the alpha channel is always ignored for all ApplicationViewTitleBar color properties.

Full screen and tablet mode

When your app runs in full screen or tablet mode, the system hides the title bar and caption control buttons. However, the user can invoke the title bar to have it shown as an overlay on top of the app’s UI. You can handle the CoreApplicationViewTitleBar.IsVisibleChanged event to be notified when the title bar is hidden or invoked, and show or hide your custom title bar content as needed.

This example shows how to handle IsVisibleChanged to show and hide the AppTitleBar element shown previously.

Windows 10 pro missing title bar and part of the top of window

Hello, we are experiencing problems with certain application in windows 10 the top of teh window (the first inch)is missing. the title bar the close minimize button are not there and if there a window underneat it it will close that window instead it happens with file explorer, google chrome, adobe reader dc.

all those apps are up to date the windows are also up to date, i can’t an answer anywhere i tried using system restore but the problem comes back shortly after ( a day or 2 )

I am also experiencing this issue on a Lenovo PC. 4th Generation Intel i3 Processor — Dual screen setup. GeForce 210 GPU. Windows 10 Pro x64 — Latest build.

This is the first report I could find explaining the exact same symptoms.

I have noticed the following:

• This is a rare but extremely frustrating issue.
• It can occur on the top or at the bottom of the window, but not limited to just those areas.
• The issue only occurs with maximised windows and does not seem to affect all apps.
• This problem can be evasive and has been occurring intermittently in the past. It comes and goes depending on what apps are open.
• Some have reported that Office Protected View could be a trigger, but disabling this only works in limited cases.

Troubleshooting Steps Performed: (Since April/May 2018)

• Update Windows
• Update all Affected Apps
• Clean Install new display drivers
• Clean boot
• SFC scan and DISM
• Check event viewer
• Run affected apps in compatibility mode
• Uninstall all OEM software
• Uninstall all non-essential apps
• Uninstall all graphics drivers
• Replace graphics card (AMD and NVIDIA)
• Remove graphics card altogether and run integrated GPU only
• Update BIOS
• Disable CPU Virtualization Features in BIOS
• Replace PC Tower — Latest W10 PRO x64 Clean Install on New PC
• Replace both Monitors with 2x New Identical Monitors — Both connected via digital outputs

Findings:

• None of my troubleshooting steps have yeilded any results. The issue always returns eventually.
• We seriously need some action from Microsoft regarding this issue.

Possible Cause:

Due to the scope of affected apps and the fact that only multiple display setups seem to be affected I suspect this may be a display driver/hardware/configuration compatibility issue/conflict probably related to a recent windows 10 update since build 1703/1803 causing display issues.

Temporary Workarounds:

• This is a quick and easy workaround: SHIFT + CTRL + WIN + B
  • This key sequence empties the video buffer and restarts the driver, and does the same for the keyboard, the mouse and the soundcard. It was meant for helping some users and techs with stuck graphic elements, black screens, stuck sleep modes, stuck mouse buttons and buzzing or looping sounds.
  • The issue will return eventually.
  • Limited success
• Changing the primary monitor or just slightly changing the layout of multiple monitors and clicking apply resolves the issue for an unknown amount of time.
  • Limited success
• When I use shift + right click on the taskbar icon of the affected application and select ‘restore window’ the interface returns, but when I maximise again it the issue returns.
  • This is my personal choice. You can effectively work around the issue by avoiding the symptoms.
  • Any window showing the issue symptoms need to be restored as above and NOT MAXIMISED AGAIN.
  • Snapping Windows to the Left or Right side of a display and resizing them sideways is a quick way of using non-maximised during multi tasking workflows.
  • Success may be limited
• Some apps that support Full screen mode (Not to be confused with maximized mode) can be restored by hitting the F11 key to enable full screen and hitting F11 again to exit full screen. My interface then returns, however, some apps like Acrobat Reader DC does not respond to F11 because it has it’s own full screen shortcut which will also work the same way.
  • This would be my second choice due to how quick you can tap F11 twice.
  • Once you re-open or move the window the symptoms could return (If in maxmised state)
  • Success may be limited

Possible Solution:

• There have been reports that the following third party hotfix fixed the issue. You may want to create a system restore point before trying this:
  • Link — Third Party Hotfix
  • Link — How to create a restore point
  • Limited success
• Changing to a single display setup may get rid of the symptoms completely. Very inconvenient, but may be viable if you can get by with one display and you have no viable/effective workarounds.
  • Not tested yet, but someone can confirm if this helps them.
• The only other effective way I can think of is going back to an earlier (Prior to 1703) build of Windows 10 or even going back to Windows 7/8

What can we do if we want a real solution?

• Please continue to contribute your findings. My research continues. Any response about possible cause and solutions will be of great value to the community.
• We need to get Microsoft’s attention as I believe their operating system is at fault. There is a thread in the feedback hub about this issue: https://aka.ms/AA3ry7p(PLEASE ADD UPVOTES — This may be the only way for MS to pay attention to it)
• Share and Upvote the following threads: (They also contain more insight and other workarounds)
  • https://answers.microsoft.com/en-us/windows/forum/all/windows-terminal-server-2016-multi-monitor/aefbec87-0f5e-4f35-8296-b432d7d7f98b
  • https://answers.microsoft.com/en-us/windows/forum/all/windows-10-multi-monitor-maximized-window/3c2042ef-73df-401c-9a59-65b347d4dbea
  • https://www.reddit.com/r/sysadmin/comments/8imjva/windows_10_multi_monitor_maximized_window/
• Make the issue public knowledge. If you know someone that works for a tech news outlet ask them to do an article about the struggles people are having with this specific issue. The lack of meaningful response and follow-through from MS is absolutely unacceptable.
  • Also share on Microsoft’s public channels: Facebook, Twitter Etc.

TAGS:

dual tripple multiple monitor multi monitor full screen maximize display top bottom toolbar interface menu tool bar toolbar title bar bottom bar status bar missing black white blank transparent maximize