【WPF】WebBrowser を使ってPDFファイルを表示してみる

2017年11月2日2019年6月27日C#,開発

おはようございます。

今回は、WPFアプリでPDFを表示する方法のうち、WebBrowser でサクッとファイルを表示するのを試してみました。

画面に上部メニューを追加し、そこから呼び出せるように修正します。
ヘルプやマニュアルなんかをアプリから表示する際にやったりしますよね。

プログラムは前回のものを流用します。

【WPF】はてなアイコンを設置してツールチップでヘルプを表示する | ドラブロ –

WPF@C#で、画面にはてなアイコンを設置してマウスオーバーでツールチップを表示してみました。ちょっと ...

https://www.doraxdora.com/blog/2017/11/01/post-2960/

1. 画面の追加
- 1.1. 画面レイアウト
- 1.2. コードビハインド
2. PDFファイルの追加
3. 画面の修正
4. プログラム修正
5. 起動してみる
6. まとめ

画面の追加

新規でPDFを表示するためのウィンドウを追加します。
画像を取り忘れてしまいましたが、ソリューション・エクスプローラーから「追加」＞「ウィンドウ」みたいな感じで出来るはずです。

画面レイアウト

PdfView.xaml

<Mah:MetroWindow x:Class="WpfApp1.PdfView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="PDFビュー" Width="1024" Height="768"
        GlowBrush="{DynamicResource AccentColorBrush}"
        BorderThickness="1"
        Icon="/WpfApp1;component/Resource/Cat.ico"
        WindowStartupLocation="CenterScreen" >
    <Window.Resources>
        <ResourceDictionary Source="/Style/StyleDic.xaml"/>
    </Window.Resources>
    <Grid>
        <WebBrowser x:Name="wb_manual" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="1,1,1,1"/>
    </Grid>
</Mah:MetroWindow>

<Mah:MetroWindow x:Class="WpfApp1.PdfView"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:WpfApp1"

xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

mc:Ignorable="d"

Title="PDFビュー"Width="1024"Height="768"

GlowBrush="{DynamicResource AccentColorBrush}"

BorderThickness="1"

Icon="/WpfApp1;component/Resource/Cat.ico"

WindowStartupLocation="CenterScreen" >

<Window.Resources>

</Window.Resources>

<Grid>

</Grid>

</Mah:MetroWindow>

単純に WebBrowser を配置してスタイルを弄っただけです。

コードビハインド

PdfView.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

using MahApps.Metro.Controls;
using System.Reflection;

namespace WpfApp1
{
    /// <summary>
    /// PdfView.xaml の相互作用ロジック
    /// </summary>
    public partial class PdfView : MetroWindow
    {
        public PdfView()
        {
            InitializeComponent();
            Assembly mainAssembly = Assembly.GetExecutingAssembly();
            String appDir = System.IO.Path.GetDirectoryName(mainAssembly.Location);

            wb_manual.Navigate("file://" + appDir + "/Pdf/sample.pdf" + "#toolbar=1");

        }
    }
}

usingSystem;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Threading.Tasks;

usingSystem.Windows;

usingSystem.Windows.Controls;

usingSystem.Windows.Data;

usingSystem.Windows.Documents;

usingSystem.Windows.Input;

usingSystem.Windows.Media;

usingSystem.Windows.Media.Imaging;

usingSystem.Windows.Shapes;

usingMahApps.Metro.Controls;

usingSystem.Reflection;

namespaceWpfApp1

{

/// <summary>

/// PdfView.xaml の相互作用ロジック

/// </summary>

publicpartial classPdfView:MetroWindow

{

publicPdfView()

{

InitializeComponent();

Assembly mainAssembly=Assembly.GetExecutingAssembly();

StringappDir=System.IO.Path.GetDirectoryName(mainAssembly.Location);

wb_manual.Navigate("file://"+appDir+"/Pdf/sample.pdf"+"#toolbar=1");

}

実行ディレクトリを取得して、PDFのパスを絶対パスで指定します。
また、ツールバーを表示したくなければ「#toolbar=1」を「#toolbar=0」に変更してください。

PDFファイルの追加

プロジェクト直下に「Pdf」フォルダ―を作成し、適当なPDFファイルを格納します。
ファイル名は「sample.pdf」としました。

また、ファイルのプロパティを開き、常に実行ディレクトリにコピーするようにプロパティを変更します。

画面の修正

グリッドのレイアウト調整

MainWindow.xaml（抜粋）

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition />
        </Grid.RowDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

メニュー追加

MainWindow.xaml（抜粋）

            <Menu Style="{StaticResource menu-normal}" Background="#e7efff" Height="auto" Width="auto" Margin="0,0,0,20">
                <MenuItem Header="ファイル(_F)" >
                    <MenuItem x:Name="menu_exit" Header="終了(_X)" Click="menu_exit_Click"/>
                </MenuItem>
                <MenuItem Header="その他(_O)">
                    <MenuItem x:Name="menu_pdfview" Header="サンプルPDF表示(_P)" Click="menu_pdfview_Click"/>
                </MenuItem>
            </Menu>

</MenuItem>

</MenuItem>

</Menu>

スタイル定義の追加

StyleDic.xaml

        <Style x:Key="menu-normal" TargetType="Menu" >
            <Setter Property="Background" Value="#ffeef1ff" />
        </Style>

</Style>

プログラム修正

追加したメニューのクリックイベントの実装を追加します。

MainWindow.xaml.cs

        /// <summary>
        /// 閉じるメニュークリックイベント.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void menu_exit_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        /// <summary>
        /// サンプルPDF表示メニュークリックイベント.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void menu_pdfview_Click(object sender, RoutedEventArgs e)
        {
            // ダイアログを表示
            var win = new PdfView();
            win.Owner = GetWindow(this);
            win.ShowDialog();
        }