Windows GUIプログラミング入門21 NuGet(3), ブラウザコントロール

# ■はじめに

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

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

# ■開発環境

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

# ■作ってみる

## ◇プロジェクトの作成

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

![bg21-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1d1e9e17-916c-dafd-4d46-6a64bcc8b763.png)

## ◇ビルド構成の設定

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

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

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

![bg21-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/cbcf1b10-1f96-1015-07fe-38f73c37db03.png)

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

![bg21-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/8cb5e6d2-976e-5fad-2453-27ee9ba0006c.png)

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

![bg21-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/d8d621c5-d507-96ad-5030-936578a71ec0.png)

![bg21-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/10ed6a57-4777-63ab-7a46-b9b106214712.png)

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

![bg21-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/fa3ab58b-a864-7d09-f875-665d6e4d03ee.png)

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

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

![bg21-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4205e72f-878c-dd9d-f08d-3ea1e9f92049.png)

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

## ◇画面作成

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

![bg21-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b0a60058-cf3f-35bd-aad6-d032e173b8bc.png)

Xamlの`Window`の定義に

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

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

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

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

![bg21-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a13e9429-7193-f1aa-3fe9-bdda86e636ab.png)

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

![bg21-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/315195b8-c2d3-3bc0-2dc9-06e0f059e7e1.png)

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

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

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

![bg21-11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/9570ce1e-87ed-2c21-df68-76e428f38bcf.png)

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

![bg21-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/a33bad72-1aba-1a5d-bf54-76bc6c189272.png)

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

```Xml
<!-- 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のタイトルも設定しています。

```Xml
<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`に設定します。

![bg21-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/1106e155-6a5e-0414-0ecf-b674b3bf912e.png)

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

![bg21-14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/886f18a7-d713-3298-4657-ddc413bf6ab2.png)

![bg21-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e2dd2e81-455e-bbbb-f588-e92f760c9330.png)

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

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

![bg21-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/592d6cdc-2b37-d88a-a2d9-e0a0596997bd.png)

## ◇ロジック作成

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

![bg21-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/6fcce7c5-16f6-0720-1d27-3cdddee730cc.png)

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

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

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

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

```CSharp
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";
}
```

これで完成です。

# ■動かしてみる

実行してみます。

![bg21-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/be58aafc-038f-4e54-7335-666ad3683255.png)


アドレスバーにURLを入力してEnterキーを押すか、Goボタンを押します。
![bg21-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b8a07ecb-8b7f-ea1f-0672-f48f55454d33.png)

Webページの上に重なるようにしてアドレスバー等のコントロールが表示されています。
![bg-21-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/26e6576f-0608-f7e0-ef70-1f48b6667e74.png)
コントロールを重ねて表示する場合、画面で手前に表示したいものをXamlで後（下）の方に定義するようにします。
今回の例で言うと、ブラウザコントロールの後にDockPanelを定義しています。


リンクをクリックして別のページに移動してみます。
戻るボタンが有効化しました。
![bg21-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/87ebce3a-7743-114c-29ea-24ec4afebb9c.png)

おしまい

---

[＜＜ 最初の記事](http://qiita.com/Kosen-amai/items/f9e3df2aa80363f5af5b "Windows GUIプログラミング入門1 メッセージボックス表示") 　 [＜ 前の記事](https://qiita.com/Kosen-amai/items/c5cecf81240407693cda "Windows GUIプログラミング入門20 NuGet(2), コントロール集") 　 [次の記事 ＞](https://qiita.com/Kosen-amai/items/de49ab4c8b74ddf6f13c "Windows GUIプログラミング入門22 画像ビューア")