October 22, 2024
Chicago 12, Melborne City, USA
HTML

Need to put a watermark inside a WebBrowser


I am trying to read an HTML file in a WPF app with WebBrowser and I want to put a watermark between WebBrowser and the text which I navigate from HTML file.

I tried to use CSS in xaml.cs file but it wasn’t working. I do have 2 modes with a button which first is just background color and watermark and when I press the button it navigates the things in HTML such as images and text. I tried to do it like below.

private void LoadDefaultWebBrowserContent()
{
    string defaultHtml = "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=11\" />" +
           "<html><head><style>" +
           "html, body { height: 100%; margin: 0; padding: 0; background-color:#2C3040 !important; color: white; }" + 
           ".watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-family:'Roboto', sans-serif; font-size: 38px;" +
           "color: rgba(102, 105, 117, 0.5); white-space: nowrap; pointer-events: none; }" + 
           "</style></head><body>" +
           "<div class=\"watermark\">ASC-YardimPanel</div>" +
           "</body></html>";

    ContentWebBrowser.NavigateToString(defaultHtml);
}

While this working well enough as a starter screen

private string ApplyHtmlStylesForDetailsWindow(string content)
{
    return "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=11\" />" +
           "<html><head><style>" +
           "html, body { height: 100%; margin: 0; padding: 0; background-color:#2C3040 !important; color: white; }" + 
           ".watermark { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 20px;" +
           "color: rgba(102, 105, 117, 0.5); white-space: nowrap; pointer-events: none; }" + 
           "h1, h2, h3, h4, h5, h6, p, span, div {{ font-family: 'Roboto', sans-serif; font-size:12px; color: #9A9EB1 !important; }}" +
           "th, td {{ font-size:12px; font-family: 'Roboto', sans-serif !important; padding: 10px; border: 1px solid white !important  }}" +
           "td {{ background-color: transparent !important; }}" +
           "img {{ width:60%; height: 60% !important;}}" +
           "</style></head><body>" +
           "<div class=\"watermark\">ASC-YardimPanel</div>" +
           $"{content}" +
           "</body></html>";

This is not working (actually working but the "transform" line inside ".watermark" is not working while it’s working on top).



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video