Skip to content

Commit 1d065f6

Browse files
authored
Merge pull request #809 from MicrosoftEdge/api-backgroundcolor
Api DefaultBackgroundColor
2 parents e01d424 + 2308e91 commit 1d065f6

1 file changed

Lines changed: 114 additions & 0 deletions

File tree

specs/BackgroundColor.md

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# Background
2+
WebView2 developers have provided feedback that there is a 'white flicker' when navigating between pages. This flicker comes from WebView briefly showing its default background color for when no web page is loaded. Developers should be able to set a custom background color for the WebView that matches the color scheme of their app and avoids this flicker. We have also received feedback requesting the ability to set the WebView's background color transparent. This way developers can create a seamless UI experience where the WebView displays web content directly over host app content. The DefaultBackgroundColor API addresses this need.
3+
4+
5+
# Description
6+
The `DefaultBackgroundColor` property enables a smoother UI experience. Developers can choose the color that shows between loading pages and eliminate any 'white flash.' 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.
7+
8+
# Examples
9+
## Win32 C++
10+
The fields of COREWEBVIEW2_COLOR can be set with 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_DefaultBackgroundColor API.
11+
```cpp
12+
void ViewComponent::SetBackgroundColor(COLORREF color, bool transparent)
13+
{
14+
COREWEBVIEW2_COLOR wvColor;
15+
wvColor.R = GetRValue(color);
16+
wvColor.G = GetGValue(color);
17+
wvColor.B = GetBValue(color);
18+
wvColor.A = transparent ? 0 : 255;
19+
m_controller->put_DefaultBackgroundColor(wvColor);
20+
}
21+
```
22+
## WinRT
23+
```c#
24+
private void SetBackgroundColor(Windows.UI.Color color)
25+
{
26+
_coreWebView2Controller.DefaultBackgroundColor = color;
27+
}
28+
```
29+
30+
31+
# Remarks
32+
Currently only colors with an A set to 0 or 255 are supported by the API. The work to support semi-transparent colors is being tracked and will be added later
33+
34+
35+
# API Details
36+
## Win32 C++
37+
```cpp
38+
// This is the ICoreWebView2Controller2 interface
39+
interface ICoreWebView2Controller2 : ICoreWebView2Controller {
40+
41+
/// The `DefaultBackgroundColor` property allows developers to set the color
42+
/// that shows when WebView has not loaded any web content and when a webpage
43+
/// does not specify a background color. Color is specified by the
44+
/// COREWEBVIEW2_COLOR value meaning the background color can also be
45+
/// transparent.
46+
/// The WebView background color will show before the initial navigation,
47+
/// between navigations before the next page has rendered, and for pages with
48+
/// no `background` style properties set. To clarify the latter case, WebView
49+
/// will always honor a webpage's background content. `DefaultBackgroundColor`
50+
/// will only show in the absence of css `background` style properties. In
51+
/// that case, WebView will render web content over the
52+
/// `DefaultBackgroundColor` color. For a transparent background, web content
53+
/// will render over hosting app content. WebView's default background color
54+
/// is white to resemble the browser experience.
55+
/// It is important to note that while COREWEBVIEW2_COLOR has `A` an alpha
56+
/// value, semi-transparent colors are not supported by this API and setting
57+
/// `DefaultBackgroundColor` to a semi-transparent color will fail with
58+
/// E_INVALIDARG. The only supported alpha values are 0 and 255, all other
59+
/// values will result in E_INVALIDARG.
60+
/// `DefaultBackgroundColor` can only be an opaque color or transparent.
61+
///
62+
/// The `DefaultBackgroundColor` property enables a smoother UI experience.
63+
/// Developers can choose the color that shows between loading pages and
64+
/// eliminate any 'white flash.' For websites with no specified
65+
/// background color, developers can display web contents over a color of
66+
/// their choosing. They can also do away with the background color entirely
67+
/// with transparency and have the 'in between pages color' just be hosting
68+
/// content, or have hosting app content be the backdrop for webpages without
69+
/// a background color specified.
70+
///
71+
/// \snippet ViewComponent.cpp DefaultBackgroundColor
72+
73+
[propget] HRESULT DefaultBackgroundColor(
74+
[out, retval] COREWEBVIEW2_COLOR* backgroundColor);
75+
76+
/// Sets the `DefaultBackgroundColor` property.
77+
78+
[propput] HRESULT DefaultBackgroundColor(
79+
[in] COREWEBVIEW2_COLOR backgroundColor);
80+
}
81+
82+
83+
/// A value representing RGBA color (Red, Green, Blue, Alpha) for WebView2.
84+
/// Each component takes a value from 0 to 255, with 0 being no intensity
85+
/// and 255 being the highest intensity.
86+
87+
typedef struct COREWEBVIEW2_COLOR {
88+
89+
/// Specifies the intensity of the Alpha ie. opacity value. 0 is transparent,
90+
/// 255 is opaque.
91+
92+
BYTE A;
93+
94+
/// Specifies the intensity of the Red color
95+
96+
BYTE R;
97+
98+
/// Specifies the intensity of the Green color
99+
100+
BYTE G;
101+
102+
/// Specifies the intensity of the Blue color
103+
104+
BYTE B;
105+
} COREWEBVIEW2_COLOR;
106+
```
107+
## WinRT
108+
```c#
109+
unsealed runtimeclass CoreWebView2Controller
110+
{
111+
// ..
112+
Windows.UI.Color DefaultBackgroundColor { get; set; };
113+
}
114+
```

0 commit comments

Comments
 (0)