■はじめに

今回はNuGetで、（Google Chromeでも使用されている）ChromiumのWebブラウザーコントロールをインストールして使います。

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

■開発環境

Windows 10
Visual Studio Community 2019
.NET Framework 4.x

■作ってみる

◇プロジェクトの作成

WPFプロジェクトを作成します。
ここではSimpleBrowserと名付けました。

◇ビルド構成の設定

「x86」でビルドするための設定をします。

※「AnyCPU」でビルドしたい場合はこちらを参考に設定してください。
Feature Request - Add AnyCPU Support · Issue #1714 · cefsharp/CefSharp · GitHub

「ソリューションプラットフォーム」のコンボボックスを開き、「構成マネージャー」を選択します。

「アクティブソリューションプラットフォーム」のコンボボックスを開き、「新規作成」を選択します。

プラットフォームのコンボボックスから「x86」を選択して「OK」ボタンを押下します。

「x86」が選択されていることを確認します。

◇Webブラウザーコントロールのインストール

NuGetでCefSharp.Wpfをインストールします。

インストール完了後、念のためVisual Studioをいったん終了し、再度ソリューションを開いてください。

◇画面作成

Gridを2行、3列に分割してください。
1行目の高さは小さめ、真ん中の列幅は大きめにしてください。
後で調整するので大体でよいです。

XamlのWindowの定義に

xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

の記述を追加し、Gridの中に

<cef:ChromiumWebBrowser x:Name="browser" Grid.RowSpan="2" Grid.ColumnSpan="3"/>

の記述を追加してください。
これで画面いっぱいにブラウザコントロールが配置されます。

ツールボックスからDockPanelをGridの1行目、真ん中の列にドラッグ＆ドロップしてください。

DockPanelの定義を以下のように編集します。

<DockPanel x:Name="naviPanel" Grid.Column="1" Opacity="0.8"/>

Gridの1行目、真ん中の列（DockPanel）の中にStackPanel, TextBox, Buttonをドラッグ＆ドロップしてください。
訂正：左からStackPanel → Button → TextBoxの順に配置してください。

StackPanelの中にButtonを2つドラッグ＆ドロップしてください。

各種プロパティを編集します。

<!-- Webブラウザーコントロール -->
<cef:ChromiumWebBrowser x:Name="browser" Grid.RowSpan="2" Grid.ColumnSpan="3"/>

<!-- 上段中央パネル -->
<DockPanel x:Name="naviPanel" Grid.Column="1" Opacity="0.8">
    <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
        <!-- 戻るボタン -->
        <Button x:Name="back" Content="◀" Margin="5" Padding="5,0"/>
        <!-- 進むボタン -->
        <Button x:Name="forward" Content="▶" Margin="0,5,5,5" Padding="5,0"/>
    </StackPanel>
    <!-- ページ表示ボタン -->
    <Button x:Name="go" Content="Go" DockPanel.Dock="Right" Margin="5" Padding="10,0" IsDefault="True"/>
    <!-- アドレスバー -->
    <TextBox x:Name="address" Margin="0,5"/>
</DockPanel>

戻る・進むボタンのあるStackPanelのDockPanel.DockプロパティをLeftで左端に、
GoボタンのDoclPanel.DockプロパティをRightで右端に配置することによって、
空いた領域をTextBoxが埋めるように配置されます。
DockPanelはコントロールを配置する順番が重要です。

初期フォーカスをアドレスバーに設定します。
GridにFocusManager.FocusElementを設定してください。
ついでにWindowのタイトルも設定しています。

<Window x:Class="Browser01.MainWindow"
    :
    xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
    Title="簡易ブラウザ" Height="450" Width="800" ResizeMode="CanResizeWithGrip">
<Grid FocusManager.FocusedElement="{Binding ElementName=address}">
    <Grid.RowDefinitions>
:

Gridの行列の調整をします。
1行目の高さをAutoに設定します。

真ん中の列の幅を変更します。
数字部分をクリックし、3を入力します。

左右の列幅は1に設定します。
画面デザイナでの操作がやりづらければ直接Xamlを編集してもよいです。

ここまでで画面レイアウトは以下のようになります。

◇ロジック作成

Goボタンを選択し、プロパティウィンドウの稲妻マークを選択し、Clickのテキストボックスをダブルクリックします。

Clickイベントに以下を記述します。

if (string.IsNullOrWhiteSpace(address.Text))
{
    return;
}

if (browser.IsLoaded)
{
    browser.Load(address.Text);
}
else
{
    browser.Address = address.Text;
}

ブラウザ初期化処理を作成し、コンストラクタで呼ぶようにします。

public MainWindow()
{
    InitializeComponent();

    // ブラウザ初期化
    InitBrowser();
}

/// <summary>
/// ブラウザ初期化
/// </summary>
private void InitBrowser()
{
    // 戻る・進むボタンの設定
    naviPanel.DataContext = browser;
    back.Command = browser.BackCommand;
    forward.Command = browser.ForwardCommand;

    // 言語設定
    browser.BrowserSettings.AcceptLanguageList = "ja-JP";
}

これで完成です。

■動かしてみる

実行してみます。

アドレスバーにURLを入力してEnterキーを押すか、Goボタンを押します。

Webページの上に重なるようにしてアドレスバー等のコントロールが表示されています。

コントロールを重ねて表示する場合、画面で手前に表示したいものをXamlで後（下）の方に定義するようにします。
今回の例で言うと、ブラウザコントロールの後にDockPanelを定義しています。

リンクをクリックして別のページに移動してみます。
戻るボタンが有効化しました。

おしまい

＜＜最初の記事　＜前の記事　次の記事＞