The UI design on Windows form is simple, so I thought I would use webBrowser to display the button.
As a trial, we placed the following simple buttons as btn1.html in the same folder path as WindowsFormsApplication1.exe.
The contents of btn1.html are as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
#btn{
margin:0px;
width:180px;
border-radius:5px;
box-shadow:04px0#e91b0c;
background: #f44336;
color:#fff;
cursor —pointer;
padding —7px;
text-align:center;
}
#btn:hover{
opacity: 0.8;
}
# btn:active {
background: #FFA500;
box-shadow:04px0#FFB550;
width —150px;
margin —5px;
}
</style>
<script type="text/javascript">
</script>
<title>test</title>
</head>
<body>
<divid="btn">Button1</div>
</body>
</html>
If you open this btn1.html in IE or Chrome, the hover and active are working well.
However, if you run it on Winform with webBrowser, it won't work at all (buttons are drawn).
It seems that the CSS is not accurately reflected, so the hover and active are not loaded.
Below is the source of winform.
using System;
using System.Collections.General;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace WindowsFormsApplication1
{
public partial class Form 1:Form
{
public Form 1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgse)
{
}
private void button1_Click(object sender, EventArgse)
{
String local;
String address;
local=Application.StartupPath;
address="file:\\\"+local+textBox1.Text;
label1.Text=address;
webBrowser1.Navigate(newUri(address);
}
public bool Is HorizontalScrollbarPresent (WebBrowser web)
{
try
{
var width of ScrollableArea=web.Document.Body.ScrollRectangle.Width;
var width ofControl = web.Document.Window.Size.Width;
return width of ScrollableArea> width of Control;
}
catch (Exception ex)
{
return false;
}
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgse)
{
if (IsHorizontalScrollbarPresent (webBrowser1))
{
webBrowser1.ScrollBarsEnabled=false;
webBrowser1.Document.Body.Style="zoom:40%";
webBrowser1.Visible=true;
}
else
{
webBrowser1.Visible=true;
}
}
}
}
How can I fix it to reflect the CSS?
c# winforms
The WebBrowser control uses Internet Explorer for drawing.And Internet Explorer has browser and document modes that you need to understand.
<!DOCTYPE> declaration has been made in browser mode below IE10.The HTML in the questionnaire above does not contain the <!DOCTYPE> declaration, so the CSS is only displayed in IE5 mode, not reflected.For your information, open the HTML in IE11 and use the F12 Developer Tool to specify the document mode to IE5 to see the same results.
To change the browser mode of the WebBrowser control, set the registry value for Browser Emulation before loading the WebBrowser control.
© 2024 OneMinuteCode. All rights reserved.