UI Suggestion: Visually link tab to console view #984

6088134832/src/cascadia/TerminalApp/App.cpp (L643-L644)

@ghosty141 commented on GitHub (May 11, 2019):

So I'm currently hacking around with this but I found one issue that most likely makes this kinda hard to implement: The tab bar is not using the acrylic effect (yet). This makes the opacity of the tab (thus the color) not match the rest of the window. But there is hope! They seem to have this on the radar, I found this comment:

Here is how I did it (acrylic needs to be off else it looks bad): 2cc95d5b36

@ghosty141 commented on GitHub (May 11, 2019): So I'm currently hacking around with this but I found one issue that most likely makes this kinda hard to implement: The tab bar is not using the acrylic effect (yet). This makes the opacity of the tab (thus the color) not match the rest of the window. But there is hope! They seem to have this on the radar, I found this comment: https://github.com/microsoft/Terminal/blob/6088134832b851c553af791ee17a9b5c0d808385/src/cascadia/TerminalApp/App.cpp#L643-L644 Here is how I did it (acrylic needs to be off else it looks bad): https://github.com/Ghosty141/Terminal/commit/2cc95d5b360653f0766534a6205d0b6b99e85796

claunia commented

@mdtauk commented on GitHub (May 11, 2019):

I believe it's using a XAML Island, but there are other surfaces that can use Acrylic, and I'm sure as WinRT's presentation platform becomes open source in WinUI 3.0 - this will become more possible.

But thinking about where the app is heading now, will hopefully drive things forward.

@mdtauk commented on GitHub (May 11, 2019): I believe it's using a XAML Island, but there are other surfaces that can use Acrylic, and I'm sure as WinRT's presentation platform becomes open source in WinUI 3.0 - this will become more possible. But thinking about where the app is heading now, will hopefully drive things forward.

claunia commented

@ghosty141 commented on GitHub (May 11, 2019):

@mdtauk What I'm saying is that changing the tab color "can" only be done once the tab bar is using the acrylic effect. One big problem is that the tabbar currently gets style according to the theme the user uses. The use of acrylic is done per profile while the tabbar exists only once. So unless the UI gets changed quite a bit, this will probably take a while.

@ghosty141 commented on GitHub (May 11, 2019): @mdtauk What I'm saying is that changing the tab color "can" only be done once the tab bar is using the acrylic effect. One big problem is that the tabbar currently gets style according to the theme the user uses. The use of acrylic is done per profile while the tabbar exists only once. So unless the UI gets changed quite a bit, this will probably take a while.

claunia commented

@mdtauk commented on GitHub (May 11, 2019):

Yea I get that, but the window itself is a Win32 window, so XAML acrylic brushes are a bit difficult.

The app would have to extend into the titlebar area and the window colour would need to be the Host Acrylic matching the RequestedTheme.

But yes, matching tab colour to the console is a start, and removing the tab background colour, and ensuring the inactive tabs show up well using ThemeResources

@mdtauk commented on GitHub (May 11, 2019): Yea I get that, but the window itself is a Win32 window, so XAML acrylic brushes are a bit difficult. The app would have to extend into the titlebar area and the window colour would need to be the Host Acrylic matching the RequestedTheme. But yes, matching tab colour to the console is a start, and removing the tab background colour, and ensuring the inactive tabs show up well using ThemeResources

claunia commented

@DHowett-MSFT commented on GitHub (May 11, 2019):

Funny enough, the code @ghosty141 changed ("how to set a brush maybe?") is code I wrote when testing this exact feature.

If you get the actual brush from the background of the terminal control, you can copy the acrylic effect directly into the tab. Use the same acrylic setup as is in TerminalControl -- create a HostBackdropAcrylicBrush, give it a tint and opacity, and set that as the background brush.

Ideally, we'd be using a .xaml file and xaml "theme resources" instead of pushing brushes directly into controls at runtime. 😄

@DHowett-MSFT commented on GitHub (May 11, 2019): Funny enough, the code @ghosty141 changed ("how to set a brush maybe?") is code I wrote when testing this exact feature. If you get the _actual brush_ from the background of the terminal control, you can copy the acrylic effect directly into the tab. Use the same acrylic setup as is in `TerminalControl` -- create a `HostBackdropAcrylicBrush`, give it a tint and opacity, and set that as the background brush. Ideally, we'd be using a `.xaml` file and xaml "theme resources" instead of pushing brushes directly into controls at runtime. :smile:

claunia commented

@mdtauk commented on GitHub (May 11, 2019):

ThemeResources would automatically refresh upon the user setting the theme. Until Win32 gets official support, you'll have to redraw and detect the change

@mdtauk commented on GitHub (May 11, 2019): ThemeResources would automatically refresh upon the user setting the theme. Until Win32 gets official support, you'll have to redraw and detect the change

claunia commented

@zadjii-msft commented on GitHub (May 13, 2019):

I think this would be a really cool setting.

If someone wanted to to go ahead an implement this, they'd probably need to:

add a GetBackgroundBrush method to TermControl, in the .idl, .h and .cpp files.
Then when the control is focused (when the tab changes), you'd need to change the background of the tab to control's brush. When it's unfocused, you'd need to remove this brush (somehow).
Then, I'd add a setting to enable this feature, since not everyone's going to want their terminal to look this way. I'd make it a global setting, so see GlobalAppSettings. I'm okay defaulting this behavior to on, but if people have problems with that, we can discuss it on the PR :)

@zadjii-msft commented on GitHub (May 13, 2019): I think this would be a really cool setting. If someone wanted to to go ahead an implement this, they'd probably need to: * add a `GetBackgroundBrush` method to `TermControl`, in the `.idl`, `.h` and `.cpp` files. * Then when the control is focused (when the tab changes), you'd need to change the background of the tab to control's brush. When it's unfocused, you'd need to remove this brush (somehow). * Then, I'd add a setting to enable this feature, since not everyone's going to want their terminal to look this way. I'd make it a global setting, so see `GlobalAppSettings`. I'm okay defaulting this behavior to on, but if people have problems with that, we can discuss it on the PR :)

claunia commented

@ghosty141 commented on GitHub (May 14, 2019):

@zadjii-msft Thanks for the help! I'm currently working on it and trying to get the changing of the background to work.

@ghosty141 commented on GitHub (May 14, 2019): @zadjii-msft Thanks for the help! I'm currently working on it and trying to get the changing of the background to work.

claunia commented

@miniksa commented on GitHub (May 14, 2019):

This is another department where @cinnamon-msft might want to weigh in on what this should look like relative to the design mockups we've already prepared.

@miniksa commented on GitHub (May 14, 2019): This is another department where @cinnamon-msft might want to weigh in on what this should look like relative to the design mockups we've already prepared.

claunia commented

@jamers99 commented on GitHub (Jul 2, 2019):

Daaaanng i like that mockup. When is this coming to the version in the Store??

@jamers99 commented on GitHub (Jul 2, 2019): Daaaanng i like that mockup. When is this coming to the version in the Store??

claunia commented

@AkazaRenn commented on GitHub (Feb 26, 2022):

For those who enabled Acrylic effects, can we also have it on the active tab BG?

@AkazaRenn commented on GitHub (Feb 26, 2022): For those who enabled Acrylic effects, can we also have it on the active tab BG?

claunia commented

@ghost commented on GitHub (Sep 13, 2022):

:tada:This issue was addressed in #13178, which has now been successfully released as Windows Terminal Preview v1.16.252.🎉

Handy links:

@ghost commented on GitHub (Sep 13, 2022): :tada:This issue was addressed in #13178, which has now been successfully released as `Windows Terminal Preview v1.16.252`.:tada: Handy links: * [Release Notes](https://github.com/microsoft/terminal/releases/tag/v1.16.252) * [Store Download](https://www.microsoft.com/store/apps/9n8g5rfz9xk3?cid=storebadge&ocid=badge)

claunia commented