0

Windows formでのUI面のデザインがシンプルだったりするため、webBrowserを使ってブタンを表示してみようと思いました。
試しに以下のシンプルなボタンをbtn1.htmlとして、WindowsFormsApplication1.exeと同じフォルダーパスに配置しました。

btn1.htmlの中身は以下のようになっています。

<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: 0 4px 0 #e91b0c;
                    background: #f44336;
                    color:#fff;
                    cursor: pointer;
                    padding: 7px;
                    text-align: center;
                }
                #btn:hover{
                    opacity: 0.8;
                }
                #btn:active{
                    background: #FFA500 ;
                    box-shadow: 0 4px 0 #FFB550 ;
                    width: 150px ;
                    margin: 5px;
                }
            </style>
            <script type="text/javascript">

            </script>
        <title>test</title>
    </head>

    <body>
        <div id="btn">button1</div>
    </body>
</html>

このbtn1.htmlはIEやChromeで開くとhover、activeはしっかり動いています。
ですが、これをwebBrowserを実装したWinformで動かすと全く動いてくれません(ボタンの描画はできています)。
正確にはCSSが反映されていないのでhoverやactiveが読み込まれないようです。

下記がwinformのソースです。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1( )
        {
            InitializeComponent( );
        }

        private void Form1_Load( object sender , EventArgs e )
        {

        }

        private void button1_Click( object sender , EventArgs e )
        {
            String local ;
            String address ;

            local   = Application.StartupPath ;
            address = "file:\\\\" + local + textBox1.Text ;
            label1.Text = address ;

            webBrowser1.Navigate( new Uri( address ) ) ;
        }

        public bool IsHorizontalScrollbarPresent( WebBrowser web )
        {
            try
            {
                var widthofScrollableArea   = web.Document.Body.ScrollRectangle.Width;
                var widthofControl          = web.Document.Window.Size.Width;

                return widthofScrollableArea > widthofControl;
            }
            catch( Exception ex )
            {
                return false ;
            }
        }

        private void webBrowser1_DocumentCompleted( object sender , WebBrowserDocumentCompletedEventArgs e )
        {
            if ( IsHorizontalScrollbarPresent( webBrowser1 ) )
            {
                webBrowser1.ScrollBarsEnabled   = false ;
                webBrowser1.Document.Body.Style = "zoom:40%" ;
                webBrowser1.Visible             = true ;
            }
            else
            {
                webBrowser1.Visible             = true ;
            }
        }
    }
}

どう修正したらCSSが反映されるようになるのでしょうか。

1 件の回答 1

1

WebBrowserコントロールは描画にInternet Explorerを使用しています。そしてInternet Explorerにはブラウザーモードとドキュメントモードがあり、これを理解する必要があります。

  • WebBrowserコントロールは表示内容が変化しないように互換性を維持するため、IE7ブラウザーモードとなります。
  • IE10以下のブラウザーモードで適切な<!DOCTYPE>宣言がされていない場合、IE5ドキュメントモードで表示されます。

その上で質問文にあるHTMLには<!DOCTYPE>宣言が含まれていないため、CSSが反映されないのではなくIE5モードで表示されているだけです。参考までにIE11で当該HTMLを開きF12開発者ツールを使用してドキュメントモードをIE5に指定すると同じ結果を見ることができます。

WebBrowserコントロールのブラウザーモードを変更するにはWebBrowserコントロールを読み込む前にBrowser Emulationのレジストリ値を設定します。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。