Skip to content

Make it obvious that the window doesn't have focus + simplify how the app manages the title bar.#442

Merged
danbelcher-MSFT merged 1 commit intomicrosoft:masterfrom
rudyhuyn:SimplifyTitleBar
Apr 20, 2019
Merged

Make it obvious that the window doesn't have focus + simplify how the app manages the title bar.#442
danbelcher-MSFT merged 1 commit intomicrosoft:masterfrom
rudyhuyn:SimplifyTitleBar

Conversation

@rudyhuyn
Copy link
Copy Markdown
Contributor

@rudyhuyn rudyhuyn commented Apr 6, 2019

Fixes #407 (partially) and #441

Description of the changes:

  • Remove TitleBarHelper and all <Border x:Name="CustomTitleBar" />
  • Let the system defines the draggable region
  • Centralize all events and functions associated to the title bar in a single control TitleBar instead of code splitted between MainPage/TitleBar/HistoryList/Memory.
  • Use the standard title bar when high contrast is activated instead of the custom one.
  • Modify the color of the title when the window doesn't have focus
  • Fix the right padding of the title bar with high contrast

How changes were validated:

  • Manually tested with LtR and RtL languages
  • Manually tested with high contrast
  • Tested when History and Memory flyout are opened

Window without focus - dark
image

Window without focus - light
image

Window without focus - high contrast
image

Right padding fixed with high contrast
image

@rudyhuyn rudyhuyn changed the title Refactoring to simplify how the application manages the title bar Make it obvious that the window doesn't have focus + simplify how the app manages the title bar. Apr 9, 2019
Copy link
Copy Markdown

@danbelcher-MSFT danbelcher-MSFT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Rudy, it looks like this change regresses the position of the text that displays when the docked History/Memory list is empty:
image

@danbelcher-MSFT
Copy link
Copy Markdown

Sidenote, I'd be perfectly fine if this change also disabled the framerate counter in App.xaml.cpp. It's covering the titlebar so I can't see your change! :) In general, I doubt anyone uses it in their day-to-day and if they have need of it, it can be easily enabled.

@rudyhuyn
Copy link
Copy Markdown
Contributor Author

rudyhuyn commented Apr 9, 2019

Hey Rudy, it looks like this change regresses the position of the text that displays when the docked History/Memory list is empty:

Oops! The worst part is that I saw it when I took screenshots and i thought to myself: "What a weird UI, we should change it"... 🤦‍♂️🤦‍♂️🤦‍♂️ I will update it tonight

@rudyhuyn
Copy link
Copy Markdown
Contributor Author

Sidenote, I'd be perfectly fine if this change also disabled the framerate counter in App.xaml.cpp. It's covering the titlebar so I can't see your change! :) In general, I doubt anyone uses it in their day-to-day and if they have need of it, it can be easily enabled.

Yours is giant!
image

But I agree, it's not really something we use daily

@danbelcher-MSFT
Copy link
Copy Markdown

I'll be honest, I don't feel like changing the color of the titlebar text makes much of a difference in noticing if the window is focused or not. Acrylic effect is removed from apps when they lose focus, which is much more noticeable. I do like the rest of the changes in this PR.

@grochocki
Copy link
Copy Markdown
Contributor

I agree that we should not change the title bar visuals when the acrylic effect is enabled, but there are a number of scenarios the system will disable acrylic (i.e., Battery Saver or when transparency effects are explicilty disabled by the user in settings). In those cases, we should make sure that we have a visual indication of window focus.

@danbelcher-MSFT
Copy link
Copy Markdown

I wasn't suggesting that we should not change the title bar visuals when acrylic effect is enabled. I was only commenting that I personally don't feel that changing the text color from black to gray is that noticeable. If we really need to indicate window focus as a feature requirement (shouldn't Windows handle this for apps?), it seems like we could go futher, for example all text could gray and we could gray the accent color. A visual change like that pops across the whole app instead of just the text in the titlebar. I also realize that this is a much more exhaustive change so I'm not expecting Rudy or anyone else to go implement that. Anyways, I wasn't trying to be contentious. Just voicing one opinion.

@rudyhuyn
Copy link
Copy Markdown
Contributor Author

rudyhuyn commented Apr 11, 2019

As Dave explained, there are a lot of scenarios where acrylic is not available, so we need to have a way to distinguish if the windows are focused or not.

in my opinion, for acrylic and titlebar, we should still modify the title bar color even if acrylic is activated:

  • have a consistent UI whether acrylic is enabled or not (in both cases, the unfocused window will look exactly the same)
  • match with colors of minimize, maximize, close buttons
  • what if the battery saver turns on while Calculator is not focused?
  • have a consistent UI with all other applications not using Acrylic
  • make it future proof, Acrylic is currently enabled only when a window is focused (for performance reasons), if the OS team decides to change this behavior in a future update, we would be ready.

But, it's also true that a lot of first party applications using Acrylic don't modify the title color when they lose focus (Settings, Maps, Clock, Movie, Photos, Snip...), but they also have the same issue we are trying to fix, so we should probably not use them as a reference.

I let you decide what you prefer, we are very busy this week with @TurtleShip (👋), I can modify the diff tomorrow night with the behavior you prefer.

@rudyhuyn
Copy link
Copy Markdown
Contributor Author

rudyhuyn commented Apr 11, 2019

I wasn't suggesting that we should not change the title bar visuals when acrylic effect is enabled. I was only commenting that I personally don't feel that changing the text color from black to gray is that noticeable. If we really need to indicate window focus as a feature requirement (shouldn't Windows handle this for apps?), it seems like we could go futher, for example all text could gray and we could gray the accent color. A visual change like that pops across the whole app instead of just the text in the titlebar. I also realize that this is a much more exhaustive change so I'm not expecting Rudy or anyone else to go implement that. Anyways, I wasn't trying to be contentious. Just voicing one opinion.

If you gray everything, users will think that actions/buttons are disabled, while they are not, users should still be able to distinct an enabled/disabled button even when the app is not focused. If it was necessary to click 2 times to do an action when the window isn't focused (the first click enabling the window but the event not forwarded to the UI) , I would agree, but (luckily and contrary to some other OSes) it's not how Windows works, even if the app is not focused, a single click on a button will activate the window and generate a click so we should not "gray" them.

@danbelcher-MSFT
Copy link
Copy Markdown

danbelcher-MSFT commented Apr 12, 2019

If you gray everything, users will think that the actions/buttons are disabled, while they are not, users should still be able to distinct an enabled/disabled button even when the app is not focused.

Great point, let's not have that confusion.

match with colors of minimize, maximize, close buttons

This seems like the best behavior and it's what your PR captures. I checked with a blank UWP app, and the standard titlebar text changes color the same way we do here. The other apps that you called out must have custom titlebars.

I can modify the diff tomorrow night with the behavior you prefer

No need, I think everyone is fine with this change. I did have some feedback to be addressed and then we can get this merged.

@mdtauk
Copy link
Copy Markdown

mdtauk commented Apr 13, 2019

Once Microsoft implements the depth shadows with the windowing, that will help make the focused and unfocused Windows more noticeable I think.

@DragoCubed
Copy link
Copy Markdown

Windows already has a larger/darker shadow for active windows. Windows needs more than that though.

@mdtauk
Copy link
Copy Markdown

mdtauk commented Apr 14, 2019

Windows already has a larger/darker shadow for active windows. Windows needs more than that though.

I know they have some shadowing there, but I am sure I saw it mentioned at Build, that there are plans to bring in the new depth shadows that have been added into XAML for the actual shell windows.

@danbelcher-MSFT
Copy link
Copy Markdown

@rudyhuyn, I have two comments at the top of the thread that I'm still wondering your thoughts on. Looks like there's also merge conflicts that should be fixed up. Almost ready to check this in.

@danbelcher-MSFT
Copy link
Copy Markdown

Hey @rudyhuyn, we're ready to merge this change but there's conflicts to resolve.

@rudyhuyn
Copy link
Copy Markdown
Contributor Author

Hey @rudyhuyn, we're ready to merge this change but there's conflicts to resolve.

thanks for the alert, I will merge tonight!

Copy link
Copy Markdown

@danbelcher-MSFT danbelcher-MSFT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Appreciate the cleanup!

@danbelcher-MSFT danbelcher-MSFT merged commit bd04c92 into microsoft:master Apr 20, 2019
EriWong pushed a commit to EriWong/calculator that referenced this pull request Jun 5, 2019
Fixes microsoft#407 (partially) and microsoft#441

Description of the changes:
Remove TitleBarHelper and all <Border x:Name="CustomTitleBar" />
Let the system defines the draggable region
Centralize all events and functions associated to the title bar in a single control TitleBar instead of code splitted between MainPage/TitleBar/HistoryList/Memory.
Use the standard title bar when high contrast is activated instead of the custom one.
Modify the color of the title when the window doesn't have focus
Fix the right padding of the title bar with high contrast

How changes were validated:
Manually tested with LtR and RtL languages
Manually tested with high contrast
Tested when History and Memory flyout are opened
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Code Cleaning: AppBar, OperatorTextBox and OperandTextBox, TitleBar never used

5 participants