Windowsアプリケーションでもデザインに凝りたい

システム部の稲葉です。

ちょっとしたツールを作るときにどんな技術を選択するかといった時に、一番の決め手になるのは使い慣れた技術が使えるかというところかと思います。

WindowsアプリケーションでGUIを作るときはC#ならWinFormsかWPFやUWPを選択するわけですが、WinFormsで今時のUIを備えたGUIアプリケーションを作ろうとするとかなり大変です。

かといってWPFやUWPで使用するxamlを新規に覚えるのも大変です。

GUIはhtmlとJavaScriptで作りたい!そんな要望を叶えてくれるのが組み込みブラウザライブラリの一種であるCefSharpです。

CEF(Chromium Embedded Framework)はChromium(Google Chromeからいくつかの機能を抜いた開発版)ベースの組み込みブラウザフレームワークです。

CEFはElectronに使われているので知ってる人にとっては説明不要なメジャーなフレームワークですね。

そのCEFを.net frameworkで使えるようにしたものがCefSharpというわけです。

CefSharp自体が以下のように3種類のライブラリを持っているので、自分はWPFで作ろうと思ってたのに！という場合でも安心ですね・・・

CefSharp.WinForms
CefSharp.Wpf
CefSharp.OffScreen

WPF版は、ポップアップメニューが変な場所に出る、ポップアップメニューを出した状態で他の場所をクリックしても消えないなどバグが多いのでWPF版を使うときはポップアップメニューを出さない事をお勧めします・・・。

WPF版でポップアップメニューを出さないようにするには以下のようなMenuHandler.csを作ってブラウザ部品のMenuHandlerに設定します(例：this.cef_browser.MenuHandler = new MenuHandler();)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using CefSharp;

namespace WpCliSupportApp
{
    internal class MenuHandler : IContextMenuHandler
    {
        void IContextMenuHandler.OnBeforeContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model)
        {
            model.Clear(); // ポップアップメニューを空にする
        }
        bool IContextMenuHandler.OnContextMenuCommand(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, CefMenuCommand commandId, CefEventFlags eventFlags)
        {
            return false;
        }
        void IContextMenuHandler.OnContextMenuDismissed(IWebBrowser browserControl, IBrowser browser, IFrame frame)
        {

        }
        bool IContextMenuHandler.RunContextMenu(IWebBrowser browserControl, IBrowser browser, IFrame frame, IContextMenuParams parameters, IMenuModel model, IRunContextMenuCallback callback)
        {
            return false;
        }
    }
}

 

では、さっそくWinForms版の使いかたを見てましょう。

nugetでパッケージをインストールし

構成マネージャでプラットフォームとしてx64またはx86を追加し

プロジェクトのプロパティからビルドを選択してプラットフォームターゲットを選択したら、

こんなコードをサクッと書けば完成です。

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

namespace CefSharpWinForms
{
    public partial class Form1 : Form
    {
        private string currentUrl = @"https://www.phoenixdesign.jp";
        private CefSharp.WinForms.ChromiumWebBrowser myBrowser;

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            CefSharp.Cef.Initialize();
            this.myBrowser = new CefSharp.WinForms.ChromiumWebBrowser(this.currentUrl);
            this.Controls.Add(this.myBrowser);
            this.myBrowser.Dock = DockStyle.Fill;
        }
    }
}

いい感じですね！

ローカルにあるhtmlファイルもfile:///でアクセスできるので、サーバーを使わずにPCの中だけで完結するアプリにも使えます。