■はじめに
今回は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を定義しています。
リンクをクリックして別のページに移動してみます。
戻るボタンが有効化しました。
おしまい