Skip to content

Commit 635ca02

Browse files
authored
Update BackgroundColor.md
1 parent 8df23cb commit 635ca02

1 file changed

Lines changed: 56 additions & 9 deletions

File tree

specs/BackgroundColor.md

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,94 @@ WebView2 developers have provided feedback that there is a 'white flicker' when
33

44

55
# Description
6-
The `BackgroundColor` property allows developers to set the color that shows before WebView loads any web content. The default color is white. This API uses the `COREWEBVIEW2_COLOR` value which is used to specify an RGBA color. The 4 fields of `COREWEBVIEW2_COLOR` have intensity values from 0 to 255 with 0 being the least intense. Important to note is the A value which allows developers to set transparency. An alpha value of 0 is entirely transparent and 255 is opaque. Semi-transparent colors are not currently supported, but the work is pending. The `BackgroundColor` property enables a seamless UI experience. Developers can choose a color to show between loading pages that matches the color scheme of the hosting application. Or do away with the color entirely and just show the hosting app's content.
6+
The `BackgroundColor` property allows developers to set the color that shows when WebView has not loaded any web content and when a webpage does not specify a background color. Color is specified by the COREWEBVIEW2_COLOR value meaning the background color can also be transparent. The WebView background color will show before the initial navigation, between navigations before the next page has rendered, and for pages with no `background` style properties set. To clarify the latter case, WebView will always honor a webpage's background content. `BackgroundColor` will only show in the absence of css `background` style properties. In that case, WebView will render web content over the `BackgroundColor` color. For a transparent background, web content will render over hosting app content. WebView's default background color is white to match the browser experience. It is important to note that while COREWEBVIEW2_COLOR has `A` an alpha value, semi-transparent colors are not supported by this API and setting `BackgroundColor` to a semi-transparent color will fail with E_INVALIDARG. Any alpha value above 0 and below 255 will result in an E_INVALIDARG error. `BackgroundColor` can only be an opaque color or transparent. The `BackgroundColor` property enables a seamless UI experience. Developers can replace the 'white flash' between loading pages with a color better suited to their application. For websites with no specified background color, developers can display web contents over a color of their choosing. They can also do away with the background color entirely with transparency and have the 'in between pages color' just be hosting content, or have hosting app content be the backdrop for webpages without a background color specified.
77

88
# Examples
9-
The fields of CoreWebView2Color can be set with plain old integer values between 0 and 255. In the following example, we see the app reading color values from a COLORREF (which are integers under the covers) into a CoreWebView2Color. It then sets the CoreWebView2Color.A value to 0 or 255. Once the CoreWebView2Color value is filled out, it is passed to the controller's put_BackgroundColor API.
9+
## Win32 C++
10+
The fields of COREWEBVIEW2_COLOR can be set with plain old integer values between 0 and 255. In the following example, we see the app reading color values from a COLORREF (which are integers under the covers) into a COREWEBVIEW2_COLOR. It then sets the COREWEBVIEW2_COLOR.A value to 0 or 255. Once the COREWEBVIEW2_COLOR value is filled out, it is passed to the controller's put_BackgroundColor API.
1011
```cpp
1112
void ViewComponent::SetBackgroundColor(COLORREF color, bool transparent)
1213
{
13-
CoreWebView2Color wvColor;
14+
COREWEBVIEW2_COLOR wvColor;
1415
wvColor.R = GetRValue(color);
1516
wvColor.G = GetGValue(color);
1617
wvColor.B = GetBValue(color);
1718
wvColor.A = transparent ? 0 : 255;
1819
m_controller->put_BackgroundColor(wvColor);
1920
}
2021
```
22+
## .WinForms
23+
Set the background color of the WinForms WebView control with the BackColor property on every WinForms control.
24+
```c#
25+
private void backgroundColorMenuItem_Click(object sender, EventArgs e)
26+
{
27+
System.Drawing.KnownColor backgroundColor;
28+
var menuItem = (System.Windows.Forms.ToolStripMenuItem)sender;
29+
if (menuItem.Text == "Red")
30+
{
31+
backgroundColor = System.Drawing.KnownColor.Red;
32+
}
33+
else if (menuItem.Text == "Blue")
34+
{
35+
backgroundColor = System.Drawing.KnownColor.Blue;
36+
}
37+
else if (menuItem.Text == "Transparent")
38+
{
39+
backgroundColor = System.Drawing.KnownColor.Transparent;
40+
}
41+
else
42+
{
43+
// Default to white
44+
backgroundColor = System.Drawing.KnownColor.White;
45+
}
46+
this.webView2Control.BackColor = System.Drawing.Color.FromKnownColor(backgroundColor);
47+
}
48+
```
2149

2250

2351
# Remarks
24-
Currently translucent colors are not supported by the API. This work is being tracked and will be added later. Passing a CoreWebView2Color value with an A value greater than 0 or less than 255 will result in an error.
52+
Currently translucent colors are not supported by the API. This work is being tracked and will be added later.
2553

2654

55+
# API Notes
56+
2757

2858
# API Details
59+
## Win32 C++
2960
```cpp
3061
[uuid(4d00c0d1-9434-4eb6-8078-8697a560334f), object, pointer_default(unique)]
31-
interface ICoreWebView2Controller : IUnknown {
62+
interface ICoreWebView2Controller2 : ICoreWebView2Controller {
3263

3364
// ...
3465

3566
/// This property can be modified to get and set the color that shows before the WebView
3667
/// has loaded any web content.
37-
[propget] HRESULT BackgroundColor([out, retval] CoreWebView2Color* backgroundColor);
38-
[propput] HRESULT BackgroundColor([in] CoreWebView2Color backgroundColor);
68+
[propget] HRESULT BackgroundColor([out, retval] COREWEBVIEW2_COLOR* backgroundColor);
69+
[propput] HRESULT BackgroundColor([in] COREWEBVIEW2_COLOR backgroundColor);
70+
71+
// ...
3972
}
4073

4174

4275
/// A value representing color for WebView2
43-
typedef struct CoreWebView2Color {
76+
typedef struct COREWEBVIEW2_COLOR {
4477
BYTE A;
4578
BYTE R;
4679
BYTE G;
4780
BYTE B;
48-
} CoreWebView2Color;
81+
} COREWEBVIEW2_COLOR;
82+
```
83+
## .NET
84+
```c#
85+
public partial class CoreWebView2Controller
86+
{
87+
public Color BackgroundColor { get; set; }
88+
}
4989
```
90+
## WinRT C++
91+
```cpp
92+
winrt::Windows::UI::Color BackgroundColor();
93+
void BackgroundColor(winrt::Windows::UI::Color valueIn);
94+
```
95+
96+
# Appendix

0 commit comments

Comments
 (0)