In some cases, using InfoBar.Severity = Information feels hard to distinguish in a layout that contains multiple UI controls. Due to the lack of a background color, it can be missed by users - or atleast it doesn't bring the amount of attention that you'd want.

Some examples (in for PowerToys): #12470

Warning makes it stand-out better, but it's not really.. you know.. a warning :):

Current spec:

Proposal:

Would be nice to have a consistent background color, like the other modes, that makes it stand out a bit more. E.g. blue-ish:

I agree with you @niels9001, I think having it be blueish makes a lot more sense given that the other background colors are matching the expected color too.

The blue colour is actually the Accent colour, so are you proposing a slight Accent colour tint?

@mdtauk of the i icon you mean? Oh, didn't know that.

Blue makes sense for an informational mode. I think Aero did that as well.

I have a similar/related problem. Using a InfoBar with Severity Informational uses an (almost) transparent background. This causes visual/readability issues when the InfoBar is used in a screen with a non-solid color or color that differs from the default background color. In my case, I want to use the InfoBar on a screen with a full-screen MapView. https://github.com/microsoft/microsoft-ui-xaml/blob/ee89dc1c0dc8027af11ac71289af7895d2619e1f/dev/InfoBar/InfoBar_themeresources.xaml#L14 https://github.com/microsoft/microsoft-ui-xaml/blob/5673d0ca4b6b0e4645637bbab37f48f4825baec3/dev/CommonStyles/Common_themeresources_any.xaml#L207 https://github.com/microsoft/microsoft-ui-xaml/blob/5673d0ca4b6b0e4645637bbab37f48f4825baec3/dev/CommonStyles/Common_themeresources_any.xaml#L100

Expected behavior The informational should have a solid background color (similar to the background colors of the other severities. It could be dark-gray for Dark Theme and light-grey for Light Theme or - as @niels9001 suggested - a slight accent color tint

@gabbybilka and @alejo4000 FYI, some good points here about the design.

Actually, you know what, I think the Terminal is running into this ourselves, as we move to Controls v2. This PR comment thread has some details: https://github.com/microsoft/terminal/pull/12241/files/a2392a4ea9dde17fb9237a517620a091d6cd710f#r791261758. Highlights:

InfoBars look like:

For some reason there's a bit of space all around the info bar that the background will not cover (and that results in a transparent border all around the bar), the negative margin here fixes that

In Controls v1, an InfoBar has either #2f2f2f or #2B2B2B as the background, which are both fully opaque In In Controls v2, an InfoBar uses SystemFillColorAttentionBackgroundBrush which is #08FFFFFF, so it's partially transparent (mostly transparent actually).

Basically, we've got a transparent back to our window, which means that the InfoBar's started being totally transparent. Granted, other XAML apps wouldn't really have to deal with having a totally transparent background. But having the alpha channel be 08 doesn't even seem right to me. 3% opacity seems arbitrary and neigh imperceptible.

This should use the Mica brush so it's readable the say way Combobox uses for example. I stepped over the same issue and it's NOT READABLE.

This is still an issue. I've got an image background and the InfoBar background shows the image behind it.

@niels9001 info color is blue now and and this issue is resolved :)

In PowerToys, or by default?

In PowerToys, or by default?

Woops, I was too quick. It's blue in PowerToys, but gray in https://github.com/microsoft/microsoft-ui-xaml/blob/d4c4e539c55b562e78e7f026195d5b6c8af234ea/controls/dev/InfoBar/InfoBar_themeresources.xaml#L8