Microsoft-ui-xaml: Proposal: Make 1px tooltips and menus borders semi-transparent

Created on 20 Feb 2020  路  3Comments  路  Source: microsoft/microsoft-ui-xaml

Proposal: Make 1px tooltips and menus borders semi-transparent

Currently the tooltips and menus in UWP applications have a grey frame. This does not go well with colored backgrounds, especially dark ones. My suggestion is to take from macOS and some Linux interfaces the solution of using a slightly transparent frame.

Rationale

  • Using a translucent frame looks better than a grey one.
  • No matter what color is in the background, this solution allows for better readability and visual consistency

Just look on examples:

tooltips
tooltips_x4

feature proposal needs-assignee-attention team-Controls

Most helpful comment

This is similar to a suggestion I made before about inner and outer borders for pop-over and flyout surfaces.

Flyout Designs

This ensures with or without a shadow, there is still some kind of border, which doesn't look quite as awkward.

All 3 comments

@chigy FYI

@widersky , thank you for your suggestion.
While it may not work on a colored background, we have a reason why it is the gray (and this very specific color of gray).

We introduced shadow to create contrast between the popup UI and the page. However shadow is something that turns off 1) if user choose to do so, 2) power capability does not allow it. So without the shadow, popup would blend in with the page when it is turned off if the page has the same or similar color.

We carefully examined the color combinations and came up with this gray to be 1) least outstanding, 2) provides the contrast when shadow is off, 3) it doesn't give too much of a line look when shadow is indeed applied.

In an ideal situation, we don't have to have the border to begin with and shadow can handle it, but we do not have such a system in place yet and this is the best design which still keeps our usability promise.

This is similar to a suggestion I made before about inner and outer borders for pop-over and flyout surfaces.

Flyout Designs

This ensures with or without a shadow, there is still some kind of border, which doesn't look quite as awkward.

Was this page helpful?
0 / 5 - 0 ratings